<script type="text/html" id="ID-table-demo-templet-user">{{!
{{= d.username }}
!}}</script>
<script type="text/html" id="ID-table-demo-templet-switch">{{!
!}}</script>
<script type="text/html" id="ID-table-demo-templet-other">{{!
评分：{{= d.score }}
职业：{{= d.classify }}
!}}</script>
<script>
layui.use(['table'], function(){
var table = layui.table;
var form = layui.form;
// 创建渲染实例
table.render({
elem: '#ID-table-demo-templet'
,url:'{{d.root}}/static/json/table/user.json' // 此处为静态模拟数据，实际使用时需换成真实接口
,page: true
,height: '315px'
,cols: [[
{type: 'checkbox', fixed: 'left'}
// 未自定义模板的普通列
,{field:'id', fixed: 'left', width:80, title: 'ID', sort: true}
// 模板 - 选择器写法
,{field:'username', width:80, title: '用户', templet: '#ID-table-demo-templet-user'}
// 模板 - 函数写法
,{field:'sex', width:60, title: '性别', templet: function(d){
if(d.sex === '男'){
return '
♂';
} else {
return '
♀';
}
}}
// 模板 - 普通字符写法
,{field:'city', width:115, title: '城市', templet: '
{{!{{= d.city }}!}}
'}
// 模板中可包含任意字段、任意内容（如表单等）
,{title: '状态', width:85, templet: '#ID-table-demo-templet-switch'}
,{title: '其他', minWidth:200, templet: '#ID-table-demo-templet-other'}
]]
});
// 状态 - 开关操作
form.on('switch(demo-templet-status)', function(obj){
var id = this.value;
var name = this.name;
layer.tips(id + ' ' + name + ': '+ obj.elem.checked, obj.othis);
});
});
</script>
