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

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

本文实例为大家分享了EasyUI Combobox级联下拉列表的具体代码，供大家参考，具体内容如下

1. html代码

信息查询

学校：

院系：

专业：

班级：

区域：

楼宇：

楼层：

房间：

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 (majorIndehttp://x, 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) {

http:// 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数据

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。