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

本文实例为大家分享了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) {
  //////////////////////////////////////级联下拉列表框//////////////////////////								 
 1/5    1 2 3 4 5 下一页 尾页