结合Ruoyi 我用 Bootstrap-duallistbox动态获取数据

结合网友给的参考案例    https://blog.csdn.net/qinshijangshan/article/details/80179602

我自己写了个左右互选的组件

原作者的JS开发能力还是比我要高的;

我的代码如下,留个纪念吧。

 

  1 <!DOCTYPE html>
  2 <html lang="zh">
  3 <head>
  4     <th:block th:include="include :: header('左右互选组件')" />
  5     <th:block th:include="include :: bootstrap-duallistbox-css" />
  6 </head>
  7 <body class="gray-bg">
  8 <div class="wrapper wrapper-content animated fadeInRight">
  9     <div class="row">
 10         <div class="col-md-6">
 11             <div class="ibox">
 12                 <div class="ibox-title">
 13                     <h5>双重列表框 </h5>
 14                 </div>
 15                 <div class="ibox-content">
 16                     <p>
 17                         Bootstrap Dual Listbox是针对Twitter Bootstrap进行了优化的响应式双列表框。它适用于所有现代浏览器和触摸设备。
 18                     </p>
 19 
 20                     <form id="form" action="#" class="wizard-big">
 21                         <select id="stockcode"  name="stockcode"    multiple="multiple"  >
 22 
 23                         </select>
 24 
 25 
 26 
 27                     </form>
 28                     <hr>
 29                     <div class="form-group">
 30                         <label class="font-noraml">相关参数详细信息</label>
 31                         <div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-duallistbox" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-duallistbox</a></div>
 32                     </div>
 33                 </div>
 34             </div>
 35         </div>
 36     </div>
 37 </div>
 38 <th:block th:include="include :: footer" />
 39 <th:block th:include="include :: bootstrap-duallistbox-js" />
 40 <th:block th:include="include :: bootstrap-duallistbox-css" />
 41 <th:block th:include="include :: bootstrap-select-js" />
 42 <th:block th:include="include :: bootstrap-select-css" />
 43 <script type="text/javascript">
 44 
 45     var prefix = ctx + "stock/code/";
 46     var deviceStr="" ;
 47 
 48 
 49 
 50 
 51     $('.dual_select')
 52         .bootstrapDualListbox({
 53             nonSelectedListLabel: '未添加',
 54             selectedListLabel: '已添加',
 55             preserveSelectionOnMove: 'moved',
 56             moveOnSelect: false,           // 出现一个剪头,表示可以一次选择一个
 57             filterTextClear: '展示所有',
 58             moveSelectedLabel: "添加",
 59             moveAllLabel: '添加所有',
 60             removeSelectedLabel: "移除",
 61             removeAllLabel: '移除所有',
 62             infoText: '共{0}个',
 63             showFilterInputs: true,       // 是否带搜索
 64             selectorMinimalHeight: 160,
 65             filterPlaceHolder:'查询条件'
 66 
 67         });
 68 
 69 
 70 
 71 
 72     $(function() {
 73         var requestUrl = prefix+"selectStockCode";
 74         var reqeustParams = "";//有参数用json格式
 75         var selectElement = "#stockcode";
 76         var selectedDataStr = "sh600004,sh600006,sh600007";//选中的option(用过英文逗号隔开;新增时,无选中option)
 77         //初始化duallistbox
 78         initListBox(requestUrl, reqeustParams, selectElement, 'code', 'name', selectedDataStr);
 79     });
 80 
 81 
 82 
 83 
 84 
 85     function initListBox(url,reqeustParams,selectElement,optionValue,optionText, selectedDataStr) {
 86         $.ajax({
 87             type: 'GET',//请求方式
 88             url: url,//地址,就是json文件的请求路径
 89             data: reqeustParams,//请求参数
 90             async: true,//是否异步
 91             success: function (data) {
 92                 //var objs = $.parseJSON(data);
 93                 var objs = data ;
 94                 var selector = $(selectElement)[0];
 95                 $(objs).each(function () {
 96                     var o = document.createElement("option");
 97                     o.value = this[optionValue];
 98                     o.text = this[optionText];
 99                     if ("undefined" != typeof (selectedDataStr) && selectedDataStr != "") {
100                         var selectedDataArray = selectedDataStr.split(',');
101                         $.each(selectedDataArray, function (i, val) {
102                             if (o.value == val) {
103                                 o.selected = 'selected';
104                                 return false;
105                             }
106                         });
107                     }
108                     if(typeof(selector) != "undefined") {
109                         selector.options.add(o);
110                     }
111                 });
112 
113                 //渲染dualListbox
114                 $(selectElement).bootstrapDualListbox({
115                     moveOnSelect: false,
116                     preserveSelectionOnMove: 'all',
117                     nonSelectedListLabel: 'Non-selected',
118                     selectedListLabel: 'Selected',
119                     selectorMinimalHeight: 200,
120                 });
121             },
122             error: function (e) {
123                 alert(e.msg);
124             }
125         });
126     }
127 
128 
129 
130 
131 </script>
132 </body>
133 </html>

 

 

 

 

 

 

 

 

<!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-md-6">
<div class="ibox">
<div class="ibox-title">
<h5>双重列表框 </h5>
</div>
<div class="ibox-content">
<p>
Bootstrap Dual Listbox是针对Twitter Bootstrap进行了优化的响应式双列表框。它适用于所有现代浏览器和触摸设备。
</p>

<form id="form" action="#" class="wizard-big">
<select id="stockcode" name="stockcode" multiple="multiple" >

</select>



</form>
<hr>
<div class="form-group">
<label class="font-noraml">相关参数详细信息</label>
<div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-duallistbox" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-duallistbox</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-duallistbox-js" />
<th:block th:include="include :: bootstrap-duallistbox-css" />
<th:block th:include="include :: bootstrap-select-js" />
<th:block th:include="include :: bootstrap-select-css" />
<script type="text/javascript">

var prefix = ctx + "stock/code/";
var deviceStr="" ;




$('.dual_select')
.bootstrapDualListbox({
nonSelectedListLabel: '未添加',
selectedListLabel: '已添加',
preserveSelectionOnMove: 'moved',
moveOnSelect: false, // 出现一个剪头,表示可以一次选择一个
filterTextClear: '展示所有',
moveSelectedLabel: "添加",
moveAllLabel: '添加所有',
removeSelectedLabel: "移除",
removeAllLabel: '移除所有',
infoText: '共{0}个',
showFilterInputs: true, // 是否带搜索
selectorMinimalHeight: 160,
filterPlaceHolder:'查询条件'

});




$(function() {
var requestUrl = prefix+"selectStockCode";
var reqeustParams = "";//有参数用json格式
var selectElement = "#stockcode";
var selectedDataStr = "sh600004,sh600006,sh600007";//选中的option(用过英文逗号隔开;新增时,无选中option)
//初始化duallistbox
initListBox(requestUrl, reqeustParams, selectElement, 'code', 'name', selectedDataStr);
});





function initListBox(url,reqeustParams,selectElement,optionValue,optionText, selectedDataStr) {
$.ajax({
type: 'GET',//请求方式
url: url,//地址,就是json文件的请求路径
data: reqeustParams,//请求参数
async: true,//是否异步
success: function (data) {
//var objs = $.parseJSON(data);
var objs = data ;
var selector = $(selectElement)[0];
$(objs).each(function () {
var o = document.createElement("option");
o.value = this[optionValue];
o.text = this[optionText];
if ("undefined" != typeof (selectedDataStr) && selectedDataStr != "") {
var selectedDataArray = selectedDataStr.split(',');
$.each(selectedDataArray, function (i, val) {
if (o.value == val) {
o.selected = 'selected';
return false;
}
});
}
if(typeof(selector) != "undefined") {
selector.options.add(o);
}
});

//渲染dualListbox
$(selectElement).bootstrapDualListbox({
moveOnSelect: false,
preserveSelectionOnMove: 'all',
nonSelectedListLabel: 'Non-selected',
selectedListLabel: 'Selected',
selectorMinimalHeight: 200,
});
},
error: function (e) {
alert(e.msg);
}
});
}




</script>
</body>
</html>
上一篇:一个超好用的权限管理基础框架分享——若依


下一篇:ruoyi bootstrap-select 下拉多选取值及重置