layui 完整使用 element,table,laytpl 全覆盖

最新推荐文章于 2023-08-23 23:08:09 发布
Lv_Bin_001
最新推荐文章于 2023-08-23 23:08:09 发布
阅读量2.1k
点赞数
CC 4.0 BY-SA版权
文章标签： layui jquery
本文链接：https://blog.youkuaiyun.com/Lv_Bin_001/article/details/88085652
本文详细介绍使用layui框架进行表格渲染、操作与事件监听的方法。包括如何设置表格请求方式避免缓存问题，自定义工具栏按钮及状态显示，以及如何通过监听工具栏事件实现如编辑、删除、上报等功能。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
直接上代码
切记：layer 的table.render 加载table的时候默认请求类型为get；最好强制为post ；加上 method:'post';
否则360兼容模式和ie浏览器下或出现请求304，从浏览器缓存中获取数据，而非服务端实时数据
  
  <script src="/system/actionplan/layuiadmin/layui/layui.js"></script> 
  <!--主表操作  -->
  <!-- wbstatue 上报状态   wbauditstatue 审核状态 -->
   <script type="text/html" id="toolbaroperate">
                       {{# if(d.wbstatue == 0) {  }}
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
                     <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del">删除</a>
                     <a class="layui-btn layui-btn-primary layui-btn-xs"   lay-event="submitdata" data-type="test7" >上报</a>
                       {{# }}}  
                      {{# if(d.wbauditstatue == 0 && d.wbstatue == 1){ }} 
                     <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="agree" data-type="test7" >同意</a>
                     <a class="layui-btn layui-btn-primary layui-btn-xs"  lay-event="disagree" data-type="test7" >驳回</a>
                      {{# }}}
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="view">查看</a>
   </script> 
   <script type="text/html" id="tablestatusinfo">
    {{# if(d.wbstatue == 0){ }}
     <a class="">未上报</a>

    {{# }}}
    {{# if(d.wbstatue == 1) {}}
     <a class="">已上报</a>
    {{# }}}
   
    {{# if(d.wbauditstatue == 0) {}}
     <a class="">未审核</a>
    {{# }}}
     {{# if(d.wbauditstatue == 1) {}}
    <a class="">审核通过</a>
    {{# }}}
     {{# if(d.wbauditstatue == 2) {}}
     <a class="">被驳回</a>
    {{# }}}
   </script>
   <!--子表操作  -->
    <script type="text/html" id="item-table-operate-bar">   
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="view1">查看</a>
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
                     <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del">删除</a> 
    </script>
      <script type="text/html" id="itemaddbutton">
                      {{# if(d.wbstatue == 0){ }}
                           <div style="margin-bottom: 10px;"><button class="layui-btn layui-btn-sm layui-btn-primary " onclick="additem()">新增活动</button></div>
                     {{# }}}
      </script>
    <script type="text/html" id="item-table-statusinfo">
   </script>
  <script type="text/javascript">
  var issubmit = 0;  // 0 全部   1 已上报  2已上报  
  var wbmonthplanid = 0;
  var alltable = null;
  var notable = null;
  var istable = null;
  var itemtable = null;
  var allexist= $("li[lay-id='allitem']");
  var isdealexist =  $("li[lay-id='isitem']");
  layui.config({
    base: '/system/actionplan/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table','element','jquery','laytpl'], function(){
    var table = layui.table
    ,admin = layui.admin;
    var element = layui.element;
    var laytpl = layui.laytpl;
    var active = {
            //加载all表
            initalltable:function(){
                 alltable = table.render({
                      elem: '#all-table-operate'
                      ,url: layui.setter.base + 'json/table/'    //数据请求地址  json 格式封装
                      ,request:{
                           pageName: 'pageNum' //页码的参数名称，默认：page
                          ,limitName: 'limitNum' //每页数据量的参数名，默认：limit
                         }
                        ,where:{'itemtype':0,issubmit:issubmit}
                       ,cols: [[
                        {type:'checkbox'}
                        ,{field:'wbmonthplanid', width:80, title: 'ID', sort: true, }
                        ,{field:'wbplantopic',width:180, title: '计划标题'}
                        ,{field:'wbplandate', width:180, title: '计划月份'}
                        ,{field:'createdate', width:180, title: '创建时间'}
                        ,{field:'deptcodename', width:160, title: '申报部门'}
                        ,{field:'wbstateinfo', width:160, title: '状态',templet:'#tablestatusinfo'}
                        ,{field:'tool', width:320, title: '操作', templet: '#toolbaroperate'}
                      ]]
                      ,page: true
                    });
            }
           ,initnotable:function(){
                notable = table.render({
                      elem: '#nodeal-table-operate'
                      ,url: layui.setter.base + 'json/table/'    //数据请求地址  json 格式封装
                      ,request:{
                           pageName: 'pageNum' //页码的参数名称，默认：page
                          ,limitName: 'limitNum' //每页数据量的参数名，默认：limit
                         }
                        ,where:{'itemtype':1,issubmit:issubmit}
                       ,cols: [[
                        {type:'checkbox'}
                        ,{field:'wbmonthplanid', width:80, title: 'ID', sort: true, }
                        ,{field:'wbplantopic',width:180, title: '计划标题'}
                        ,{field:'wbplandate', width:180, title: '计划月份'}
                        ,{field:'createdate', width:180, title: '创建时间'}
                        ,{field:'deptcodename', width:160, title: '申报部门'}
                        ,{field:'wbstateinfo', width:160, title: '状态',templet:'#tablestatusinfo'}
                        ,{field:'tool', width:320, title: '操作', templet: '#toolbaroperate'}
                      ]]
                      ,page: true
                });
           }
           ,initistable:function(){
             istable = table.render({
                      elem: '#isdeal-table-operate'
                      ,url: layui.setter.base + 'json/table/querymonthlist.jsp'
                      ,request:{
                           pageName: 'pageNum' //页码的参数名称，默认：page
                          ,limitName: 'limitNum' //每页数据量的参数名，默认：limit
                         }
                        ,where:{'itemtype':2,issubmit:issubmit}
                       ,cols: [[
                        {type:'checkbox'}
                        ,{field:'wbmonthplanid', width:80, title: 'ID', sort: true, }
                        ,{field:'wbplantopic',width:180, title: '计划标题'}
                        ,{field:'wbplandate', width:180, title: '计划月份'}
                        ,{field:'createdate', width:180, title: '创建时间'}
                        ,{field:'deptcodename', width:160, title: '申报部门'}
                        ,{field:'wbstateinfo', width:160, title: '状态',templet:'#tablestatusinfo'}
                        ,{field:'tool', width:320, title: '操作', templet: '#toolbaroperate'}
                      ]]
                      ,page: true
                });
           }
           ,inititemtable:function(){
              itemtable = table.render({
                   elem: '#test-table-operate'
                   ,url: layui.setter.base + 'json/table/querymonthitemlist'    //数据请求地址  json 格式封装
                   ,request:{
                       pageName: 'pageNum' //页码的参数名称，默认：page
                      ,limitName: 'limitNum' //每页数据量的参数名，默认：limit
                      }
                      ,where:{'wbmonthplanid':wbmonthplanid}
                    ,cols: [[
                      {type:'checkbox'}
                     ,{field:'wbmonthitemid', width:80, title: 'ID', sort: true, }
                     ,{field:'wbitemtopic', width:260, title: '活动主题'}
                     ,{field:'zbdeptname', width:160, title: '主办单位'}
                     ,{field:'sbdengname', width:170, title: '承办单位'}
                     ,{field:'createdate', width:170, title: '创建时间'}
                     ,{field:'wbstateinfo', width: 220, title: '状态',templet:'#item-table-statusinfo'}
                     ,{field:'tool', width:280, title: '操作', templet: '#item-table-operate-bar'}
                   ]]
                   ,page: true
                 });  
           }
   }
     //监听工具条
    table.on('checkbox(test-table-operate)', function(obj){    
     var data = obj.data;
   
      
    });
    
     
  //监听toolbar
    table.on('tool(all-table-operate)', function(obj){ 
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的DOM对象    
      if(layEvent === 'view'){ //查看
        //do somehing
      } else if(layEvent === 'del'){ //删除
        layer.confirm('确认要删除吗', function(index){
          obj.del(); 
          layer.close(index);
        });
      } else if(layEvent === 'edit'){ //编辑
         
          
      }else if(layEvent == 'agree'){
          //同意
          layer.confirm('同意此活动吗', function(index){
             /*  obj.update({
                  username: '123'
                  ,title: 'xxx'
                }); */
              layer.close(index);
              //向服务端发送删除指令
            });
      }else if(layEvent == 'disagree'){
          //驳回 添加审核意见
          
      }else if(layEvent == 'submitdata'){
          //上报
          layer.confirm('确认上报总中心?', function(index){
                 obj.update({
                     wbstateinfo: '已上报'
                 }); 
               layer.close(index);
               //向服务端发送删除指令
             });
      }
    
    });
  
  
    if(allexist.length >0){
        alltable = active.initalltable();
    }
    if(isdealexist.length >0){
         active.initistable();
    }
  //监听行双击事件  刷新子表数据 rowDouble
    table.on('row(all-table-operate)', function(obj){
         var data = obj.data;
         wbmonthplanid = data.wbmonthplanid;
         //加载子表新增模板
         var getTpl = itemaddbutton.innerHTML;
         var itembuttondivview = document.getElementById('itembuttondiv');
         laytpl(getTpl).render(data, function(html){
             itembuttondivview.innerHTML = html;
            });
         if(itemtable != null){
         itemtable.reload({
               elem:'#test-table-operate'
               ,where:{'wbmonthplanid':wbmonthplanid}
                 });
         }else{
             itemtable =  active.inititemtable();
         }
    });
  
  //监听item 
    element.on('tab(component-tabs-hash)', function(data){
        var layId=$(this).attr('lay-id');
        if(layId == "allitem"){
            if( alltable != null){
                alltable.reload({
                  elem:'#all-table-operate'
                 ,where:{'itemtype':0,'issubmit':issubmit}
            });
            }else{
                //初始化table
                 alltable = active.initalltable();
            }
        }
        if(layId == "isitem"){
            if( istable != null){
              istable.reload({
                elem:'#isdeal-table-operate'
                ,where:{'itemtype':'2'}
            });
            }else{
                 istable = active.initistable();
            }
        }
        if(layId == "noitem"){
            if(notable != null){
            notable.reload({
              elem:'#nodeal-table-operate'
              ,where:{'itemtype':'1'}
                });
            }else{
                notable = active.initnotable();
            }
        }
      });
  
  
  });

 
    function unuse(){
     //layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
          //layer.close(index);
          layer.prompt({title: '拒绝原因', formType: 2}, function(text, index){
            layer.close(index);
            layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
          });
       // });
      }
  function use(){
     layer.alert('同意此活动');
      }  
    
 function add(){
   var index = layer.open({
          title: '新增月计划',
          type: 2,
          content: 'monthadd.jsp',
          area: ['600px', '400px'],
          maxmin: true
        });
        layer.full(index);
  }