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