layui 数据表格 根据值(1=业务，2=机构)显示中文名称

数据是用ThinkPHP5操作

类型是固定4个，

用layui templet - 自定义模板 方法一：

 {field:'type', title: '类型', width: 200, templet: '#titleTpl'}

 <script type="text/html" id="titleTpl">
  if({{d.type}}=='2'){机构}else if({{d.type}}=='3'){财务}
</script> 

其它方法二：（ThinkPHP5读数据）

[html]  view plain  copy

1. //分类显示中文名称  
2. $("[data-field='type']").children().each(function(){  
3.         if($(this).text()=='1'){  
4.            $(this).text("教务")  
5.         }else if($(this).text()=='2'){  
6.            $(this).text("机构")  
7.         }else if($(this).text()=='3'){  
8.            $(this).text("财务")  
9.         }else if($(this).text()=='4'){  
10.            $(this).text("业务")  
11.         }  
12. })  

代码：

[html]  view plain  copy

1. <script>  
2. layui.use(['laypage', 'table', 'element', 'layer'], function () {  
3. var table = layui.table;  
4. layer = layui.layer;  
5. laypage = layui.laypage;  
6. element = layui.element;  
7.   
8. //执行渲染  
9. table.render({  
10.       elem: '#demo' //指定原始表格元素选择器（推荐id选择器）  
11.       ,url: '{:url('main/usertable')}'  
12.       ,page: true  
13.       ,id: 'idTest'  
14.       ,limits: [10,20,30,60,90,150,300]  
15.       ,limit: 10 //默认采用60  
16.       ,height: 471 //容器高度  
17.       ,cols:  [[ //标题栏  
18.              {checkbox: true}  
19.             ,{field:'type', title: '类型',width:100}  
20.             ,{field:'username', title: '用户名',width:150}  
21.             ,{field:'nickname',title: '真实姓名', width:90}  
22.             ,{field:'tel',title: '电话', width:120}  
23.             ,{field:'wx',title: '微信', width:120}  
24.             ,{field:'qq',title: 'QQ', width:120}  
25.             ,{field:'email',title: '邮箱', width:120}  
26.             ,{field:'add',title: '地址', width:120}  
27.             ,{field: 'right', title: '操作',width:160, align:'center', toolbar: '#barDemo'}  
28.       ]]  
29.       ,initSort: {  
30.              field: 'id' //排序字段，对应 cols 设定的各字段名  
31.             ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序  
32.       }  
33.       ,request: {  
34.             pageName: 'page' //页码的参数名称，默认：page  
35.            ,limitName: 'limit' //每页数据量的参数名，默认：limit  
36.       }         
37.       ,done: function(res, page, count){  
38.             //如果是异步请求数据方式，res即为你接口返回的信息。  
39.             //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度  
40.               
41.             //分类显示中文名称  
42.             $("[data-field='type']").children().each(function(){  
43.                     if($(this).text()=='1'){  
44.                        $(this).text("教务")  
45.                     }else if($(this).text()=='2'){  
46.                        $(this).text("机构")  
47.                     }else if($(this).text()=='3'){  
48.                        $(this).text("财务")  
49.                     }else if($(this).text()=='4'){  
50.                        $(this).text("业务")  
51.                     }  
52.             })  
53.   
54.             console.log(res);  
55.           
56.             //得到当前页码  
57.             console.log(page);   
58.             //console.log(limit);   
59.             //得到数据总量  
60.             console.log(count);  
61.    }         
62. });  
63.     
64.   //监听表格复选框选择  
65.   table.on('checkbox(demo)', function(obj){  
66.     console.log(obj)  
67.   });  
68.   //监听工具条  
69.   table.on('tool(demo)', function(obj){  
70.     var data = obj.data;  
71.     if(obj.event === 'detail'){  
72.       layer.msg('ID：'+ data.id + ' ,姓名:'+ data.nickname );  
73.     } else if(obj.event === 'del'){  
74.              layer.confirm('真的删除行么', function(index){  
75.                     obj.del();  
76.                     id= data.id;  
77.                     datatablename="manage";  
78.                     layer.close(index);  
79.                          $.ajax({  
80.                                 url:'{:url('main/del')}',  
81.                                 type:"post",  
82.                                 data:{id:id,datatablename:datatablename},  
83.                                 async:true,  
84.                                 success:function(data){  
85.                                      if(data[0]==1){  
86.                                         layer.msg('成功！');  
87.                                         table.reload('idTest');//重新加载表格数据  
88.                                     }else{  
89.                                         layer.msg('失败！'+data[1]);   
90.                                     }  
91.                                 },  
92.                                 error:function(){  
93.                                   layer.msg('页面跳转失败！');  
94.                                 }  
95.                         });  
96.               });  
97.     } else if(obj.event === 'edit'){  
98.         //修改  
99.       //layer.alert(JSON.stringify(data.id))  
100.             layer.ready(function(){   
101.                   layer.open({  
102.                     type: 2,  
103.                     title: '修改',  
104.                     maxmin: true,  
105.                     area: ['750px', '600px'],  
106.                     content: '{:url('main/edituser')}?id='+data.id,  
107.                     cancel: function(){ //刷新网页  
108.                         table.reload('idTest');//重新加载表格数据  
109.                       }  
110.                   });  
111.             });  
112.     }  
113.   });  
114.   
115.   var $ = layui.$, active = {  
116.   
117.     delAll: function(){ //批量删除  
118.       var checkStatus = table.checkStatus('idTest')  
119.       var dataall='';  
120.       data = checkStatus.data;  
121.       //循环把所有要删除的ID整成12,13,545  
122.       for(var i=0;i<checkStatus.data.length;i++){  
123.              dataall += data[i].id+",";  
124.         }  
125.         dataall=dataall.substring(0,dataall.length-1)  
126.          //layer.alert(dataall);  
127.              layer.confirm('真的删除行么', function(index){  
128.                     //obj.del();  
129.                     //id= data.id;  
130.                     datatablename="manage";  
131.                     layer.close(index);  
132.                          $.ajax({  
133.                                 url:'{:url('main/del')}',  
134.                                 type:"post",  
135.                                 data:{id:dataall,datatablename:datatablename},  
136.                                 async:true,  
137.                                 success:function(data){  
138.                                      if(data[0]==1){  
139.                                         layer.msg('成功！');  
140.                                         table.reload('idTest');//重新加载表格数据  
141.                                     }else{  
142.                                         layer.msg('失败！'+data[1]);   
143.                                     }  
144.                                 },  
145.                                 error:function(){  
146.                                   layer.msg('页面跳转失败！');  
147.                                 }  
148.                         });  
149.               });  
150.        
151.     }  
152.     ,getCheckLength: function(){ //获取选中数目  
153.       var checkStatus = table.checkStatus('idTest')  
154.       ,data = checkStatus.data;  
155.       layer.msg('选中了：'+ data.length + ' 个');  
156.     }  
157.     ,isAll: function(){ //验证是否全选  
158.       var checkStatus = table.checkStatus('idTest');  
159.       layer.msg(checkStatus.isAll ? '全选': '未全选')  
160.     },  
161.     //搜索  
162.         reload: function(){  
163.           var demoReload = $('#input-search').val();  
164.           table.reload('idTest', {  
165.             where: {  
166.                  sotype: $("#searchtype").val()  
167.                 ,type: $('#searchselect').val()  
168.                 ,key: $('#input-search').val()  
169.             }  
170.           });  
171.         }  
172.   };  
173.     
174.   $('.demoTable .layui-btn').on('click', function(){  
175.     var type = $(this).data('type');  
176.     active[type] ? active[type].call(this) : '';  
177.   });  
178.     
179. });  
180. </script>  

版权声明：本文为博主原创文章，未经博主允许不得转载。