00032-layui 树形下拉选择 xmSelect(二):数据懒加载

<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>
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();
}
上一篇:当端口占用时需要的查看端口,杀掉进程等操作


下一篇:ROS学习笔记之——无人机PID调参过程记录2