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

{{
	"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: '类 型',
            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({
    elem: '#goods_table'
    , id: 'goodsReload'
    , url: '/test/getGoodsInfo'
    , method: 'get'
    , title: '用户表'
    , toolbar: '#goods_headerBar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    , cols:
        [[{type: 'checkbox', fixed: true},
           {
                field: 'type',
                title: '类 型',
                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>'