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 相关文章推荐
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
原生js实现抽奖小游戏
Jun 27 Javascript
js实现星星打分效果
Jul 05 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
深入了解php4(1)--回到未来
2006/10/09 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
django 模版关闭转义方式
2020/05/14 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
python中类与对象之间的关系详解
2020/12/16 Python
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
实习单位推荐信范文
2013/11/27 职场文书
党员公开承诺书范文
2014/03/25 职场文书
解除合同协议书
2014/04/17 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
个人维稳承诺书
2015/05/04 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
2016年安全月活动总结
2016/04/06 职场文书