• <bdo id='FM1Zk'></bdo><ul id='FM1Zk'></ul>
      <i id='FM1Zk'><tr id='FM1Zk'><dt id='FM1Zk'><q id='FM1Zk'><span id='FM1Zk'><b id='FM1Zk'><form id='FM1Zk'><ins id='FM1Zk'></ins><ul id='FM1Zk'></ul><sub id='FM1Zk'></sub></form><legend id='FM1Zk'></legend><bdo id='FM1Zk'><pre id='FM1Zk'><center id='FM1Zk'></center></pre></bdo></b><th id='FM1Zk'></th></span></q></dt></tr></i><div id='FM1Zk'><tfoot id='FM1Zk'></tfoot><dl id='FM1Zk'><fieldset id='FM1Zk'></fieldset></dl></div>
      <legend id='FM1Zk'><style id='FM1Zk'><dir id='FM1Zk'><q id='FM1Zk'></q></dir></style></legend>
    1. <tfoot id='FM1Zk'></tfoot>

      <small id='FM1Zk'></small><noframes id='FM1Zk'>

        layui表格中使用自定义templet模板

        时间:2024-06-11
          <tbody id='XKmP2'></tbody>

        1. <tfoot id='XKmP2'></tfoot>

          <small id='XKmP2'></small><noframes id='XKmP2'>

              <i id='XKmP2'><tr id='XKmP2'><dt id='XKmP2'><q id='XKmP2'><span id='XKmP2'><b id='XKmP2'><form id='XKmP2'><ins id='XKmP2'></ins><ul id='XKmP2'></ul><sub id='XKmP2'></sub></form><legend id='XKmP2'></legend><bdo id='XKmP2'><pre id='XKmP2'><center id='XKmP2'></center></pre></bdo></b><th id='XKmP2'></th></span></q></dt></tr></i><div id='XKmP2'><tfoot id='XKmP2'></tfoot><dl id='XKmP2'><fieldset id='XKmP2'></fieldset></dl></div>
                • <bdo id='XKmP2'></bdo><ul id='XKmP2'></ul>
                  <legend id='XKmP2'><style id='XKmP2'><dir id='XKmP2'><q id='XKmP2'></q></dir></style></legend>
                • 我们在使用layui table展示数据时候,如果对一些字段不加特殊处理,前端表格直接显示数据库存储信息是不合适的,例如数据库有一个类型字段:0和1,0表示国产,1表示进口,前端显然不能直接显示0和1,而是应该根据后端返回的数字进行判断,展示相应的内容。layui table的自定义模板功能能非常方便地解决这个问题,首先看下效果图。

                  后端返回的完整数据:
                  {{
                  	"msg": "操作成功!",
                  	"code": "0",
                  	"data": [
                  		{
                  			"id": 1,
                  			"name": "iPhone",
                  			"type": "0",
                  			"price": 6000.0,
                  			"size": 55,
                  			"status": 0,
                  			"description": "说明"
                  		},
                  		{
                  			"id": 2,
                  			"name": "watch",
                  			"type": "1",
                  			"price": 500.0,
                  			"size": 35,
                  			"status": 1,
                  			"description": "说明"
                  		},
                  		{
                  			"id": 3,
                  			"name": "television",
                  			"type": "1",
                  			"price": 1000.0,
                  			"size": 90,
                  			"status": 1,
                  			"description": "说明"
                  		},
                  		{
                  			"id": 4,
                  			"name": "computer",
                  			"type": "1",
                  			"price": 4500.0,
                  			"size": 60,
                  			"status": 1,
                  			"description": "说明"
                  		}
                  	],
                  	"count": 4
                  }}
                  

                  方式一:函数转义

                  所谓函数转义,就是在表格cols的对应列中直接写一段函数:
                   

                  table.render({
                      elem: '#goods_table'
                      , id: 'goodsReload'
                      , url: '/test/getGoodsInfo'
                      , method: 'get'
                      , title: '用户表'
                      , toolbar: '#goods_headerBar' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
                      , cols:
                          [[{type: 'checkbox', fixed: true},
                             {
                              field: 'type',
                              title: '类&emsp;型',
                              width: 100,
                              align: 'center',
                              // data就是行数据:{"id": 1,"name": "iPhone","type": "1","price": 6000.0,"size": 55,"status": 0,"description": "说明"}
                              templet: function (d) {
                                  var type = d.type;
                                  if (type == 0) {
                                      return '<font color="#0000FF">国&ensp;产</font>';
                                  } else {
                                      return '<font color="#5FB878">进&ensp;口</font>';
                                  }
                              }
                          }
                          // 其他行省略,可去【前端系列-3】获得完整代码
                          {
                              fixed: 'right',
                              title: '操作',
                              toolbar: '#goos_lineBar',
                              align: 'center',
                              width: 120,
                              style: 'font-size:13px'
                          }
                      ]]
                  });
                  

                  这样的写法,简单直接,缺点是复用性差,有可能导致代码冗余。

                  方式二:绑定模版选择器

                  下述是templet对应的模板,它可以存放在页面的任意位置。模板遵循于 laytpl 语法,可读取到返回的所有数据
                   

                  <script type="text/html" id="typeTpl">
                      {{#  if(d.type ==0 ){ }}
                      <p style="color: #0000FF">国&ensp;产</p>
                      {{#  } else { }}
                      <p style="color: #00FF00">进&ensp;口</p>
                      {{#  } }}
                  </script>
                  
                  table.render中的对应列templet内容中直接引用上面的模板即可
                  table.render({
                      elem: '#goods_table'
                      , id: 'goodsReload'
                      , url: '/test/getGoodsInfo'
                      , method: 'get'
                      , title: '用户表'
                      , toolbar: '#goods_headerBar' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
                      , cols:
                          [[{type: 'checkbox', fixed: true},
                             {
                                  field: 'type',
                                  title: '类&emsp;型',
                                  width: 100,
                                  align: 'center',
                                  templet: '#typeTpl'
                              }
                             // 其他行省略,可去【前端系列-3】获得完整代码
                             {
                                  fixed: 'right',
                                  title: '操作',
                                  toolbar: '#goos_lineBar',
                                  align: 'center',
                                  width: 120,
                                  style: 'font-size:13px'
                              }
                          ]]
                  });
                  
                  这样的话,如果有多处表格使用同一个模板,代码复用性将得到加强。

                  还有一种方式:直接赋值模版字符
                  templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
                  
                  注意:这里一定要被一层 <div></div> 包裹,否则无法读取到模板
                  上一篇:Layui treetable 复选框联动解决方案 下一篇:没有了

                  相关文章

                  <i id='rRfr1'><tr id='rRfr1'><dt id='rRfr1'><q id='rRfr1'><span id='rRfr1'><b id='rRfr1'><form id='rRfr1'><ins id='rRfr1'></ins><ul id='rRfr1'></ul><sub id='rRfr1'></sub></form><legend id='rRfr1'></legend><bdo id='rRfr1'><pre id='rRfr1'><center id='rRfr1'></center></pre></bdo></b><th id='rRfr1'></th></span></q></dt></tr></i><div id='rRfr1'><tfoot id='rRfr1'></tfoot><dl id='rRfr1'><fieldset id='rRfr1'></fieldset></dl></div>
                  <tfoot id='rRfr1'></tfoot>

                  <small id='rRfr1'></small><noframes id='rRfr1'>

                    • <bdo id='rRfr1'></bdo><ul id='rRfr1'></ul>

                      <legend id='rRfr1'><style id='rRfr1'><dir id='rRfr1'><q id='rRfr1'></q></dir></style></legend>