第三方多选下拉以及数据回显(重要的是回显)

前端

html

<input type="hidden" id="隐藏input的id" name="btroleval" value="${obj.roleid}">
<div class="layui-input-inline">
    <select name="btrole"  lay-filter="btrole" lay-search="" lay-verify="required" 
    xm-select-show-count=1 xm-select="多选下拉框的id" xm-select-type="1" >
          <option value="">直接选择</option>
    </select>
</div>

js(写在layui的funcion里,单独渲染,不以组件的形式出现

     var formSelects = layui.formSelects;
        //获取角色已选数组的字符串
        var lis = $("#隐藏input的id").val(); 
        //将字符串分割成字符串数组
        var lisarr = lis.split(",");
        formSelects.config('formSelects的id',{            
            type: "post",            
            linkage: true,
            linkageWidth: 130,            
            searchUrl: '',              //搜索地址, 默认使用xm-select-search的值, 此参数优先级高
            /* searchName: '',      //自定义搜索内容的key值
            searchVal: '',           //自定义搜索内容, 搜素一次后失效, 优先级高于搜索框中的值 */
            keyName: 'text',            //搜索框中的内容
            keyVal: 'id',            //自定义返回数据中value的key, 默认 value
            keySel: 'btrole',         //自定义返回数据中selected的key, 默认 selected
            delay: 500,                 //搜索延迟时间, 默认停止输入500ms后开始搜索
            direction: 'auto',          //多选下拉方向, auto|up|down                
            response: {
                statusCode: 0,          //成功状态码
                statusName: 'code',     //code key
                msgName: 'msg',         //msg key
                dataName: 'data'        //data key
            },                    
            success: function(id, url, searchVal, result){
                //已选数据的回显
                formSelects.value('btrole',lisarr,true); 
            },                                         
            clearInput: false,          //当有搜索内容时, 点击选项是否清空搜索内容, 默认不清空
        }).data('btrole','server',{
            url: '<%=request.getContextPath()%>显示信息的路径'            
     });
posted @ 2019-12-18 16:53  100WAN  阅读(1782)  评论(0编辑  收藏  举报