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

<fieldset> <legend>信息查询</legend> <div> <label>学校:</label> <input type="text" /> &nbsp;&nbsp;&nbsp;&nbsp; <label>院系:</label> <input type="text" /> &nbsp;&nbsp;&nbsp;&nbsp; <label>专业:</label> <input type="text" /> &nbsp;&nbsp;&nbsp;&nbsp; <label>班级:</label> <input type="text" /> &nbsp;&nbsp;&nbsp;&nbsp; </div> <div> <label>区域:</label> <input type="text" /> &nbsp;&nbsp;&nbsp;&nbsp; <label>楼宇:</label> <input type="text" /> &nbsp;&nbsp;&nbsp;&nbsp; <label>楼层:</label> <input type="text" /> &nbsp;&nbsp;&nbsp;&nbsp; <label>房间:</label> <input type="text" /> </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)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwjjyj.html