00032-layui 树形下拉选择 xmSelect（二）：数据懒加载_layui 懒加载select

<div class="layui-form-item layui-form-item-45" >
   <label class="layui-form-label">证照名称<span style="color:red">*</span></label>
   <div class="layui-input-block">
      <div id="licenceSel"></div>
      <input type="hidden" name="licenceId">
      <input type="hidden" name="licenceName">
   </div>
</div>
1
2
3
4
5
6
7
8

layui.config({
   base: '${ctxLayui}/layuiadmin/'
}).extend({
   index: 'lib/index'
}).use(['index', 'form','dict','laydate','util','xmSelect','upload'], function(){
   var $ = layui.$ ,form = layui.form;
   var dict = layui.dict;
   var laydate = layui.laydate;
   var util = layui.util;
   var admin = layui.admin;
   var xmSelect = layui.xmSelect;

var url = ctx+'/base/licence/queryByAll'

var licenceData = [];
var rtnLicence = admin.syncReq(url,{parentId:0});
if(rtnLicence.code==0){
    licenceData = rtnLicence.data;
}

var licenceXmSelect = xmSelect.render({
          el: '#licenceSel',
          autoRow: true,
          filterable: true,
          remoteSearch:true,
          remoteMethod:function (val,cb,show) {
              if(val){
                  var rtnSearch = admin.syncReq(url,{name:val,sqlWhere:' and parentId!=0 '});
                  cb(rtnSearch.data)
      }else{
                  cb([])
      }
          },
          tree: {
              show: true,
              showFolderIcon: true,
              showLine: true,
              indent: 20,
              expandedKeys: [],
              strict: false,
              lazy: true,
              load:function (item,cb) {
                  if(item.parentId!=0){
                      cb([])
                  }else{
                      if(!item.children || item.children.length==0){
                          var _rtn=admin.syncReq(url,{parentId:item.id});
                          if(_rtn.data && _rtn.data.length>0){
                              var children = _rtn.data;
                              $.each(children,function (index,_item) {
                                  _item.children = null;

                                  var _parent = {name:item.name,id:item.id}
                                  if(item.parent){
                                      _parent = $.extend(_parent,{parent:item.parent});
                                  }
                                  _item = $.extend(_item,{ parent:_parent });
                              })
                              cb(children);
                          }
                      }else{
                          cb([])
                      }
                  }
              }
          },
          prop:{
              name:'name',
              value:'id'
          },
          height: '350px',
          radio:true,
          clickClose:true,
          data(){
              return licenceData;
          },
          show:function () {
              licenceXmSelect.update();
          },
          on:function (data) {
              var arr = data.arr;
              if(arr && arr.length>0){
                  var node = arr[0];
                  /*if(node.parentId!=0){
                      licenceXmSelect.closed();
                  }else{
                  }*/
                  var parentId  = node.parentId;
                  if(parentId!=0){
                      form.val('companyPaperRecordDetailForm',{
                          licenceName:node.name,
                          licenceId:node.id,
                      });
         }
              }

          }
      });

      var licenceId = formData?(formData.licenceId?formData.licenceId:null):null;
      if(licenceId){
          var _rtn=admin.syncReq(ctx+'/base/licence/queryById',{id:licenceId});
          var selRec = _rtn.data;
          if(selRec && selRec.parentId!=0){
              var rtn1 = admin.syncReq(url,{parentId:selRec.parentId});
              var children = rtn1.data;
              $.each(licenceData,function (index,item) {
                  if(item.id==selRec.parentId){
                      item.children = children;
                      return false;
                  }
              })
          }
          licenceXmSelect.reset();
          licenceXmSelect.setValue([licenceId])
      }else{
          licenceXmSelect.update();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119