layui中的table中toolbar自定義過程

 

layui開發常用插件列表

1. 強大的彈窗表格搜索插件

2.treeTable組件

3.下拉列表、下拉樹組件

4.layui圖片管理組件

 

---

 

自己挖過的坑需要自己來填。

layui的table默認表頭工具欄右邊有3個操作，分別是過濾字段、導出excel、打印功能。

 

在js中代碼添加toolbar即可實現上面的效果：

 table.render({
    elem: '#demo'
    ,height: 420
    ,url: '/demo/table/user/' //數據接口
    ,title: '用戶表'
    ,page: true //開啟分頁
    ,toolbar: 'default' //開啟工具欄，此處顯示默認圖標，可以自定義模板，詳見文檔
    ,totalRow: true //開啟合計行
    ,cols: [[ //這里省略  ]]
  });

如果在分頁的情況下，這里默認導出的是當前頁篩選后的結果。我們其實需要從后台返回數據提供給這個組件。

經過一番查找后，終於發現修改的思路，這里需要更新到官方2.5.5版本的layui。

然后在官方的文檔里面看到如下的內容：

注意這部分內容在文檔的中間部分，但是右邊的目錄上是沒有的，之前把右邊的目錄點了遍也沒發現。

整段的內容全部放在一個頁面上，右邊的錨點也不全，這種文檔讀起來真費事。

 

下面說下怎么改：

原來在table里面渲染的 toolbar: 'default' 可以自己修改為自定義的圖標和事件。

由於我既定義了自己的頭部工具條在左邊，又修改了默認的右邊的工具條，所以就成了下面這樣。

,defaultToolbar: ['filter','print',{title:'提示',layEvent: 'LAYTABLE_EXCEL',icon: 'layui-icon-table'}] //這里在右邊顯示 
,toolbar: '#tblToolBar'   //這里在左邊顯示，然后指定到模版id

顯示如下：

 如果只需要左邊自定義的按鈕，右邊的不需要展示，那么只需要把defaultToolbar留空即可，注意不能刪除defaultToolbar這行。如下：

,defaultToolbar: [] //這里在右邊顯示 
,toolbar: '#tblToolBar'   //這里在左邊顯示，然后指定到模版id

 

接下來，指定事件觸發, 然后通過ajax查詢后台，把結果賦值給data，然后通過table.exportFile('table的id', data)即可導出數據。

//監聽頭工具欄
table.on('toolbar(lay-tableList)', function(obj){
    if(obj.event === 'refresh'){
        reloadTable();
    }
    else if(obj.event === 'LAYTABLE_EXCEL'){
        var formSelect = form.val('searchForm');
        $.ajax({
            type: 'get'
            ,url: ctx + '/inventoryReport/getInventoryHistoryList'
            ,data: formSelect
            ,success:function(res){
                table.exportFile('tableList', res.data,'xls');
            }
        });
    }
});