layui教程---table

 layui.config({
        base: "${ctx}/static/js/"
    }).use(['form', 'layer', 'jquery', 'common','element', 'table', 'laytpl'], function () {
        $ = layui.$;
        var $ = layui.$,
            form = layui.form,
            common = layui.common,
            laydate = layui.laydate,
            element = layui.element,
            table = layui.table,
            laytpl = layui.laytpl,
            layer = layui.layer;
        var content = 'content';
        common.getOptionsByCode('PLATE', 'identifyVehicleColorId','','車牌顏色');
         var loading = layer.load(1, {shade: [0.9, '#fff']});

        /**重置*/
        $("#rev-btn").click(function () {
            $("input").val('');
            $('select').each(function (i, j) {
                $(j).find("option:selected").attr("selected", false);
                $(j).find("option").first().attr("selected", true);
                form.render('select')
            })
        });
        /**用戶表格加載*/
        table.render({
            elem: '#tableList',
            url: '${ctx}/vehicleFlow/flowQry.do',
            id: 'userTableId',
            method: 'post',
            height: 'full-140',
            skin: 'row,line',
            size: 'sm',
            defaultToolbar: [],
            cols: [[
                {field:'index', title: '序號',align:'center',width: '4%',type:'numbers'},
                {field:'passId', title: '通行標識ID',align:'center',width: '12%'},
                {field:'carNoColor', title: '車牌號（顏色）', align: 'center',width: '10%' },
                {field:'enStation', title: '入口站', align: 'center',width: '10%' },
                {field:'exStation', title: '出口站', align: 'center',width: '10%' },
                {field:'enStationTime', title: '入口時間', align: 'center',width: '15%' },
                {field:'exStationTime', title: '出口時間', align: 'center',width: '15%' },
                {field:'passSectionsNum', title: '經過路段數', align: 'center',width: '6%' },
                {field:'chargeAmount', title: '收費金額', align: 'center',width: '8%' },
                {field: 'operate', title: '操作', align: 'center', width: '12%' ,toolbar:'#optBar'  }

            ]],
            page: true,
            done: function (res, curr, count) {
                common.resizeGrid();
                common.addEventOnBody();
                layer.close(loading);
            }
        });

        /**查詢*/
        $(".search-button").click(function () {
            var loading = layer.load(1, {shade: [0.9, '#fff']});
            //監聽提交
            form.on('submit(searchFilter)', function (data) {
                table.reload('userTableId', {
                    where: data.field,
                    height: 'full-140',
                    page: true,
                    done: function (res, curr, count) {
                        common.resizeGrid();
                        layer.close(loading);
                    }
                });
                return false;
            });
        });


<!--工具條 -->
<script type="text/html" id="optBar">
    <a class="layui-btn layui-btn-xs opt-item" lay-event="tool_opt" >查看詳情</a>
</script>

toolbar - 綁定工具條模板

table.render({
  cols: [[
    {field:'id', title:'ID', width:100}
    ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //這里的toolbar值是模板元素的選擇器
  ]]
});
 
等價於：
<th lay-data="{field:'id', width:100}">ID</th>
<th lay-data="{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}"></th>

下述是 toolbar 對應的模板，它可以存放在頁面的任意位置：

    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
      <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
      
      <!-- 這里同樣支持 laytpl 語法，如： -->
      {{#  if(d.auth > 2){ }}
        <a class="layui-btn layui-btn-xs" lay-event="check">審核</a>
      {{#  } }}
    </script>
     
    注意：屬性 lay-event="" 是模板的關鍵所在，值可隨意定義。
          

接下來我們可以借助 table模塊的工具條事件，完成不同的操作功能：

    //監聽工具條 
    table.on('tool(test)', function(obj){ //注：tool 是工具條事件名，test 是 table 原始容器的屬性 lay-filter="對應的值"
      var data = obj.data; //獲得當前行數據
      var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 參數對應的值）
      var tr = obj.tr; //獲得當前行 tr 的 DOM 對象（如果有的話）
     
      if(layEvent === 'detail'){ //查看
        //do somehing
      } else if(layEvent === 'del'){ //刪除
        layer.confirm('真的刪除行么', function(index){
          obj.del(); //刪除對應行（tr）的DOM結構，並更新緩存
          layer.close(index);
          //向服務端發送刪除指令
        });
      } else if(layEvent === 'edit'){ //編輯
        //do something
        
        //同步更新緩存對應的值
        obj.update({
          username: '123'
          ,title: 'xxx'
        });
      } else if(layEvent === 'LAYTABLE_TIPS'){
        layer.alert('Hi，頭部工具欄擴展的右側圖標。');
      }
    });
          

done - 數據渲染完的回調

無論是異步請求數據，還是直接賦值數據，都會觸發該回調。你可以利用該回調做一些表格以外元素的渲染。

    table.render({ //其它參數在此省略
      done: function(res, curr, count){
        //如果是異步請求數據方式，res即為你接口返回的信息。
        //如果是直接賦值的方式，res即為：{data: [], count: 99} data為當前頁數據、count為數據總長度
        console.log(res);
        
        //得到當前頁碼
        console.log(curr); 
        
        //得到數據總量
        console.log(count);
      }
    });
          

表格重載

很多時候，你需要對表格進行重載。比如數據全局搜索。以下方法可以幫你輕松實現這類需求（可任選一種）。

 

 

 示例1：自動化渲染的重載

table.reload('idTest', {
  url: '/api/table/search'
  ,where: {} //設定異步數據接口的額外參數
  //,height: 300
});
      

示例2：方法級渲染的重載

    //所獲得的 tableIns 即為當前容器的實例
    var tableIns = table.render({
      elem: '#id'
      ,cols: [] //設置表頭
      ,url: '/api/data' //設置異步接口
      ,id: 'idTest'
    }); 
     
    //這里以搜索為例
    tableIns.reload({
      where: { //設定異步數據接口的額外參數，任意設
        aaaaaa: 'xxx'
        ,bbb: 'yyy'
        //…
      }
      ,page: {
        curr: 1 //重新從第 1 頁開始
      }
    });
    //上述方法等價於
    table.reload('idTest', {
      where: { //設定異步數據接口的額外參數，任意設
        aaaaaa: 'xxx'
        ,bbb: 'yyy'
        //…
      }
      ,page: {
        curr: 1 //重新從第 1 頁開始
      }
    }); //只重載數據
          

//監聽行單擊事件（雙擊事件為：rowDouble）
  table.on('row(test)', function(obj){
    var data = obj.data;
    
    layer.alert(JSON.stringify(data), {
      title: '當前行數據：'
    });
    
    //標注選中樣式
    obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
  });
  

 

參考layui：https://www.layui.com/doc/modules/table.html#onrowtool

                https://www.layui.com/demo/table/onrow.html