layui table in the process of custom toolbar

Own pit dug to fill their own needs.

The default table to the right of the Toolbar layui header has three operations, namely filter field, deriving excel, print function.

Js code is added to the toolbar to achieve the above results:

table.render ({ 
    elem: '#demo' 
    , height: 420. 
    , URL: '/ Demo / Table / User /' // Data Interface 
    , title: 'user table' 
    , Page: to true  // open tabs 
   , toolbar: ' default ' // open the toolbar, the default icon is displayed here, you can customize the template, see the document 
    , totalRows: to true  // turn on total lines 
    , cols: [[ // omitted here]] 
  });

If in the case of paging, here it is the result of the default export the current page screening. In fact, we need to return data from the background to provide this component.

After some search, finally found modify ideas, here need to update to official 2.5.5 version of layui.

Then you see the following content inside the official document:

Note that this part of the middle section of the document, but the right is not on the directory and the directory before over the right of the point did not find.

The whole content all on one page, anchor the right not all, really bother to read this document.

下面说下怎么改：

原来在table里面渲染的 toolbar: 'default' 可以自己修改为自定义的图标和事件。

由于我既定义了自己的头部工具条在左边，又修改了默认的右边的工具条，所以就成了下面这样。

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

显示如下：

如果只需要左边自定义的按钮，右边的不需要展示，那么只需要把defaultToolbar留空即可，注意不能删除defaultToolbar这行。如下：

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

接下来，指定事件触发：

//监听头工具栏
table.on('toolbar(lay-tableList)', function(obj){
    if(obj.event === 'refresh'){
        reloadTable();
    }
    else if(obj.event === 'LAYTABLE_EXCEL'){
        console.log('excel export');
    }
});

事件触发正常。

接下来，就是通过ajax查询后台，把结果赋值给data，然后通过table.exportFile('table的id', data)即可导出数据。

layui table in the process of custom toolbar

Guess you like