最近在做一个EasyUi ComboBox的级别联动的效果,相关的内容如下:
EasyUI刚接触,JS之前学过,不过在怎么用这方面自己还是个新手,不过现在还在不断的学习,实践出真知,这是硬道理,直接上代码:
前台的HTML代码:
<span>学院:</span><input id="College" class="easyui-combobox" name="DropDownList_Course" style="width: 180px;"/>
@* 课程下拉框 *@
<span style="margin-left:5px;">课程:</span><input id="Course" class="easyui-combobox" name="DropDownList_Course" style="width: 180px;"data-options="valueField:'CourseId',textField:'CourseName'"/>
@* 考试下拉框 *@
<span style="margin-left:5px;">考试名称:</span><input id="ExamName" class="easyui-combobox" name="DropDownList_ExamName" style="width: 180px;" data-options="valueField:'ExamId',textField:'ExamName'" />
@* 场次下拉框 *@
<span style="margin-left:5px;">考场:</span><input id="ClassRoom" class="easyui-combobox" name="DropDownList_ExamRoom" style="width: 180px;" data-options="valueField:'VirtualExamRoomId',textField:'ClassRoomId'" />
下面是JS的代码:
$(function () {
//下拉级联框
//学院
var college = $('#College').combobox({
valueField: 'OrganizationPID',
textField: 'OrganizationName',
method:'get',
url: '/Examinee/QueryAllCollege',
onLoadSuccess:onLoadSuccess,
//查询所有学院
onSelect: function (rec) {
//根据学院查询所有课程
$.get('/Examinee/QueryCouserInfobyOrganizationId', { "OrganizationPID": rec.OrganizationPID }, function (data) {
course.combobox("clear").combobox('loadData', data);
examname.combobox("clear");
classname.combobox("clear");
}, 'json');
}
});
//课程
var enCollege = $('#College').combobox('getText');
var course = $('#Course').combobox({
valueField: 'CourseID',
textField: 'CourseName',
method: 'get',
onLoadSuccess:onLoadSuccess,
onSelect: function (rec) {
//根据课程ID查询考试名称
$.get('/Examinee/QueryExamByCourseId', { 'CourseID': rec.CourseID, 'OrganizationName': enCollege }, function (data) {
examname.combobox("clear").combobox('loadData', data);
classname.combobox("clear");
}, 'json');
}
});
//考试名称
var examname = $('#ExamName').combobox({
valueField: 'ExamId',
textField: 'ExamName',
method: 'get',
onLoadSuccess:onLoadSuccess,
onSelect: function (rec) { //查询考场信息
$.get('/Examinee/QueryClassRoomIdByExamId', { 'ExamId': rec.ExamId }, function (data) {
classname.combobox("clear").combobox('loadData', data);
});
}
});
//考场
var classname = $('#ClassName').combobox({
valueField: 'VirtualExamRoomId',
textField: 'ClassRoomId',
onLoadSuccess:onLoadSuccess
});
//初始化就选中第一个
function onLoadSuccess() {
var target = $(this);
var data = target.combobox("getData");
var options = target.combobox("options");
if (data && data.length > 0) {
var fs = data[0];
target.combobox("setValue", fs[options.valueField]);
}
}
});
好记性不如烂笔头,这些都是宝贵的经验。