WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
下拉多选控件 - wui.xmSelect 更多 xmSelect 示例

模块加载名称:xmSelect

一个简单的小栗子,让您简单体验一下 xmSelect 的优美。

<div id="demo"></div>
<script type="text/javascript">
    wui.use('xmSelect', function(){
        var xmSelect = wui.xmSelect;  //xmSelect 模块加载
        var demo = xmSelect.render({
            el: '#demo',
            data: [
                {name: '张三', value: 1},
                {name: '李四', value: 2},
                {name: '王五', value: 3},
            ]
        })
    });
</script>


<div id="demo"></div>
<button class="wui-btn"id="demo-getValue">获取选中值</button>
<pre id="demo-value"></pre>

<script type="text/javascript">
    wui.use('xmSelect', function(){
        var $ = wui.$,xmSelect = wui.xmSelect;
        var demo = xmSelect.render({
            el: '#demo',
            language: 'zn',
            data: [
                {name: '张三', value: 1},
                {name: '李四', value: 2},
                {name: '王五', value: 3},
            ]
        })
        $('#demo2-getValue').click(function() {
            $('#demo2-value').html(JSON.stringify(demo2.getValue(), null, 2));
        });
    });
</script>
参数说明类型可选值默认值
el渲染对象, css选择器, dom元素string--
language语言选择stringzn / enzn
data显示的数据array-[ ]
content自定义下拉框htmlstring--
initValue初始化选中的数据, 需要在data中存在array-null
tips默认提示, 类似于placeholderstring-请选择
empty空数据提示string-暂无数据
filterable是否开启搜索booleantrue / falsefalse
searchTips搜索提示string-请选择
delay搜索延迟 msint-500
filterMethod搜索回调函数function(val, item, index, prop) val: 当前搜索值, item: 每个option选项, index: 位置数据中的下标, prop: 定义key--
filterDone搜索完成函数function(val, list) val: 当前搜索值, list: 过滤后的数据--
remoteSearch是否开启自定义搜索 (远程搜索)booleantrue / falsefalse
remoteMethod自定义搜索回调函数function(val, cb, show, pageIndex) val: 当前搜索值, cb(arr, totalPage): 回调函数, 需要回调一个数组, 结构同data, 远程分页需要第二个参数: 总页码, show: 下拉框显示状态, pageIndex: 分页下当前页码--
direction下拉方向stringauto / up / downauto
style自定义样式object-{ }
height默认最大高度string-200px
paging是否开启自定义分页booleantrue / falsefalse
pageSize分页条数int-10
pageEmptyShow分页无数据是否显示booleantrue / falsetrue
pageRemote是否开启远程分页booleantrue / falsetrue
radio是否开启单选模式booleantrue / falsefalse
repeat是否开启重复性模式booleantrue / falsefalse
clickClose是否点击选项后自动关闭下拉框booleantrue / falsefalse
prop自定义属性名称, 具体看下表object-
theme主题配置, 具体看下表object-
model模型, 多选的展示方式, 具体看下表object-
show展开下拉的回调function--
hide隐藏下拉的回调function--
template自定义渲染选项function({ item, sels, name, value })--
on监听选中变化function({ arr, change, isAdd })--
max设置多选选中上限int-0
maxMethod达到选中上限的回到function(sels, item), sels: 已选中数据, item: 当前选中的值--
name表单提交时的namestring-select
layVerify表单验证, 同layui的w-verifystring-''
layVerType表单验证, 同layui的w-verTypestring-''
toolbar工具条, 具体看下表object--
showCount展示在下拉框中的最多选项数量int-0
autoRow是否开启自动换行(选项过多时)booleantrue / falsefalse
size尺寸stringlarge / medium / small / minimedium
disabled是否禁用多选booleantrue / falsefalse
create创建条目function(val, data), val: 搜索的数据, data: 当前下拉数据-null
tree树形结构, 具体看下表object--
cascader级联结构, 具体看下表object--
参数说明类型可选值默认值
name显示名称string-name
value选中值, 当前多选唯一string-value
selected是否选中string-selected
disabled是否禁用string-disabled
children分组childrenstring-children
optgroup分组optgroupstring-optgroup

如果children属性为数组的时候开启分组模式

{name: '销售员', children: [
	{name: '李四', value: 4, selected: true},
	{name: '王五', value: 5},
]},

//可在分组上定义click属性, 来定义点击事件
{name: '选中', children: [...], click: 'SELECT'},
{name: '清空', children: [...], click: 'CLEAR'},
{name: '自动', children: [...], click: 'AUTO'},
{name: '自定义', children: [...], click: function(item){
	alert('自定义的, 想干嘛干嘛');
}},
参数说明类型可选值默认值
color主题颜色string-#009688
maxColor选中上限闪烁边框颜色string-#e54d42
hover键盘操作的背景色string-#f2f2f2

目前仅配置label即可

model: {
	//是否展示复选框或者单选框图标 show, hidden:变换背景色
	icon: 'show',
	label: {
		//使用方式
		type: 'block',
		//使用字符串拼接的方式
		text: {
			//左边拼接的字符
			left: '',
			//右边拼接的字符
			right: '',
			//中间的分隔符
			separator: ', ',
		},
		//使用方块显示
		block: {
			//最大显示数量, 0:不限制
			showCount: 0,
			//是否显示删除图标
			showIcon: true,
			//自定义渲染label, 默认渲染name, 回调参数(item, sels)
			template: null,
		},
		//自定义文字
		count: {
			//函数处理
			template(data, sels){
				//data: 所有的数据
				//sels: 选中的数据
				return `已选中 ${sels.length} 项, 共 ${data.length} 项`
			}
		},
	},
	//展示类型, 下拉框形式: absolute, 直接显示模式: relative
	type: 'absolute',
},
参数说明类型可选值默认值
show是否展示工具条booleantrue / falsefalse
showIcon是否显示工具图标booleantrue / falsetrue
list工具条数组 (默认有 全选/清空, 可以自定义), 还有 REVERSE:反选array-[ "ALL", "CLEAR" ]

自定义方式

list: [ "ALL", "CLEAR",
	{
		//显示图标, 可以是wui内置的图标, 也可以是自己引入的图标
		//传入的icon会转化为 <i class="wui-icon wui-icon-face-smile"></i>
		icon: 'wui-icon wui-icon-face-smile',
		//显示名称
		name: 'xxx',
		//点击时触发的回调
		method: function(data){
			//data 当前页面的数据

		}
	}
]
参数说明类型可选值默认值
show是否展示为树状结构booleantrue / falsefalse
showFolderIcon是否显示节点前的三角图标booleantrue / falsetrue
showLine是否显示虚线booleantrue / falsetrue
indent间距int-20
expandedKeys默认展开的节点数组, 为true时展开所有节点array / boolean-[ ]
strict是否遵循严格父子结构booleantrue / falsetrue
simple是否开启极简模式booleantrue / falsefalse
参数说明类型可选值默认值
show是否展示为级联结构booleantrue / falsefalse
indent每一级的宽度int-100
strict是否遵循严格父子结构booleantrue / falsetrue
事件名说明参数返回值
render渲染多选(options: 配置项)实例对象
get获取页面中已经渲染的多选(filter: 过滤el, single: 是否返回单实例)符合条件的实例数组
batch批量操作已渲染的多选(filter: 过滤el, method: 方法, ...方法参数)符合条件的实例数组
//render 使用方式
xmSelect.render(OPTIONS);

//get 使用方式
xmSelect.get('#demo1');	 //指定某一个获取
xmSelect.get(/.*demo1.*/);  //正则获取
//自定义方法获取
xmSelect.get(function(el){
	return el == '#demo1' || el == '#demo2';
});
//单实例
xmSelect.get('#demo2', true);

//batch 使用方式
//批量执行禁用
xmSelect.batch(/.*demo/, 'update', {
	disabled: true,
});
//批量执行warning
xmSelect.batch(/.*demo/, 'warning', '#F00', true);
xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
事件名说明参数
getValue获取当前选中的数据(type: 类型), 可选值: name, nameStr, value, valueStr
setValue动态设置数据(array: 选中的数据, show: 是否展开下拉,不传默认当前显示状态,取值: true/false, listenOn: 是否触发on的监听, 默认false)
append追加赋值(array: 追加的数据)
delete删除赋值(array: 删除的数据)
opened主动展开下拉-
closed主动关闭下拉-
reset重置为上一次的render状态-
update更新多选选中, reset不保留(options: 见配置项)
warning警告(color: 默认同theme.maxColor, sustain: 是否持续显示)
<div id="demo"></div>
<script>
    var demo = xmSelect.render({
        el: '#demo',
        data: [
            {name: '张三', value: 1},
            {name: '李四', value: 2},
            {name: '王五', value: 3},
        ]
    })
</script>
el 绑定的不一定是 id, 也可以是其他 css 选择器, 还可以是 dom 元素, 不支持 jQuery dom 对象,如:
el: '.demo'
el: document.querySelector('#demo')
    var demo = xmSelect.render({
        el: '#demo',
        language: 'en',
        data: []
    })
目前仅支持中文和英文, 如需更多语言, 可以clone代码进行二次开发
    var demo = xmSelect.render({
        el: '#demo',
        initValue: [4],     //使用initValue进行初始化
        data: [
            {name: '水果', value: 1, selected: true, disabled: true},     //使用 selected 属性初始化
            {name: '蔬菜', value: 2, selected: true},
            {name: '桌子', value: 3, disabled: true},
            {name: '北京', value: 4},
        ]
    })
支持使用 selected 属性或 initValue 进初始化,initValue 优先级大于选项中的 selected
selected 属性中 selected 是选中, disabled 是禁用

修改选项提示文字

修改空数据提示文字

修改搜索提示文字

    //修改选项提示文字
    var demo = xmSelect.render({
        el: '#demo',
        tips: '你喜欢什么水果呢?',
        data: []
    })

    //修改空数据提示文字
    var demo = xmSelect.render({
        el: '#demo',
        empty: '呀, 没有数据呢',
        data: []
    })

    //修改搜索提示文字
    var demo = xmSelect.render({
        el: '#demo',
        filterable: true,   //需要先开启搜索功能
        searchTips: '你想吃什么水果吧',
        data: []
    })

默认搜索

    var demo = xmSelect.render({
        el: '#demo',
        filterable: true,
        data: []
    });
默认按照name进行搜索

重写搜索方法

    var demo = xmSelect.render({
        el: '#demo',
        filterable: true,
        filterMethod: function(val, item, index, prop){
            if(val == item.value){  //把value相同的搜索出来
                return true;
            }
            if(item.name.indexOf(val) != -1){ //名称中包含的搜索出来
                return true;
            }
            return false;  //不知道的就不管了
        },
        data: []
    });

搜索延迟
为了提高有效搜索, 当停止输入2000ms后才开始进行过滤搜索, 当然这个2000你也可以进行修改

    var demo = xmSelect.render({
        el: '#demo',
        filterable: true,
        delay: 2000,
        data: []
    });
delay: 2000 输入停止2s后进行搜索过滤

自定义搜索 (远程搜索)
第一步: 需要先开启搜索 filterable: true,
第二步: 开启自定义搜索 remoteSearch: true
第三部: 重写搜索回调
简单吧, 记得Star ^_^

    var demo = xmSelect.render({
        el: '#demo',
        filterable: true,
        remoteSearch: true,
        remoteMethod: function(val, cb, show){
            //这里模拟3s后返回数据
            setTimeout(function(){
                //需要回传一个数组
                cb([
                    {name: '水果' + val, value: val + 1},
                    {name: '蔬菜' + val, value: val + 2, selected: true},
                    {name: '桌子' + val, value: val + 3},
                    {name: '北京' + val, value: val + 4},
                ])
            }, 3000)
        },
        data: []
    });
render后, 就会进行一次回调, 用于渲染第一次数据

远程搜索
第一步: 需要先开启搜索 filterable: true,
第二步: 开启自定义搜索 remoteSearch: true
第三部: 重写搜索回调
简单吧, 记得Star ^_^

    var demo = xmSelect.render({
        el: '#demo',
        filterable: true,
        remoteSearch: true,
        remoteMethod: function(val, cb, show){
            axios({
                method: 'get',
                url: '/wui/examples/xmselectdata.html',
                params: {
                    keyword: val
                }
            }).then(response => {
                var res = response.data
                cb(res.data)
            }).catch(err => {
                cb([])
            })
        },
        data: []
    })
render后, 就会进行一次回调, 用于渲染第一次数据

搜索完成回调

    var demo = xmSelect.render({
        el: '#demo',
        filterable: true,
        filterDone: function(val, list){
            alert(`搜索完毕, 搜索关键词: ${ val }, 过滤数据: ${ list.length }个`)
            //注意 ${ val } 中的空格不能省掉
        },
        data: [ ]
    })

自动auto

打卡向上up

打开向下down

    var demo = xmSelect.render({
        el: '#demo',
        direction: 'auto',
        data: []
    })
direction 参数可选项:
auto:自动
up:向上
down:向下

随便试试

    var demo = xmSelect.render({
        el: '#demo',
        style: {
            marginLeft: '200px',
            borderRadius: '50px',
            height: '50px',
        },
        data: []
    })
修改一下外边距, 加上圆角, 更改一下高度

修改下拉框的最大高度

    var demo = xmSelect.render({
        el: '#demo',
        height: '50px',
        data: []
    })

启用分页

    var demo = xmSelect.render({
        el: '#demo',
        paging: true,
        data: []
    })

自定义条数

    var demo = xmSelect.render({
        el: '#demo',
        paging: true,
        pageSize: 3,
        data: []
    })

搜索+分页

<div id="demo"></div>
<button class="btn" id="demobtn">每页5条</button>
<script>
    var data = [];
    for(var i = 0 ; i < 100 ; i++ ){
        data.push({
            name: '测试数据' + i,
            value: i,
        })
    }
    var demo = xmSelect.render({
        el: '#demo',
        paging: true,
        pageSize: 5,
        filterable: true,
        data
    })
    $('#demobtn').click(function(){
        demo.update({
            pageSize: 5
        })
    })

搜索 + 分页 无数据 不展示分页

    var demo = xmSelect.render({
        el: '#demo',
        paging: true,
        pageSize: 3,
        filterable: true,
        pageEmptyShow: false,
        data: []
    })

远程分页

    var demo = xmSelect.render({
                el: '#demo',
                paging: true,
                pageRemote: true,
                remoteMethod: function(val, cb, show, pageIndex){
                    //val: 搜索框的内容, 不开启搜索默认为空, cb: 回调函数, show: 当前下拉框是否展开, pageIndex: 当前第几页
                    //这里的axios类似于ajax
                    axios({
                        method: 'get',
                        url: '/wui/examples/xmselectdata.html',
                        params: {
                            keyword: val + '_' + pageIndex,
                        }
                    }).then(response => {
                        //这里是success的处理
                        var res = response.data;
                    //回调需要两个参数, 第一个: 数据数组, 第二个: 总页码
                    cb(res.data, 10)
                }).catch(err => {
                //这里是error的处理
                cb([], 0);
            });
        }
    })
render 后, 就会进行一次回调, 用于渲染第一次数据

搜索 + 远程分页

    var demo = xmSelect.render({
                el: '#demo',
                //配置搜索
                filterable: true,
                //配置远程分页
                paging: true,
                pageRemote: true,
                //数据处理
                remoteMethod: function(val, cb, show, pageIndex){
                    //val: 搜索框的内容, 不开启搜索默认为空, cb: 回调函数, show: 当前下拉框是否展开, pageIndex: 当前第几页

                    //这里的axios类似于ajax
                    axios({
                        method: 'get',
                        url: '/wui/examples/xmselectdata.html',
                        params: {
                            keyword: val + '_' + pageIndex,
                        }
                    }).then(response => {
                        //这里是success的处理
                        var res = response.data;
                    //回调需要两个参数, 第一个: 数据数组, 第二个: 总页码
                    cb(res.data, 10)
                }).catch(err => {
                //这里是error的处理
                cb([], 0);
            });
        }
    })
render 后, 就会进行一次回调, 用于渲染第一次数据

开启单选

    var demo = xmSelect.render({
        el: '#demo',
        radio: true,
        toolbar: {show: true},
        data: []
    })

单选完关闭下拉

    var demo = xmSelect.render({
        el: '#demo',
        radio: true,
        clickClose: true,
        data: []
    })

更换显示方式

    var demo = xmSelect.render({
        el: '#demo',
        radio: true,
        clickClose: true,
        model: {
            label: {
                type: 'text',
                text: {
                    //左边拼接的字符
                    left: '',
                    //右边拼接的字符
                    right: '',
                    //中间的分隔符
                    separator: ', ',
                },
            }
        },
        data: []
    })

开启重复选

    var demo = xmSelect.render({
        el: '#demo',
        repeat: true,
        data: []
    })

重复选完关闭下拉

    var demo = xmSelect.render({
        el: '#demo',
        repeat: true,
        clickClose: true,
        data: []
    })

更换显示方式

    var demo = xmSelect.render({
        el: '#demo',
        repeat: true,
        model: {
            label: {
                type: 'count',
                count: {
                    template: function(data, sels){
                        var res = {};
                        sels.forEach(item => {
                            var name = item.name;
                            !res[name] && (res[name] = 0);
                            res[name] += 1;
                            });
                        return Object.keys(res).map(key => {
                            return `${ key } (${ res[key] })`
                            //注意 ${ key }中间的空格
                        }).join(',');
                    }
                },
            }
        },
        data: []
    })

也许你的数据库返回的并不是name和value, 也许你提交的时候不止name和value, 怎么办? 自定义就行


<div id="demo"></div>
<button class="wui-btn" id="demo-getValue">获取选中值</button>
<script>
    var demo = xmSelect.render({
        el: '#demo',
        prop: {
            name: 'label',
            value: 'id',
        },
        data: [
            {label: '张三', id: 1, group: 1},
            {label: '李四', id: 2, group: 1},
            {label: '王五', id: 3, group: 2},
        ]
    })
    $('#demo-getValue').click(function() {
        $('#demo-value').html(JSON.stringify(demo.getValue(), null, 2));
    });
</script>
我的 name 是label, 我的 value 是id, 我有其他属性 group
    var demo = xmSelect.render({
        el: '#demo',
        theme: {
            color: '#e54d42',
        },
        data: []
    })

主动打开/关闭下拉框

<div id="demo"></div>
<button class="wui-btn" id="demo-open">打开下拉框</button>
<button class="wui-btn" id="demo-close">关闭下拉框</button>
<script>
    var demo = xmSelect.render({
        el: '#demo',
        data: []
    });
    $('#demo-open').click(function(){
        setTimeout(function(){
            demo.opened();
        }, 1000);   //这里延迟1S, 是因为, 点击下拉框外边的位置 会出发关闭事件, 所以延迟演示效果
    })
    $('#demo-close').click(function(){
        setTimeout(function(){
            demo.closed();
        }, 3000);  //先点一下关闭, 然后把下拉框点开, 3S后会自动关闭
    })
</script>

监听打开/关闭下拉框

    var demo36 = xmSelect.render({
        el: '#demo36',
        data: [],
        show(){
            alert('打开了')
        },
        hide(){
            alert('关闭了')
        }
    });

方块形状

    var demo = xmSelect.render({
        el: '#demo',
        data: []
    })

方块形状, 隐藏删除图标

    var demo = xmSelect.render({
        el: '#demo',
        model: {
            label: {
                type: 'block',
                block: {
                    //最大显示数量, 0:不限制
                    showCount: 0,
                    //是否显示删除图标
                    showIcon: false,
                }
            }
        },
        data: []
    })

方块形状, 超过1个隐藏

    var demo = xmSelect.render({
        el: '#demo',
        model: {
            label: {
                type: 'block',
                block: {
                    //最大显示数量, 0:不限制
                    showCount: 1,
                    //是否显示删除图标
                    showIcon: true,
                }
            }
        },
        data: []
    })

简单拼接形式

    var demo = xmSelect.render({
        el: '#demo',
        model: {
            label: {
                type: 'text',
                //使用字符串拼接的方式
                text: {
                    //左边拼接的字符
                    left: '【',
                    //右边拼接的字符
                    right: '】',
                    //中间的分隔符
                    separator: ',',
                },
            }
        },
        data: [],
    })

自定义显示

    var demo = xmSelect.render({
        el: '#demo',
        model: {
            label: {
                type: 'xxxx', //自定义与下面的对应
                xxxx: {
                    template(data, sels){
                        return "已选中 " + sels.length + " 项, 共 " + data.length + " 项"
                    }
                },
            }
        },
        data: [],
    })

自定义显示HTML

    var demo = xmSelect.render({
        el: '#demo',
        model: {
            label: {
                type: 'xxxx', //自定义与下面的对应
                xxxx: {
                    template(data, sels){
                        return "<div style="color: red;">${ sels.length } / ${ data.length }</div>"
                    }
                },
            }
        },
        data: [],
    })

直接显示下拉

    var demo = xmSelect.render({
        el: '#demo',
        model: {
            type: 'relative',
        },
        filterable: true,
        toolbar: { show: true },
        data: [],
    })

自定义渲染

    var demo = xmSelect.render({
        el: '#demo',
        template({ item, sels, name, value }){
        return item.name  + '<span style="position: absolute; right: 10px; color: #8799a3">'+value+'</span>'
        },
        prop: {
            name: 'showname',
        },
        data: [
            {name: '张三', value: 'zhangsan', showname: '组织部-张三', selected: true},
            {name: '李四', value: 'lisi', showname: '策划部-李四', selected: true},
            {name: '王五', value: 'wangwu', showname: '运营部-王五' },
        ]
    })

自定义渲染 - label

    var icons = ['wui-icon wui-icon-emoji', 'wui-icon wui-icon-mobile']
    var demo = xmSelect.render({
        el: '#demo',
        model: {
            label: {
                block: {
                    template: function(item, sels){
                        return '<i class="'+icons[item.group]+'"></i>' + item.name;
                    },
                },
            }
        },
        template({ item, sels, name, value }){
        return item.name  + '<span style="position: absolute; right: 10px; color: #8799a3">'+value+'</span>'
    },
    data: [
        {group: 1, name: '张三', value: 'zhangsan', selected: true},
        {group: 0, name: '李四', value: 'lisi', selected: true},
        {group: 1, name: '王五', value: 'wangwu' },
    ]
    })

实时监听
实时监听多选的选中状态变化

<div id="demo"></div>
<button class="wui-btn" id="setValue1">监听setValue(['zhangsan'], null, true)</button>
<button class="wui-btn" id="setValue2">不监听setValue(['zhangsan'])</button>
<script>
    var demo = xmSelect.render({
        el: '#demo',
        on: function(data){
            //arr:  当前多选已选中的数据
            var arr = data.arr;
            //change, 此次选择变化的数据,数组
            var change = data.change;
            //isAdd, 此次操作是新增还是删除
            var isAdd = data.isAdd;
            alert('已有: '+arr.length+' 变化: '+change.length+', 状态: ' + isAdd)
        },
        data: [
            {name: '张三', value: 'zhangsan', selected: true},
            {name: '李四', value: 'lisi', selected: true},
            {name: '王五', value: 'wangwu'},
        ]
    });
    $('#setValue1').click(function(){
        demo.setValue(['zhangsan'], null, true);
    })
    $('#setValue2').click(function(){
        demo.setValue(['zhangsan']);
    })
</script>

监听+动态赋值
选中北京后, 不能选中上海, 二者互斥

    var demo = xmSelect.render({
        el: '#demo',
        toolbar: {
            show: true
        },
        on: function(data){
            //arr:  当前多选已选中的数据
            var arr = data.arr;
            //change, 此次选择变化的数据,数组
            var change = data.change;
            //isAdd, 此次操作是新增还是删除
            var isAdd = data.isAdd;
            if(isAdd){
                var item = change[0];
                var index = arr.findIndex(i => i.mutex == item.mutex && i.value != item.value);
                if(index != -1){
                    arr.splice(index, 1);
                }
            }
        },
        data: [
            {name: '北京', value: 1, mutex: 1, selected: true},
            {name: '上海', value: 2, mutex: 1},
            {name: '广州', value: 3},
        ]
    })

监听+动态修改
有时全选也是一种状态, 列表中有全选, 与其他选项互斥

    var demo = xmSelect.render({
        el: '#demo',
        on: function(data){
            //可以return一个数组, 代表想选中的数据
            var arr = data.arr;        //arr:  当前多选已选中的数据
            var change = data.change;  //change, 此次选择变化的数据,数组
            var isAdd = data.isAdd;    //isAdd, 此次操作是新增还是删除
            if(isAdd){
                var allItem = change.find(function(item){
                    return item.value === 0;
                })
                if(allItem){
                    return [allItem];
                }
                allItem = arr.find(function(item){
                    return item.value === 0;
                })
                if(allItem){
                    return change;
                }
            }
        },
        data: []
    })

数据渲染耗时测试


<div id="demo"></div>
<button class="wui-btn" id="demo-test1">测试1000条</button>
<button class="wui-btn" id="demo-test2">测试10000条</button>
<button class="wui-btn" id="demo-test3">测试10000条+分页</button>
<pre id="demo-result"></pre>
<script>
    function run(count, paging){
        //生成数据
        var data = [];
        for(var i = 0; i < count; i++){
            data.push({
                name: '测试数据' + i,
                value: i,
            })
        }
        //记录开始渲染时间
        var startTime = Date.now();
        var demo = xmSelect.render({
            el: '#demo',
            paging,
            data
        })
        //记录结束时间
        var endTime = Date.now();
        $('#demo-result').html(`渲染耗时: ${endTime - startTime} ms`);
    }
    $('#demo-test1').click(function(){
        run(1000, false);
    })
    $('#demo-test2').click(function(){
        run(10000, false);
    })
    $('#demo-test3').click(function(){
        run(10000, true);
    })
    run(1000, false);
</script>
事实证明分页是好使的 ^_^

最多选择2个

    var demo = xmSelect.render({
        el: '#demo',
        max: 2,
        data: []
    })

自定义选超的提示

    var demo = xmSelect.render({
        el: '#demo',
        max: 2,
        maxMethod(seles, item){
            alert(`${ item.name }不能选了, 已经超了`)
        },
        data: []
    })

自定义选超的闪烁颜色

    var demo = xmSelect.render({
        el: '#demo',
        max: 2,
        theme: {
            maxColor: 'orange',
        },
        data: []
    })

默认工具条

    var demo = xmSelect.render({
        el: '#demo',
        toolbar: {
            show: true,
        },
        filterable: true,
        paging: true,
        pageSize: 3,
        data: []
    })

隐藏图标

    var demo = xmSelect.render({
        el: '#demo',
        toolbar: {
            show: true,
            showIcon: false,
        },
        filterable: true,
        paging: true,
        pageSize: 3,
        data: []
    })

自定义工具条

    var demo = xmSelect.render({
        el: '#demo',
        toolbar: {
            show: true,
            list: ['ALL', {
                name: '自定义',
                icon: 'el-icon-star-off',
                method(data){
                alert('我是自定义的')
            }
        }]
    },
    filterable: true,
            paging: true,
            pageSize: 3,
            data: []
    })

全部工具条

    var demo = xmSelect.render({
        el: '#demo',
        toolbar: {
            show: true,
            list: [ 'ALL', 'CLEAR', 'REVERSE' ]
        },
        filterable: true,
        paging: true,
        pageSize: 3,
        data: []
    })
    var demo = xmSelect.render({
        el: '#demo',
        filterable: true,
        showCount: 5,
        data: [
            {name: '张三1', value: 1},
            ... ...
            {name: '张三100', value: 1},
        ]
    })
当数量量过大时, 又不想使用分页的形式, 就可以控制显示数量, 用搜索的方式把最适合的数据展示出来
!!! 此处与分页配置互斥, 开启分页后, 此配置无效
!!! 使用此配置时建议开启搜索模式, 否则无法显示全部数据

children模式

    var demo = xmSelect.render({
        el: '#demo',
        toolbar:{
            show: true,
        },
        filterable: true,
        height: '500px',
        data: [
            {name: '销售员', children: [
                {name: '张三1', value: 1, selected: true},
                {name: '李四1', value: 2, selected: true},
                {name: '王五1', value: 3, disabled: true},
            ]},
            {name: '奖品', children: [
                {name: '苹果2', value: 4, selected: true, disabled: true, children: []},
                {name: '香蕉2', value: 5},
                {name: '葡萄2', value: 6},
            ]},
        ]
    })
选项中的 children 为数组

分组的单击事件

    var demo = xmSelect.render({
        el: '#demo',
        toolbar:{
            show: true,
        },
        height: '300px',
        data: [
            {name: '开始无分组1', value: 11, children: []},
            {name: '开始无分组2', value: 12, children: []},
            {name: '选中', optgroup: true, click: 'SELECT', children: [
                {name: '张三', value: 1},
                {name: '李四', value: 2, disabled: true},
            ]},
            {name: '清空', optgroup: true, click: 'CLEAR', children: [
                {name: '王五', value: 3, disabled: true},
                {name: '苹果', value: 4, selected: true},
            ]},
            {name: '自动', optgroup: true, click: 'AUTO', children: [
                {name: '香蕉', value: 5},
                {name: '葡萄', value: 6},
            ]},
            {name: '中间无分组1', value: 21, children: []},
            {name: '中间无分组2', value: 22, children: []},
            {name: '自定义', optgroup: true, click: function(item){ alert('自定义的, 想干嘛干嘛') }, children: [
        {name: '小米', value: 7},
        {name: '华为', value: 8},
    ]},
    {name: '结尾无分组1', value: 31, children: []},
    {name: '结尾无分组2', value: 32, children: []},
    ]
    })

带有分页的分组

    var demo = xmSelect.render({
        el: '#demo',
        toolbar:{
            show: true,
        },
        filterable: true,
        height: '500px',
        paging: true,
        pageSize: 2,
        data: [
            {name: '销售员', children: [
                {name: '张三1', value: 1},
                ... ...
            ]},
            {name: '奖品', children: [
                {name: '苹果23', value: 4},
                ... ...
            ]},
        ]
    })

开启换行

    var demo = xmSelect.render({
        el: '#demo',
        toolbar:{
            show: true,
        },
        autoRow: true,
        height: '500px',
        data: []
    })
//这里只展现HTML代码,JS代码和上面 开启换行 一样
<form class="wui-form wui-form-pane" action="" style="width:350px;">
    <div class="wui-form-item" pane>
        <label class="wui-form-label">默认风格</label>
        <div class="wui-input-block">
            <div id="demo"></div>
        </div>
    </div>
</form>

隐藏单选图标

    var demo = xmSelect.render({
        el: '#demo',
        radio: true,
        clickClose: true,
        model: {
            icon: 'hidden',
            label: {
                type: 'text'
            }
        },
        data: []
    })

隐藏多选图标

    var demo = xmSelect.render({
        el: '#demo',
        model: {
            icon: 'hidden',
        },
        data: []
    })
    var demo = xmSelect.render({
        el: '#demo',
        size: 'large',
        data: []
    })
size 参数可选项:
大号:large
默认:medium (可不设置)
小号:small
迷你:mini
<div id="demo"></div>
<button class="wui-btn" id="demo1-warning">警告提示</button>
<button class="wui-btn" id="demo2-warning">自定义闪烁颜色</button>
<button class="wui-btn" id="demo3-warning">持续显示</button>

    var demo = xmSelect.render({
        el: '#demo',
        data: []
    });
    //警告提示
    $('#demo1-warning').click(function(){
        demo.warning();
    });
    //自定义闪烁颜色
    $('#demo2-warning').click(function(){
        demo.warning('#6739b6');
    });
    //持续显示
    $('#demo3-warning').click(function(){
        demo.warning('#ff9900', true);
    });

渲染禁用

    var demo = xmSelect.render({
        el: '#demo',
        disabled: true,
        data: []
    })

动态启用禁用

    var demo = xmSelect.render({
        el: '#demo',
        data: []
    })
    $('#demo1').click(function(){
        demo.update({ disabled: true });
    });
    $('#demo2').click(function(){
        demo.update({ disabled: false });
    });

选完张三后禁用

    var demo = xmSelect.render({
        el: '#demo',
        data: [],
        on({ arr, change, isAdd }){
            var hasZS = change.find(item => item.name === '张三');
            if(isAdd && hasZS){
                demo.update({ disabled: true });
            }
        }
    })
    //没有做不到, 只有想不到, 把多选玩出花来吧
    $('#demo-disabled').click(function(){
        demo.update({ disabled: false });
    });

搜索不存在则创建条目

    var demo = xmSelect.render({
        el: '#demo',
        filterable: true,
        create: function(val, arr){
            if(arr.length === 0){
                return {
                    name: '创建-' + val,
                    value: val
                }
            }
        },
        data: []
    })

单选创建

    var demo = xmSelect.render({
        el: '#demo',
        radio: true,
        clickClose: true,
        filterable: true,
        create: function(val, arr){
            if(arr.length === 0){
                return {
                    name: '创建-' + val,
                    value: val
                }
            }
        },
        model: {
            icon: 'hidden',
            label: {
                type: 'text',
            }
        },
        data: []
    })
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile