layui 集合 xm-select 、tableSelect、cascader级联选择器

layui 官方镜像站

http://layui-doc.pearadmin.com/

layui 免费CDN静态库

https://www.layuicdn.com/#Layui

基于layui xm-select 多选

https://maplemei.gitee.io/xm-select/#/senior/getValue

   <div class="layui-form-item  layui-row layui-col-xs12">
                    <label class="layui-form-label required">选择店铺</label>
                    <!-- <div class="layui-input-block">
                        <select name="storeId" id="storeId" lay-filter="storeId">
                            
                        </select>
                    </div> -->
                    <div class="layui-input-block" id="dataTypes">
               
                    </div>
                    <div class="layui-form-mid layui-word-aux" style="color: red;">选择参与此套餐的店铺</div>
                </div>

 <script src="__STATIC__/plugs/lay-v2.5.6/lay/modules/xm-select.js"></script>
 $.ajax({
                url:"{:url('marketing.package/getStoreCate')}",
                dataType: 'json',
                data :JSON.stringify(params),
                contentType: "application/json",  
                type: 'post',
                success: function (data) {
                    // var html='';
                    // html+='<option value="" >请选择</option>'
                    // data.data.forEach(function(item,index){
                            
                    //         html+='<option value="'+item.store_id+'" >'+item.store_name+'</option>'
                    // })
                    // $("#storeId").append(html);
                    // form.render();
                    dataTypes = xmSelect.render({
                        el: '#dataTypes', 
                        toolbar: {
                            show: true,//是否展示工具条
                        },
                        autoRow: true,
                        filterable: true,
                        height: 'auto',
                        name: 'store',
                        prop: {
                            name: 'store_name',
                            value: 'store_id',
                        },
                        on:function(data){
                           
                        },
                        data(){
                            return data.data//返回数据遵循官网指定结构
                        }
                    })	
                }
        });

lay_cascader 级联选择器

https://gitee.com/yixiacoco/lay_cascader

使用示例：

    <div class="layui-tab-item ">
                <div class="layui-form-item">
                    <label class="layui-form-label">服务项目</label>
                    <div class="layui-input-block">
                        <input type="text" id="demo1" class="layui-input" readonly="readonly" name="server">
                    </div>
                </div>

<link rel="stylesheet" type="text/css" href="__STATIC__/plugs/lay_cascader/cascader/cascader.css"/>
<script src="__STATIC__/plugs/lay_cascader/cascader/cascader.js"></script>

 $.ajax({
            url: "/admin/platform.category/getCate",
            type: 'get',
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            dataType: "json",
            timeout: 60000,
            success: function (res) {
       
                layui.use('layCascader', function () {
                    var layCascader = layui.layCascader;
                    layCascader({
                    elem: '#demo1',
                    clearable:true,
                    props:{
                        multiple: true,
                    },
                    options: res.data,
                    // event:store(),
                    
                    });
                });
                
            },
            error: function (xhr, textstatus, thrown) {
              
                return false;
            }
    });

LayUi组件：TableSelect

https://gitee.com/lolicode/layui_component_tableselect