zoukankan      html  css  js  c++  java
  • 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();
    }
    
    
  • 相关阅读:
    MySQL (一)(未完成)
    HTML 学习笔记 CSS3 (边框)
    HTML 学习笔记 JavaScript (函数)
    HTML 学习笔记 JavaScript (对象)
    HTML 学习笔记 JavaScript (变量)
    HTML 学习笔记 JavaScript (实现)
    HTML 学习笔记 JavaScript(简介)
    iOS RunTime运行时(1):类与对象
    iOS UITableView 分割线从零开始
    HTML 学习笔记 CSS(选择器4)
  • 原文地址:https://www.cnblogs.com/jianquan100/p/13676018.html
Copyright © 2011-2022 走看看