ligerUI ComboBox多级菜单无刷新联动
//ligerUI ComboBox多级菜单联动
//此例菜单共六级
<span style="white-space:pre"> </span> //定义全局变量,保存菜单所选中的值
var university = null, college = null, major = null, grade = null, level = null, classes = null;
$("#ofUniversity").ligerComboBox({
url: "<?=site_url()?>" + 'student/student_getAllUniversity/',
valueFieldID: 'chooceUniversity',
valueField:"id",
textField:"name",
onSelected: function (uni) {
//uni为第一级菜单所选中的值
<span style="white-space:pre"> </span> // 通过ajax发送请求，加载下一个菜单数据
$.ajax({
<span style="white-space:pre"> </span>//默认为get方法传参
url: '<?=site_url()?>' + 'student/student_getCollege',
data: {
uni: uni
},
success: function(data){
<span style="white-space:pre"> </span> //解析返回的json数据
data = eval('(' + data + ')');
university = null;
college = null;
major = null;
grade = null;
level = null;
classes = null;
<span style="white-space:pre"> </span> //初始化菜单数据
liger.get('ofCollege').setData(data);//加载下一个菜单数据
liger.get('ofMajor').setData([{}]);
liger.get('ofGrade').setData([{}]);
liger.get('ofLevel').setData([{}]);
liger.get('ofClass').setData([{}]);
university = uni;
}
});
},
onButtonClick: function () {
classes = null;
}
});
$("#ofCollege").ligerComboBox({
data: null,
valueFieldID: 'chooceCollege',
valueField:"id",
textField:"name",
onSelected: function (col) {
if (university)
{
$.ajax({
url: '<?=site_url()?>' + 'student/student_getMajor',
data: {
college: col
},
success: function(data){
data = eval('(' + data + ')');
college = null;
major = null;
grade = null;
level = null;
classes = null;
liger.get('ofMajor').valueField.val("");
liger.get('ofMajor').setData(data);
liger.get('ofGrade').setData([{}]);
liger.get('ofLevel').setData([{}]);
liger.get('ofClass').setData([{}]);
college = col;
}
});
}
},
onButtonClick: function () {
classes = null;
}
});
$("#ofMajor").ligerComboBox({
data: null,
valueFieldID: 'chooceMajor',
valueField:"id",
textField:"name",
onSelected: function (maj) {
if (college)
{
$.ajax({
url: '<?=site_url()?>' + 'student/student_getGrade',
data: {
uni: university,
college: college,
major: maj
},
success: function(data){
data = eval('(' + data + ')');
major = null;
grade = null;
level = null;
classes = null;
liger.get('ofGrade').valueField.val("");
liger.get('ofGrade').setData(data);
liger.get('ofLevel').setData([{}]);
liger.get('ofClass').setData([{}]);
major = maj;
}
});
}
},
onButtonClick: function () {
classes = null;
}
});
$("#ofGrade").ligerComboBox({
data: null,
valueFieldID: 'chooceGrade',
valueField:"id",
textField:"name",
onSelected: function (gra) {
if (major)
{
$.ajax({
url: '<?=site_url()?>' + 'student/student_getLevel',
data: {
uni: university,
college: college,
major: major,
grade: gra
},
success: function(data){
data = eval('(' + data + ')');
grade = null;
level = null;
classes = null;
liger.get('ofLevel').valueField.val("");
liger.get('ofLevel').setData(data);
liger.get('ofClass').setData([{}]);
grade = gra;
}
});
}
},
onButtonClick: function () {
classes = null;
}
});
$("#ofLevel").ligerComboBox({
data: null,
valueFieldID: 'chooceLevel',
valueField:"id",
textField:"name",
onSelected: function (lev) {
if (grade)
{
$.ajax({
url: '<?=site_url()?>' + 'student/student_getClass',
data: {
uni: university,
college: college,
major: major,
grade: grade,
level: lev
},
success: function(data){
data = eval('(' + data + ')');
level = null;
classes = null;
liger.get('ofClass').setData(data);
level = lev;
}
});
}
},
onButtonClick: function () {
classes = null;
}
});
$("#ofClass").ligerComboBox({
data: null,
valueFieldID: 'chooceClass',
valueField:"id",
textField:"name",
onSelected: function (cla) {
if (!cla && !classes) return;
manager = window['g'] = $("#maingrid").ligerGrid({
height:'98%',
columns: [
{ display: '账号', name: 'account', minWidth: 180 ,editor: { type: 'text' }},
{ display: '姓名', name: 'name', minWidth: 180 ,editor: { type: 'text' }},
{ display: '性别', name: 'gender', minWidth: 180 ,editor: { type: 'text' }},
{ display: '联系电话', name: 'phone', minWidth: 180 ,editor: { type: 'text' }},
{ display: '所属大学', name: 'ofUniversity', minWidth: 60 ,
editor: {type:'select', data:universityList, valueColumnName:'id', displayColumnName:'name'},
render: function (item)
{
for(var i = 0; i < universityList.length; i++) {
if (universityList[i]['id'] == item.ofUniversity)
return universityList[i]['name'];
}
}
},
{ display: '详细', name: 'post', minWidth: 60 ,render: function (rowdata, rowindex, value)
{
var h = '<a class="l-button more" href="javascript:getRow('+rowdata.id+')">详细</a> ';
return h;
}
},
{ display: '操作', isSort: false, width: 180, render: function (rowdata, rowindex, value)
{
var h = '<a class="l-button reset" href="javascript:resetPass(' + rowdata.id +',\''+rowdata.name + '\')">密码重置</a> ';
h += '<a class="l-button del" href="javascript:deleteRow(' + rowdata.id +',\''+rowdata.name + '\')">删除</a> ';
return h;
}
}
],
toolbar: { items: [
{ text: '增加', click: addNewRow, img: '<?=site_url()?>LigerUI/lib/ligerUI/skins/icons/add.gif' },
]},
method:'POST',
async: 'true',
enabledEdit: false,
clickToEdit: false,
dataType: 'server',
dataAction: 'server',
url: SITE_URL +"student/student_loadStuInfo?uni="+university+'&major='+major+'&grade='+grade+'&level='+level+'&class='+cla+'&college='+college,
pageSize: 15 ,
rownumbers: true,
pageSizeOptions:[15, 30, 45],
width: '99.6%'
});
}
});
});OK, we done!