最近项目上需要加载一个问题分类下拉框,数据量不是普通的六七个,还需要有搜索功能,原生的下拉框是满足不了了,
于是使用layui的第三方组件xmSelect,功能是是非常强大的,分页,搜索,分组等等
如果需要展示更多列的数据,可以使用tableSelect
layui.config({base: './layui_exts/xmSelect/'}).extend({xmSelect: 'xm-select'}).use(['xmSelect'],function(){var xmSelect = layui.xmSelect;
})
//加载问题分类下拉框var xmSelect = xmSelect.render({el: '#itemType',language: 'zn',//开启搜索filterable: true,//搜索提示searchTips: '请输入问题分类关键词',//开启远程搜索remoteSearch: true,// layVerify: 'required',//搜素延迟delay: 1000,model: {icon: 'hidden',label: {type: 'block',block: {//是否显示删除图标showIcon: false,}}},//下拉方向direction: 'down',//搜索回调remoteMethod: function (val, cb, show, pageIndex) {$.ajax(ctx + 'complain/itemTypeList', {method: 'post',data: {itemType: val,pageNum: pageIndex},dataType: 'json',success: function (res) {var data = res.data;if (res.code == 0) {//成功回调数据 itemTypes List<Map<String,String>> name valuecb(data.itemTypes, data.pages);} else {layer.msg(res.msg, {time: 2000, icon: 2, shade: 0.01});}}})},paging: true,pageRemote: true,radio: true,clickClose: true})
//获取值
xmSelect.getValue()[0].value
