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
