EasyUI学习之Combobox级联下拉列表(2)


Posted in Javascript onDecember 29, 2016

本文实例为大家分享了EasyUI Combobox级联下拉列表的具体代码,供大家参考,具体内容如下

1. html代码

<fieldset>
  <legend>信息查询</legend>
  <div style="white-space: nowrap; padding: 5px;">
    <label>学校:</label>
    <input class="easyui-combobox" type="text" id="School" />
        
    <label>院系:</label>
    <input class="easyui-combobox" type="text" id="Faulty" />
        
    <label>专业:</label>
    <input class="easyui-combobox" type="text" id="Major" />
        
    <label>班级:</label>
    <input class="easyui-combobox" type="text" id="Class" />
              
  </div>
  <div style="white-space: nowrap; padding: 5px;">
    <label>区域:</label>
    <input class="easyui-combobox" type="text" id="Area" />
        
    <label>楼宇:</label>
    <input class="easyui-combobox" type="text" id="Building" />
        
    <label>楼层:</label>
    <input class="easyui-combobox" type="text" id="Floor" />
        
    <label>房间:</label>
    <input class="easyui-combobox" type="text" id="Room" />   
  </div>
</fieldset>

2.显示

EasyUI学习之Combobox级联下拉列表(2)

3.js代码

//获取组织机构数据
function GetDeptTreeData() {
  var queryDataDept = { layer: 3, isUsing: false }; //表示获取层数到院系,不启用的节点不显示
  $.ajax({
    type: 'post',
    url: '/Common/GetDetptTree',//指向后台的Action来获取当前用户的信息的Json格式的数据
    dataType: 'json',
    data: queryDataDept,
    success: function (treedata) {
      InitDepartment(treedata, 'School', 'Faulty', 'Major', 'Class');
    }
  });

}
//获取建筑机构数据
function GetBuildingTreeData() {
  $.ajax({
    type: 'post',
    url: '/Common/GetTreeData',//指向后台的Action来获取当前用户的信息的Json格式的数据
    dataType: 'json',
    data: { type: 1, layer: 4 },
    success: function (treedata) {
      InitDepartment(treedata, 'Area', 'Building', 'Floor', 'Room');
    }
  });
}
//初始化组织机构下拉列表框
function InitDepartment(treeData, schoolId, facultyId, majorId, classId) {
  //////////////////////////////////////级联下拉列表框//////////////////////////

  var localData = [{ "Id": 0, "Name": "全部" }];
  //学校下拉列表
  var School = $('#' + schoolId).combobox({
    valueField: 'Id', //值字段
    textField: 'Name', //显示的字段
    panelHeight: 'auto',
    required: true,
    editable: false,//不可编辑,只能选择
    onChange: function (school) {
      if (school != 0) {
        var data = [];
        $.each(treeData, function (schoolIndex, schoolData) {
          if (schoolData.id == school) {
            data.push({ 'Id': 0, 'Name': '全部' });
            $.each(schoolData.children, function (faultyIndex, faultyData) {
              data.push({ 'Id': faultyData.id, 'Name': faultyData.text });
            });
          }
        });
        Faulty.combobox("clear").combobox('loadData', data).combobox('select', 0);
      } else {
        Faulty.combobox("clear").combobox('loadData', localData).combobox('select', 0);
      }

      Major.combobox("clear").combobox('loadData', localData).combobox('select', 0);
      Class.combobox("clear").combobox('loadData', localData).combobox('select', 0);

    }
  });

  //院系下拉列表
  var Faulty = $('#' + facultyId).combobox({
    valueField: 'Id', //值字段
    textField: 'Name', //显示的字段
    panelHeight: 'auto',
    required: true,
    editable: false,//不可编辑,只能选择
    onChange: function (faculty) {

      if (faculty != 0) {

        var data = [];
        $.each(treeData, function (schoolIndex, schoolData) {
          $.each(schoolData.children, function (faultyIndex, faultyData) {
            if (faultyData.id == faculty) {
              data.push({ 'Id': 0, 'Name': '全部' });
              $.each(faultyData.children, function (majorIndex, majorData) {
                data.push({ 'Id': majorData.id, 'Name': majorData.text });
              });
            }
          });
        });

        Major.combobox("clear").combobox('loadData', data).combobox('select', 0);
      } else {
        Major.combobox("clear").combobox('loadData', localData).combobox('select', 0);
      }
      Class.combobox("clear").combobox('loadData', localData).combobox('select', 0);
    }
  });

  //专业下拉列表
  var Major = $('#' + majorId).combobox({
    valueField: 'Id', //值字段
    textField: 'Name', //显示的字段
    panelHeight: 'auto',
    required: false,
    editable: false,//不可编辑,只能选择
    onChange: function (major) {

      if (major != 0) {

        var data = [];
        $.each(treeData, function (schoolIndex, schoolData) {
          $.each(schoolData.children, function (faultyIndex, faultyData) {
            $.each(faultyData.children, function (majorIndex, majorData) {
              if (majorData.id == major) {
                data.push({ 'Id': 0, 'Name': '全部' });
                $.each(majorData.children, function (classIndex, classData) {
                  data.push({ 'Id': classData.id, 'Name': classData.text });
                });
              }
            });
          });
        });

        Class.combobox("clear").combobox('loadData', data).combobox('select', 0);
      } else {
        Class.combobox("clear").combobox('loadData', localData).combobox('select', 0);
      }
    }
  });

  //班级下拉列表
  var Class = $('#' + classId).combobox({
    valueField: 'Id', //值字段
    textField: 'Name', //显示的字段
    panelHeight: 'auto',
    required: false,
    editable: false,//不可编辑,只能选择
  });

  var schoolData = [];//创建学校数组
  schoolData.push({ 'Id': 0, 'Name': '全部' });
  $.each(treeData, function (index, data) {
    schoolData.push({ 'Id': data.id, 'Name': data.text });
  });

  School.combobox("clear").combobox('loadData', schoolData).combobox('select', 0);
  Faulty.combobox("clear").combobox('loadData', localData).combobox('select', 0);
  Major.combobox("clear").combobox('loadData', localData).combobox('select', 0);
  Class.combobox("clear").combobox('loadData', localData).combobox('select', 0);
}

//初始化建筑下拉列表框 ---- 已经弃用,使用InitDepartment来处理,不使用树形数据,根据父节点id获取数据
//function InitBuilding(treeData, areaId, buildingId, floorId, roomId) {
//  //////////////////////////////////////级联下拉列表框//////////////////////////

//  var localData = [{ "Id": 0, "Name": "全部" }];
//  //园区下拉列表
//  var Area = $("#" + areaId).combobox({
//    valueField: 'Id', //值字段
//    textField: 'Name', //显示的字段
//    url: '/Building/GetBuildingInfoListJson?parentid=0&type=1',
//    panelHeight: 'auto',
//    required: false,
//    editable: false,//不可编辑,只能选择
//    loadFilter: function (data) {
//      data.unshift({ "Id": 0, "Name": "全部", select: true });//在数组第一项添加数据
//      return data;
//    },
//    onChange: function (area) {
//      if (area != 0) {
//        $.get('/Building/GetBuildingInfoListJson', { type: 2, parentid: area }, function (data) {
//          data.unshift({ "Id": 0, "Name": "全部" });//在数组第一项添加数据
//          Building.combobox("clear").combobox('loadData', data).combobox('select', 0);
//          Floor.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//          Room.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//        }, 'json');
//      } else {
//        Building.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//        Floor.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//        Room.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//      }
//    }
//  });

//  //楼宇下拉列表
//  var Building = $('#' + buildingId).combobox({
//    valueField: 'Id', //值字段
//    textField: 'Name', //显示的字段
//    panelHeight: 'auto',
//    required: false,
//    editable: false,//不可编辑,只能选择
//    onChange: function (building) {

//      if (building != 0) {
//        $.get('/Building/GetBuildingInfoListJson', { type: 3, parentid: building }, function (data) {
//          data.unshift({ "Id": 0, "Name": "全部" });//在数组第一项添加数据
//          Floor.combobox("clear").combobox('loadData', data).combobox('select', 0);
//          Room.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//        }, 'json');
//      } else {
//        Floor.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//        Room.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//      }
//    }
//  });

//  //楼层下拉列表
//  var Floor = $('#' + floorId).combobox({
//    valueField: 'Id', //值字段
//    textField: 'Name', //显示的字段
//    panelHeight: 'auto',
//    required: false,
//    editable: false,//不可编辑,只能选择
//    onChange: function (floor) {

//      if (floor != 0) {
//        $.get('/Building/GetBuildingInfoListJson', { type: 4, parentid: floor }, function (data) {
//          data.unshift({ "Id": 0, "Name": "全部" });//在数组第一项添加数据
//          Room.combobox("clear").combobox('loadData', data).combobox('select', 0);
//        }, 'json');
//      } else {
//        Room.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//      }
//    }
//  });

//  //房间下拉列表
//  var Room = $('#' + roomId).combobox({
//    valueField: 'Id', //值字段
//    textField: 'Name', //显示的字段
//    panelHeight: 'auto',
//    required: false,
//    editable: false,//不可编辑,只能选择
//  });

//  Building.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//  Floor.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//  Room.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//}

//初始化其他下拉列表
//function BindDictItem(comboid, catlog) {
//  $('#' + comboid).combobox({
//    valueField: 'Value',
//    textField: 'Name',
//    url: '/Dictionary/GetComboBoxValue?name=' + catlog,
//    panelHeight: 'auto',
//    required: false,
//    editable: false,//不可编辑,只能选择
//    loadFilter: function (data) {
//      data.unshift({ "Value": '0', "Name": "全部" });//在数组第一项添加数据
//      return data;
//    },
//  });
//}

4.Json数据

EasyUI学习之Combobox级联下拉列表(2)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
实例分析javascript中的异步
Jun 02 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 #Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 #Javascript
jQuery实现6位数字密码输入框
Dec 29 #Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 #Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 #Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 #Javascript
jQuery实现遮罩层登录对话框
Dec 29 #Javascript
You might like
在线增减.htpasswd内的用户
2006/10/09 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python中的tuple元组详细介绍
2015/02/02 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
劳资人员岗位职责
2013/12/19 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
大学生在校表现评语
2014/12/31 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
2015国庆节宣传语
2015/07/14 职场文书
七年级上册生物的课件
2019/08/07 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang