您的位置: 首页  >  文章  >  layui 数据表格 根据值(1=业务，2=机构)显示中文名称

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

分类: 文章 • 2024-06-15 16:57:58

数据是用ThinkPHP5操作


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

类型是固定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. })  


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


代码：


[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>  


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

相关推荐