Bootstrap-duallistbox动态获取数据

来源于   https://blog.csdn.net/qinshijangshan/article/details/80179602

 

ajax方式从服务器获取数据，填充到Bootstrap-duallistbox；

配置支持本地（file协议）的Ajax请求：https://www.cnblogs.com/micua/p/chrome-file-protocol-support-ajax.html

Bootstrap-duallistbox ajax请求，参考：https://www.cnblogs.com/hangwei/p/5040866.html

https://www.cnblogs.com/Isabella-CC/p/8006912.html

role.json

 1 [
 2   {
 3     "roleId":"1",
 4     "roleName":"系统管理员"
 5   },
 6   {
 7     "roleId":"2",
 8     "roleName":"董事长"
 9   },
10   {
11     "roleId":"3",
12     "roleName":"董事长助理"
13   },
14   {
15     "roleId":"4",
16     "roleName":"总经理"
17   },
18   {
19     "roleId":"5",
20     "roleName":"总经理助理"
21   },
22   {
23     "roleId":"6",
24     "roleName":"财务-副总"
25   },
26   {
27     "roleId":"7",
28     "roleName":"部门经理"
29   }
30 ]
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8" />
 5   <title>Bootstrap Dual Listbox</title>
 6   <link rel="stylesheet" href="../../public/bootstrap4/css/bootstrap.min.css">
 7   <link rel="stylesheet" type="text/css" href="../../public/bootstrap-duallistbox/bootstrap-duallistbox.min.css">
 8   <script src="../../public/jquery-3.x.min.js"></script>
 9   <script src="../../public/bootstrap4/js/bootstrap.min.js"></script>
10   <script src="../../public/bootstrap-duallistbox/jquery.bootstrap-duallistbox.js"></script>
11   
12 </head>
13 <body class="container">
14 <h2>Dynamically Data</h2>
15  
16 <div class="row">
17   <div class="col-md-6">
18     <select multiple="multiple" name="roleIds" id="roleIds">   
19     </select>
20   </div>
21 </div>
22  
23 <script src="./duallistbox.js"></script>
24  
25 <script>
26 $(function() {
27   var requestUrl = "role.json";
28   var reqeustParams = "";//有参数用json格式
29   var selectElement = "#roleIds";
30   var selectedDataStr = "1,2,4";//选中的option（用过英文逗号隔开；新增时，无选中option）
31   //初始化duallistbox
32   initListBox(requestUrl, reqeustParams, selectElement, 'roleId', 'roleName', selectedDataStr);
33 });
34 </script>
35 </body>
36 </html>

 

 1 /** 
 2  * 初始化duallistbox
 3  * reqeustParams：查询参数
 4  * selectElement：select元素对应属性
 5  * optionValue
 6  * optionText
 7  * selectedDataStr：选中数据，值以,隔开
 8  */
 9 function initListBox(url,reqeustParams,selectElement,optionValue,optionText, selectedDataStr) {
10   $.ajax({
11     type: 'POST',//请求方式
12     url: url,//地址，就是json文件的请求路径
13     data: reqeustParams,//请求参数
14     async: true,//是否异步
15     success: function (data) {
16       var objs = $.parseJSON(data);
17       var selector = $(selectElement)[0];
18       $(objs).each(function () {
19         var o = document.createElement("option");
20         o.value = this[optionValue];
21         o.text = this[optionText];
22         if ("undefined" != typeof (selectedDataStr) && selectedDataStr != "") {
23           var selectedDataArray = selectedDataStr.split(',');
24           $.each(selectedDataArray, function (i, val) {
25             if (o.value == val) {
26               o.selected = 'selected';
27               return false;
28             }
29           });
30         }
31         if(typeof(selector) != "undefined") {
32             selector.options.add(o);
33         }
34       });
35       
36       //渲染dualListbox
37       $(selectElement).bootstrapDualListbox({
38         moveOnSelect: false,
39         preserveSelectionOnMove: 'all',
40         nonSelectedListLabel: 'Non-selected',
41         selectedListLabel: 'Selected',
42         selectorMinimalHeight: 200,
43       });
44     },
45     error: function (e) {
46       alert(e.msg);
47     }
48   });
49 }

 

posted @ 2020-05-21 17:20  苦行者的刀  阅读(710)  评论(0)    收藏  举报