zoukankan html css js c++ java

结合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>

查看全文

相关阅读:
HDU 3572 Task Schedule（拆点+最大流dinic）
POJ 1236 Network of Schools（Tarjan缩点）
HDU 3605 Escape（状压+最大流）
HDU 1166 敌兵布阵（分块）
Leetcode 223 Rectangle Area
Leetcode 219 Contains Duplicate II STL
Leetcode 36 Valid Sudoku
Leetcode 88 Merge Sorted Array STL
Leetcode 160 Intersection of Two Linked Lists 单向链表
 Leetcode 111 Minimum Depth of Binary Tree 二叉树

原文地址：https://www.cnblogs.com/alexgl2008/p/12932353.html