成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

本文實例為大家分享了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數據

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持綠夏網。