layui中formSelects多选组件使用日记
一、下载引用
1、下载
在layui 第三方组件平台下载：https://fly.layui.com/extend/formSelects，当然也要先下载layui和jquery啦。此处不进行jquery的演示。
2、引用
<link rel="stylesheet" th:href="@{/libs/layui/css/layui.css}"/>
<link rel="stylesheet" th:href="@{/libs/layer/formSelects/formSelects-v4.css}"/>
<script th:src="@{/libs/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/libs/layer/formSelects/formSelects-v4.js}" charset="utf-8"></script>
二、使用
1、界面使用
<div class="col-sm-8">
<select name="organization" xm-select-search="" xm- select="userDetailOrganizationSelectId">
<option value="">请选择</option>
</select>
</div>
JS调用：
<script>
$(function () {
//userDetailOrganizationSelectId为下拉选项xm- select="userDetailOrganizationSelectId"对应，形如：dom元素的ID
layui.formSelects.render('userDetailOrganizationSelectId', {
//init: ["1", "请先选择机构"], //默认值
skin: "normal", //多选皮肤normal|primary|default|danger|warm
height: "auto", //是否固定高度, 38px | auto
radio: false, //是否设置为单选模式
direction: "down", //显示方式向下显示
on: function(id, vals, val, isAdd, isDisabled){
}, //同formSelects.on
searchType: "dl" //搜索框的位置
});
layui.formSelects.data('userDetailOrganizationSelectId', 'server', {
type:'post',
url: '/user/userorganizationbycode?code='+userOrganization,
success: function(id, url, searchVal, result){
//选中，如： "1010101,1010103"，一定要转为数组格式，特别注意：[1010101,1010103]或
["1010101","1010103"]都不能正常选中
var organizations = "1010101,1010103";//要选中的值，
layui.formSelects.value('userDetailOrganizationSelectId',organizations.split(','));
}
});
//获取下拉选中的值
var selectOrganiztionIds = layui.formSelects.value('userDetailOrganizationSelectId', 'val');
});
</script>
后台Controller方法查询数据
/**根据code查询机构下的部门*/
@PostMapping("/userorganizationbycode")
@ResponseBody
public JSONObject userOrganizationByCode(Model model,String code){
List organizationList =organizationService.selectLeafsByCode(code);
JSONObject jo =new JSONObject();
JSONArray ja =new JSONArray();
if(null != organizationList && organizationList.size()>0) {
jo.put("code",0);
jo.put("msg","success");
//拼接下拉选项JSON
for (Organization organization: organizationList) {
JSONObject ro =new JSONObject();
ro.put("value", organization.getCode());
ro.put("name",organization.getName());
ja.add(ro);
}
jo.put("data", ja);
}
System.out.println(jo);
return jo;
}
返回JSON数据格式如下：
{"msg":"success","code":0,"data":[{"name":"开发组","value":"1010101"},{"name":"大的说法","value":"1010103"}]}
展示效果：
本文仅为本人使用心得，若对您有所帮助，那就是我最开心的啦。当然，不喜勿喷..............
本文参考了https://hnzzmsf.github.io/example/example_v4.html
