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數據