首页 > 编程 > JavaScript > 正文

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

2019-11-19 18:11:55
字体:
来源:转载
供稿:网友

本文实例为大家分享了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.显示

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数据

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表