数据库读取数据填充
互选组件属性,方法等了解:组件文档 | RuoYi
效果图:
代码
注意数据访问路径
<select> id值的修改
判断是否授权使用的status字段 判断是否授权是使用<select>的value值是否等于1(根据个人需求做出相应的修改)
o.value o.id o.text根据自己的表字段进行相应的修改
<!DOCTYPE html> <html lang="zh"> <head> <th:block th:include="include :: header('左右互选组件')" /> <th:block th:include="include :: bootstrap-duallistbox-css" /> </head> <body class="gray-bg"> <div class="wrapper wrapper-content animated fadeInRight"> <div class="row"> <div class="col-lg-12"> <div class="ibox"> <div class="ibox-content"> <form id="form" action="#" class="wizard-big"> <select id="agent_select" class="form-control dual_select" multiple> </select> </form> </div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-offset-5 col-sm-10"> <button type="button" οnclick="closeItem()">取 消 </button> <button type="button" οnclick="submitHandler()">保 存</button> </div> </div> <th:block th:include="include :: footer" /> <th:block th:include="include :: bootstrap-duallistbox-js" /> <!--<script th:src="@{/js/duallistbox.js}"></script>--> <script type="text/javascript"> //需要修改路径 字段名 var page_agent_prefix = ctx + "ps/agent"; $.ajax({ url: page_agent_prefix+"/list", //数据访问路径 method: 'POST', data:{},/*{"agentName":"代理商1"} 需要传递参数时传参方式要使用json格式*/ success:function (data){ $(data.rows).each(function (){ var o = document.createElement("option"); o.innerHTML var selector = $("#agent_select")[0]; o.value = this['status'];//为option标签添加value属性 使用的value判断的是否是已授权或者未授权 (以下都是实体类的对象) o.id=this['agentId'];//为option标签添加id属性(用来提交给后台传递ID参数) o.text = this['agentName'];//option标签显示的文字 if ("undefined" != typeof ("1") && "1" != "") { //方法判断了status的值 此处status=1表示已经选中 var selectedDataArray = "1".split(','); $.each(selectedDataArray, function (i, val) { if (o.value == val) { o.selected = 'selected'; return false; } }); } if(typeof(selector) != "undefined") { selector.options.add(o); } }); $('.dual_select').bootstrapDualListbox({ nonSelectedListLabel: '未授权代理商', selectedListLabel: '已授权代理商', preserveSelectionOnMove: 'moved', moveOnSelect: false, // 出现一个剪头,表示可以一次选择一个 filterTextClear: '展示所有', moveSelectedLabel: "添加", moveAllLabel: '添加所有', removeSelectedLabel: "移除", removeAllLabel: '移除所有', infoText: '共{0}个', showFilterInputs: false, // 是否带搜索 selectorMinimalHeight: 160 }); } }) function submitHandler(){ var roomIds = $("#agent_select option").map(function(){ if (this.value=="1") return $(this).attr("id"); }).get().join(","); alert(roomIds) $.ajax({ }) } function closeItem(){ var index=parent.layer.getFrameIndex(window.name); //获取当前窗口的name parent.layer.close(index);//关闭窗口 } </script> </body> </html>