结合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>
posted @ 2020-05-21 17:57  苦行者的刀  阅读(1556)  评论(0)  编辑  收藏  举报