layui中的table中toolbar自定義過程

本身挖過的坑須要本身來填。

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');
            }
        });
    }
});