layui select 多选
先上效果图1. 引入需要的 js,css 文件。<link rel="stylesheet" href="/layui/css/layui.css" media="all"/><link rel="stylesheet" href="/layui/formSelects-v4.css"/><script src="/layui/layui.js"></sc
·
先上效果图
1. 引入需要的 js,css 文件。
<link rel="stylesheet" href="/layui/css/layui.css" media="all"/>
<link rel="stylesheet" href="/layui/formSelects-v4.css"/>
<script src="/layui/layui.js"></script>
<script src="/layui/layui.all.js"></script>
<script src="/layui/formSelects-v4.js"></script>
下载地址https://gitcode.net/mirrors/hnzzmsf/layui-formSelects/-/tree/master/dist
2. 页面元素及其属性。
<div class="layui-form-item">
<div class="layui-input-inline layui-form" style="white-space:nowrap;width: 360px;">
<select id="categoryId" name="categoryId" class="layui-input" placeholder="商品分类"
xm-select="select1" xm-select-show-count="3" xm-select-search=""></select>
</div>
</div>
属性名 | 说明 | 示例 |
---|---|---|
xm-select | 多选核心, 标记不同的多选, 多选ID | xm-select="id" |
xm-select-max | 多选最多选择数量 | xm-select-max="3" |
xm-select-skin | 皮肤 | xm-select-skin=" default | primary | normal | warm | danger " |
xm-select-search | 本地搜索 & 远程搜索 | xm-select-search, xm-select-search="/search", 值为空时已有条目过滤搜索, 有值时开启远程搜索 |
xm-select-create | 条目不存在时创建, 标记性属性 | xm-select-create |
xm-select-direction | 下拉方向 | xm-select-direction="auto|up|down", 自动, 上, 下, 默认自动模式 |
xm-select-radio | 单选模式 | xm-select-radio, 最多只能选择一个 |
xm-select-search-type | 搜索框的显示位置 | xm-select-search-type="title" 在下拉选title部分显示, xm-select-search-type="dl" 在选项的第二条显示 |
xm-select-show-count | 多选显示的label数量 | xm-select-show-count="2", 超出后隐藏 |
xm-select-search | 搜索 | xm-select-search="" |
3. 初始化。
var formSelects = layui.formSelects;
//全局定义一次, 加载formSelects
layui.config({
base: '../src/' //此处路径请自行处理, 可以使用绝对路径
}).extend({
formSelects: 'formSelects-v4'
});
// 获取数据并且铺数据 -- 商品分类列表
CoreUtil.sendAjax("/api/bus-material-category/getAllList", {}, function (res) {
if (res.data != null) {
var data = res.data;
var keys = [];
//通过循环遍历将数据赋值到temp这个二维数组中
for (var i = 0; i < data.length; i++) {
var temp = {
"name": res.data[i].name,
"value": res.data[i].id//这里需要注意,value应该不同
}
keys.push(temp)
}
//formSelect需要的arr是[{"name":"shuju1","value":"shuju2"},{....}]这样的格式
formSelects.data("select1", "local", {
arr: keys
});
//form.render('select');
}
}, "POST", false, function (res) {
});
layui.use(['table', 'laypage', 'layer', 'laydate', 'formSelects'], function () {
});
4. 获取选中的数据。
formSelects.value('select1'); // [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]
formSelects.value('select1', 'all'); // [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]
formSelects.value('select1', 'val'); // ["2","4"]
formSelects.value('select1', 'valStr'); // 2,4
formSelects.value('select1', 'name'); // ["上海","深圳"]
formSelects.value('select1', 'nameStr');// 上海,深圳
5. 设置select的选中值。
formSelects.value('select1', [2, 4]); // 选中value为2和4的option → 上海,深圳
6. 追加或删除select的选中值。
formSelects.value('select1', [2, 4], true); // 追加value为2和4的option, 如果该值已选中则跳过, 该值未选中则选中
formSelects.value('select1', [2, 4], false);// 删除value为2和4的option, 如果该值没有选中则跳过, 该值被选中则取消选中
7. 监听select的选中与取消。
/**
* 1.监听select的选中与取消
*
* formSelects.on(ID, Function);
*
* @param ID xm-select的值
* @param Function 自定义处理方法
* @param isEnd 是否获取实时数据, true/false
*/
var formSelects = layui.formSelects;
formSelects.on('select1', function(id, vals, val, isAdd, isDisabled){
//id: 点击select的id
//vals: 当前select已选中的值
//val: 当前select点击的值
//isAdd: 当前操作选中or取消
//isDisabled: 当前选项是否是disabled
//如果return false, 那么将取消本次操作
return false;
});
//以下两种方式则配置所有的多选select
formSelects.on(function(id, vals, val, isAdd, isDisabled){
...
});
formSelects.on(null, function(id, vals, val, isAdd, isDisabled){
...
});
//4.0.0.0813版本之前, 受到了颇多的小伙伴吐槽, 此版本加上了获取实时数据的方法
formSelects.on('select1', function(id, vals, val, isAdd, isDisabled){
//id: 点击select的id
//vals: 当前select已选中的值
//val: 当前select点击的值
//isAdd: 当前操作选中or取消
//isDisabled: 当前选项是否是disabled
}, true);
8. 禁用多选。
/**
* 1.禁用多选
* formSelects.disabled(ID);
* @param ID xm-select的值
*/
var formSelects = layui.formSelects;
formSelects.disabled('select1');
//以下方式则禁用所有的已存在多选
formSelects.disabled();
/**
* 1.启用多选, 启用被禁用的多选
*
* formSelects.undisabled(ID);
*
* @param ID xm-select的值
*/
var formSelects = layui.formSelects;
formSelects.undisabled('select1');
//以下方式则启用所有的已存在多选
formSelects.undisabled();
9. sql
categoryIds = '2,4,11,23'
<if test="categoryIds != null and categoryIds != ''">
and b.category_id in
<foreach item="item" index="index" collection="categoryIds.split(',')" open="(" separator="," close=")">
#{item}
</foreach>
</if>
更多推荐
已为社区贡献1条内容
所有评论(0)