layui 插件 xm-select的使用
如图 select多选联动
前端代码定义如下:
html
1、引入插件
<script type="text/javascript" src="/js/plugins/layui/xm-select.js"></script>
2、定义界面
<span>省:</span><div id="demo" name="demo" class="xm-select-demo"></div>
<span>市:</span><div id="demo2" name="demo2" class="xm-select-demo"></div>
3、数据初始化
<script type="text/javascript">
$(function (){
demo();
demo2(null);
});
function demo() {
let data = {"current": 1, "size": 500};
let demoData = [];
let demoCode =null;
//下拉框
$.ajax({
url: 'demo/list',
dataType: 'json',
type: 'get',
data: data,
success: function (r) {
if (r) {
$.each(r, function (index, item) {
let obj = {name: item.code + " " + item.name, value: item.code};
demoData.push(obj);
});
demoCode = xmSelect.render({
el: '#demo',
filterable: true,
theme: {
color: '#1c84c6',
},
toolbar: {
show: true,
list: ['ALL', 'CLEAR', 'REVERSE']
},
model: {
label: {
type: 'block',
block: {
//最大显示数量, 0:不限制
showCount: 1,
//是否显示删除图标
showIcon: true,
}
}
},
searchTips: '直接选择或搜索选择',
hide() {
let arr =demoCode.getValue('value');
demo2(arr);
},
data: demoData,
});
}
}
});
return demoCode;
}
function demo2(arr) {
let condition = {
"demos": arr,
};
let demo2Act = null;
let data = {"condition": JSON.stringify(condition)};
$.ajax({
url: 'demo2/list',
dataType: 'json',
type: 'get',
data: data,
success: function (r) {
if (r) {
demo2Act = xmSelect.render({
el: '#demo2',
filterable: true,
theme: {
color: '#1c84c6',
},
model: {
label: {
type: 'block',
block: {
//最大显示数量, 0:不限制
showCount: 1,
//是否显示删除图标
showIcon: true,
}
}
},
toolbar: {
show: true,
list: ['ALL', 'CLEAR', 'REVERSE']
},
searchTips: '直接选择或搜索选择',
data: r,
});
}
}
});
return demo2Act;
}
</script>
注意在其他调用js里面使用时需重新初始化数据
后端代码块
@ResponseBody
@GetMapping("/list")
public List<Province> list(@RequestParam Map<String, Object> params) {
return provinceService.list(params);
}
@Override
public List<Province> selectList(Map<String, Object> params) {
try {
List<Province> list = provinceDao.list(params.get("condition"));
return list ;
} catch (Exception e) {
log.error("列表查询异常,原因=【{}】", e);
return null;
}
}
@ResponseBody
@GetMapping("/list")
public List<City> groupList(@RequestParam Map<String, Object> params) {
return cityService.groupList(params);
}
@Override
public List<City> groupList(Map<String, Object> params) {
try {
List<City> cityList = cityDao.list(params.get("condition"))
return groupByName(cityList );
} catch (Exception e) {
log.error("列表查询异常,原因=【{}】", e);
return null;
}
}
private List<City> groupByName(List<City> cityList){
List<City> list = new ArrayList<>();
if (CollectionUtils.isEmpty(cityList)){
return list;
}
Map<String,List<city>> map = cityList.stream().filter(e -> StringUtils.isNotBlank(e.getName())).collect(Collectors.groupingBy(item -> item.getName()));
Iterator<Map.Entry<String,List<City>>> entryIt = map.entrySet().iterator();
while (entryIt.hasNext()) {
City city= new City();
Map.Entry<String,List<City>> entity = entryIt.next();
List<JSONObject> objectList = new ArrayList<>();
List<City> newList = entity.getValue();
newList .forEach(city-> {
JSONObject obj = new JSONObject();
obj.put("name",StringUtils.join(city.getName(),city.getCode()));
obj.put("value",city.getCode());
objectList.add(obj);
});
String Name = entity.getKey();
city.setName(name);
city.setChildren(objectList);
list.add(city);
}
return list;
}
以上个人拙见,仅供参考!
数据插件提取地址
链接:https://pan.baidu.com/s/1B01Gt3SdKPETai6wcojuaA
提取码:tkbt