Layui的插件xmSelect的自定义工具栏的使用方法

官方文档：https://gitee.com/maplemei/xm-select

官方的按钮式：

layui.use('xmSelect', function(xmSelect){
        var toolFun = function(res, item){
            console.log(res);
            let result = [];
            layui.each(data, function(i,t){
                if (item.id == 0 || t.area_id == item.id) {
                    result.push(t);
                }
            });
            xmSelect.batch('#inviteCodeDiv', 'update', {
                data: result,
            }); 
        };
        let toolList = [{
            name: '全部',
            method: function(res){
                toolFun(res, {id:0});
            }
        }];
        layui.each(areasdata, function(index,item){
            toolList.push({
                name: item.name,
                method: function(res){
                    toolFun(res, item);
                }
            });
        });
        var inviteCodeSelect = xmSelect.render({
            el: '#inviteCodeDiv',
            height: '100%',
            size: 'small',
            paging: true,
            filterable: true,
            max: mulit,
            toolbar: {
                show: true,
                showIcon: false,
                list: toolList
            },
            model: {
                type: 'relative', //默认 absolute
            },
            language: 'zn',
            data: data
        });
        $('[data-button-ok]').on('click', function () {
            let values = inviteCodeSelect.getValue();
            console.log(values);
            let data = [];
            layui.each(values, function(index,item){
                data.push(item.value);
            });
            top.setInviteCodeSelectValue(data);
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });
    });

自定义搜索栏：

{extend name="full"}

{block name="content"}
<div class="iframe-pagination">
    <div class="layui-form layui-form-pane form-search" onsubmit="return false">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">所属地区</label>
            <div class="layui-input-inline" style="z-index: 1000;">
                <select class="layui-select" name="area_id">
                    <option value="">-- 全部地区 --</option>
                    {foreach $areas as $area}
                    <option value="{$area.id}">{$area.name|default=''}</option>
                    {/foreach}
                </select>
            </div>
        </div>
    
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">邀请码</label>
            <label class="layui-input-inline">
                <input class="layui-input" name="code" placeholder="请输入邀请码" value="">
            </label>
        </div>
    
        <div class="layui-form-item layui-inline">
            <button class="layui-btn layui-btn-primary" type="button" data-button-search><i class="layui-icon">&#xe615;</i> 搜 索</button>
        </div>
    </div>
    <div id="inviteCodeDiv"></div>
    <div class="layui-form-item text-center padding-right-20 margin-top-25">
        <button class="layui-btn" data-button-ok type='button'>确定选择</button>
    </div>
</div>
{/block}

{block name='script'}
<label class="layui-hide">
    <textarea id="DefaultData">{$data|raw|json_encode}</textarea>
    <textarea id="areasData">{$areas|raw|json_encode}</textarea>
</label>
<script>
    var data = JSON.parse($('#DefaultData').val() || '[]');
    var areasdata = JSON.parse($('#areasData').val() || '[]');
    var mulit = "{$mulit|default=0}";
    layui.use('xmSelect', function(xmSelect){
        var inviteCodeSelect = xmSelect.render({
            el: '#inviteCodeDiv',
            height: '100%',
            size: 'small',
            paging: true,
            filterable: true,
            max: mulit,
            model: {
                type: 'relative', //默认 absolute
            },
            language: 'zn',
            data: data,
            template({ item, sels, name, value }){
                return item.name  + '<span style="position: absolute; right: 10px; color: #8799a3">'+item.area_name+'</span>' 
            }
        });
        $('[data-button-ok]').on('click', function () {
            let values = inviteCodeSelect.getValue();
            console.log(values);
            let data = [];
            layui.each(values, function(index,item){
                data.push(item.value);
            });
            top.setInviteCodeSelectValue(data);
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });
        // 自定义搜索
        $('[data-button-search]').on('click', function () {
            let area_id = $('[name="area_id"] option:selected').val();
            let code = $('[name="code"]').val();
            let result = [];
            if (area_id == '' && code == '') {
                result = data;
            } else {
                layui.each(data, function(i,t){
                    console.log(area_id != '', code != '', t.area_id == area_id, code == t.name, code , t.name);
                    if (area_id != '' && code != '') {
                        if (t.area_id == area_id && code == t.name) {
                            result.push(t);
                        }
                    } else {
                        if (area_id != '' && t.area_id == area_id) {
                            result.push(t);
                        }
                        if (code != '' && code == t.name) {
                            result.push(t);
                        }
                    }
                });
            }
            
            xmSelect.batch('#inviteCodeDiv', 'update', {
                data: result,
            }); 
        });
    });
    
</script>
{/block}

写的不是很详细。。。凑合看吧