EasyUI學(xué)習(xí)之Combobox級聯(lián)下拉列表(2)
更新時(shí)間：2016年12月29日 15:49:29 作者：木子果果
這篇文章主要為大家詳細(xì)介紹了EasyUI學(xué)習(xí)之Combobox級聯(lián)下拉列表的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了EasyUI Combobox級聯(lián)下拉列表的具體代碼，供大家參考，具體內(nèi)容如下
1. html代碼
<fieldset>
<legend>信息查詢</legend>
<div style="white-space: nowrap; padding: 5px;">
<label>學(xué)校：</label>
<input class="easyui-combobox" type="text" id="School" />
<label>院系：</label>
<input class="easyui-combobox" type="text" id="Faulty" />
<label>專業(yè)：</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>區(qū)域：</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代碼
//獲取組織機(jī)構(gòu)數(shù)據(jù)
function GetDeptTreeData() {
var queryDataDept = { layer: 3, isUsing: false }; //表示獲取層數(shù)到院系，不啟用的節(jié)點(diǎn)不顯示
$.ajax({
type: 'post',
url: '/Common/GetDetptTree',//指向后臺(tái)的Action來獲取當(dāng)前用戶的信息的Json格式的數(shù)據(jù)
dataType: 'json',
data: queryDataDept,
success: function (treedata) {
InitDepartment(treedata, 'School', 'Faulty', 'Major', 'Class');
}
});
}
//獲取建筑機(jī)構(gòu)數(shù)據(jù)
function GetBuildingTreeData() {
$.ajax({
type: 'post',
url: '/Common/GetTreeData',//指向后臺(tái)的Action來獲取當(dāng)前用戶的信息的Json格式的數(shù)據(jù)
dataType: 'json',
data: { type: 1, layer: 4 },
success: function (treedata) {
InitDepartment(treedata, 'Area', 'Building', 'Floor', 'Room');
}
});
}
//初始化組織機(jī)構(gòu)下拉列表框
function InitDepartment(treeData, schoolId, facultyId, majorId, classId) {
//////////////////////////////////////級聯(lián)下拉列表框//////////////////////////
var localData = [{ "Id": 0, "Name": "全部" }];
//學(xué)校下拉列表
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);
}
});
//專業(yè)下拉列表
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 = [];//創(chuàng)建學(xué)校數(shù)組
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);
}
//初始化建筑下拉列表框 ---- 已經(jīng)棄用，使用InitDepartment來處理，不使用樹形數(shù)據(jù)，根據(jù)父節(jié)點(diǎn)id獲取數(shù)據(jù)
//function InitBuilding(treeData, areaId, buildingId, floorId, roomId) {
// //////////////////////////////////////級聯(lián)下拉列表框//////////////////////////
// var localData = [{ "Id": 0, "Name": "全部" }];
// //園區(qū)下拉列表
// 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 });//在數(shù)組第一項(xiàng)添加數(shù)據(jù)
// return data;
// },
// onChange: function (area) {
// if (area != 0) {
// $.get('/Building/GetBuildingInfoListJson', { type: 2, parentid: area }, function (data) {
// data.unshift({ "Id": 0, "Name": "全部" });//在數(shù)組第一項(xiàng)添加數(shù)據(jù)
// 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": "全部" });//在數(shù)組第一項(xiàng)添加數(shù)據(jù)
// 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": "全部" });//在數(shù)組第一項(xiàng)添加數(shù)據(jù)
// 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": "全部" });//在數(shù)組第一項(xiàng)添加數(shù)據(jù)
// return data;
// },
// });
//}
4.Json數(shù)據(jù)
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery使用EasyUi實(shí)現(xiàn)三級聯(lián)動(dòng)下拉框效果
- EasyUI學(xué)習(xí)之Combobox下拉列表(1)
- Jquery Easyui自定義下拉框組件使用詳解（21）
- jQuery Easyui 下拉樹組件combotree
- jQuery+easyui中的combobox實(shí)現(xiàn)下拉框特效
- jQuery Easyui DataGrid點(diǎn)擊某個(gè)單元格即進(jìn)入編輯狀態(tài)焦點(diǎn)移開后保存數(shù)據(jù)
- jQuery EasyUI學(xué)習(xí)教程之datagrid點(diǎn)擊列表頭排序
- EasyUI，點(diǎn)擊開啟編輯框，并且編輯框獲得焦點(diǎn)的方法
- easyUI下拉列表點(diǎn)擊事件使用方法
相關(guān)文章
jQuery基于閉包實(shí)現(xiàn)的顯示與隱藏div功能示例
這篇文章主要介紹了jQuery基于閉包實(shí)現(xiàn)的顯示與隱藏div功能,結(jié)合實(shí)例形式分析了jQuery使用閉包實(shí)現(xiàn)的div顯示及隱藏相關(guān)判定與函數(shù)使用技巧,需要的朋友可以參考下2018-06-06
JQuery AJAX 中文亂碼問題解決，需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了jQuery提示框插件SweetAlert用法,結(jié)合實(shí)例形式分析了SweetAlert提示框插件基本功能、使用方法及配置項(xiàng)設(shè)置方法,需要的朋友可以參考下2019-08-08
基于jquery trigger函數(shù)無法觸發(fā)a標(biāo)簽的兩種解決方法
下面小編就為大家分享一篇基于jquery trigger函數(shù)無法觸發(fā)a標(biāo)簽的兩種解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
JQuery中Ajax()的data參數(shù)類型實(shí)例分析
這篇文章主要介紹了JQuery中Ajax()的data參數(shù)類型,結(jié)合實(shí)例形式較為詳細(xì)的分析了ajax方法中data的具體類型,需要的朋友可以參考下2015-12-12
本文為大家介紹下使用JQuery寫的動(dòng)態(tài)樹，具體實(shí)現(xiàn)如下，感興趣的朋友可以學(xué)習(xí)下2013-07-07
這篇文章主要為大家詳細(xì)介紹了jquery樹形插件zTree高級使用教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
jQuery插入節(jié)點(diǎn)和移動(dòng)節(jié)點(diǎn)用法示例(insertAfter、insertBefore方法)
這篇文章主要介紹了jQuery插入節(jié)點(diǎn)和移動(dòng)節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了insertAfter和insertBefore方法針對頁面元素節(jié)點(diǎn)操作的使用技巧,需要的朋友可以參考下2016-09-09
jQuery結(jié)合jQuery.cookie.js插件實(shí)現(xiàn)換膚功能示例
這篇文章主要介紹了jQuery結(jié)合jQuery.cookie.js插件實(shí)現(xiàn)換膚功能,結(jié)合實(shí)例形式分析了jQuery.cookie.js插件的常用函數(shù)功能及實(shí)現(xiàn)換膚功能的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
本文使用jquery.form.js解決提交之后，頁面發(fā)生跳轉(zhuǎn)，在一個(gè)空白頁面上顯示了后端返回的json數(shù)據(jù)問題，需要的朋友參考下2017-06-06