EasyUI学习之Combobox级联下拉列表(2)
网络编程 2021-07-04 19:20www.168986.cn编程入门
这篇文章主要为大家详细介绍了EasyUI学习之Combobox级联下拉列表的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了EasyUI Combobox级联下拉列表的具体代码,供大家参考,具体内容如下
1. html代码
<fieldset> <legend>信息查询</legend> <div style="white-space: nowrap; padding: 5px;"> <label>学校</label> <input class="easyui-bobox" type="text" id="School" /> <label>院系</label> <input class="easyui-bobox" type="text" id="Faulty" /> <label>专业</label> <input class="easyui-bobox" type="text" id="Major" /> <label>班级</label> <input class="easyui-bobox" type="text" id="Class" /> </div> <div style="white-space: nowrap; padding: 5px;"> <label>区域</label> <input class="easyui-bobox" type="text" id="Area" /> <label>楼宇</label> <input class="easyui-bobox" type="text" id="Building" /> <label>楼层</label> <input class="easyui-bobox" type="text" id="Floor" /> <label>房间</label> <input class="easyui-bobox" 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, suess: 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 }, suess: function (treedata) { InitDepartment(treedata, 'Area', 'Building', 'Floor', 'Room'); } }); } //初始化组织机构下拉列表框 function InitDepartment(treeData, schoolId, facultyId, majorId, classId) { //////////////////////////////////////级联下拉列表框////////////////////////// var localData = [{ "Id": 0, "Name": "全部" }]; //学校下拉列表 var School = $('#' + schoolId).bobox({ 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.bobox("clear").bobox('loadData', data).bobox('select', 0); } else { Faulty.bobox("clear").bobox('loadData', localData).bobox('select', 0); } Major.bobox("clear").bobox('loadData', localData).bobox('select', 0); Class.bobox("clear").bobox('loadData', localData).bobox('select', 0); } }); //院系下拉列表 var Faulty = $('#' + facultyId).bobox({ 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.bobox("clear").bobox('loadData', data).bobox('select', 0); } else { Major.bobox("clear").bobox('loadData', localData).bobox('select', 0); } Class.bobox("clear").bobox('loadData', localData).bobox('select', 0); } }); //专业下拉列表 var Major = $('#' + majorId).bobox({ 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.bobox("clear").bobox('loadData', data).bobox('select', 0); } else { Class.bobox("clear").bobox('loadData', localData).bobox('select', 0); } } }); //班级下拉列表 var Class = $('#' + classId).bobox({ 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.bobox("clear").bobox('loadData', schoolData).bobox('select', 0); Faulty.bobox("clear").bobox('loadData', localData).bobox('select', 0); Major.bobox("clear").bobox('loadData', localData).bobox('select', 0); Class.bobox("clear").bobox('loadData', localData).bobox('select', 0); } //初始化建筑下拉列表框 ---- 已经弃用,使用InitDepartment来处理,不使用树形数据,根据父节点id获取数据 //function InitBuilding(treeData, areaId, buildingId, floorId, roomId) { // //////////////////////////////////////级联下拉列表框////////////////////////// // var localData = [{ "Id": 0, "Name": "全部" }]; // //园区下拉列表 // var Area = $("#" + areaId).bobox({ // 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.bobox("clear").bobox('loadData', data).bobox('select', 0); // Floor.bobox("clear").bobox('loadData', localData).bobox('select', 0); // Room.bobox("clear").bobox('loadData', localData).bobox('select', 0); // }, 'json'); // } else { // Building.bobox("clear").bobox('loadData', localData).bobox('select', 0); // Floor.bobox("clear").bobox('loadData', localData).bobox('select', 0); // Room.bobox("clear").bobox('loadData', localData).bobox('select', 0); // } // } // }); // //楼宇下拉列表 // var Building = $('#' + buildingId).bobox({ // 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.bobox("clear").bobox('loadData', data).bobox('select', 0); // Room.bobox("clear").bobox('loadData', localData).bobox('select', 0); // }, 'json'); // } else { // Floor.bobox("clear").bobox('loadData', localData).bobox('select', 0); // Room.bobox("clear").bobox('loadData', localData).bobox('select', 0); // } // } // }); // //楼层下拉列表 // var Floor = $('#' + floorId).bobox({ // 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.bobox("clear").bobox('loadData', data).bobox('select', 0); // }, 'json'); // } else { // Room.bobox("clear").bobox('loadData', localData).bobox('select', 0); // } // } // }); // //房间下拉列表 // var Room = $('#' + roomId).bobox({ // valueField: 'Id', //值字段 // textField: 'Name', //显示的字段 // panelHeight: 'auto', // required: false, // editable: false,//不可编辑,只能选择 // }); // Building.bobox("clear").bobox('loadData', localData).bobox('select', 0); // Floor.bobox("clear").bobox('loadData', localData).bobox('select', 0); // Room.bobox("clear").bobox('loadData', localData).bobox('select', 0); /
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程