layui自定义工具栏的方法

下面是layui自定义工具栏的完整攻略：

1. 确定工具栏配置

首先需要确定自定义工具栏的配置项，例如：需要添加什么按钮、需要设置按钮绑定的事件等。

在layui中，工具栏的配置项可以通过form.render()方法进行设置，其中form是layui的一个内置模块，用于处理表单数据和各种表单元素的渲染等操作。

具体的实现方法如下：

layui.use(['form'], function () {
    var form = layui.form;
    form.render({
        elem : '#test-form',
        toolbar: [
            {
                title: '自定义按钮1', 
                layEvent: 'customEvent1', 
                icon: 'layui-icon-face-smile'
            },
            {
                title: '自定义按钮2', 
                layEvent: 'customEvent2', 
                icon: 'layui-icon-face-cry'
            }
        ]
    });
});

上述代码中使用了layui的form模块，并定义了一个test-form表单，然后通过form.render()方法设置了工具栏，其中定义了两个按钮，分别绑定了customEvent1和customEvent2两个事件。

2. 监听工具栏按钮事件

一旦工具栏配置完成，就需要监听工具栏按钮的事件，以便在点击按钮时触发对应的操作。

在layui中，监听工具栏按钮事件可以通过以下代码实现：

layui.use(['table'], function () {
    var table = layui.table;
    // 监听工具栏按钮事件
    table.on('toolbar(test-table)', function (obj) {
        var data = obj.data;
        switch (obj.event) {
            case 'customEvent1':
                // 执行自定义按钮1的操作
                console.log('执行自定义按钮1的操作');
                break;
            case 'customEvent2':
                // 执行自定义按钮2的操作
                console.log('执行自定义按钮2的操作');
                break;
        };
    });
});

上述代码中使用了layui的table模块，并通过table.on()方法监听了test-table表格的工具栏事件，然后在switch语句中根据不同的事件类型执行对应的操作。

示例说明

示例1：自定义按钮提示信息

下面是一个示例，点击自定义按钮1后提示“Hello, world！”：

layui.use(['table', 'form', 'layer'], function () {
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;

    table.render({
        elem: '#test-table',
        url: '/api/data',
        toolbar: [
            {
                title: '自定义按钮1',
                layEvent: 'customEvent1',
                icon: 'layui-icon-face-smile'
            }
        ]
        // 省略其他配置
    });

    // 监听工具栏按钮事件
    table.on('toolbar(test-table)', function (obj) {
        switch (obj.event) {
            case 'customEvent1':
                layer.msg('Hello, world！');
                break;
        }
    });
});

示例2：自定义按钮实现全选

下面是另一个示例，点击自定义按钮2后实现表格的全选：

layui.use(['table', 'form', 'layer'], function () {
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;

    table.render({
        elem: '#test-table',
        url: '/api/data',
        toolbar: [
            {
                title: '自定义按钮2',
                layEvent: 'customEvent2',
                icon: 'layui-icon-face-cry'
            }
        ]
        // 省略其他配置
    });

    // 监听工具栏按钮事件
    table.on('toolbar(test-table)', function (obj) {
        var checkStatus = table.checkStatus('test-table');
        switch (obj.event) {
            case 'customEvent2':
                if (checkStatus.data.length > 0) {
                    table.reload('test-table', { page: { curr: 1 } });
                    layer.msg('全选成功！');
                } else {
                    layer.msg('没有数据可供全选！');
                }
                break;
        }
    });
});

在示例中，表格渲染后点击自定义按钮2时，通过table.checkStatus()方法获取选中的数据，然后判断是否有选中的数据，如果有则通过table.reload()方法重新加载数据并跳转到第一页，最后提示“全选成功！”，否则提示“没有数据可供全选！”