最近在做ITOO高校云平台考评系统考生模块儿,这部分的功能主要是实现为上课班学生配置考试安排,实现上课班学生与对应的考试,考场,试卷的添加,删除,修改。其中有一个业务是这样的,为查询到的班级及学院,添加考试和考场,需要从页面获取学院和班级id,查询该学院下的考试,通过考试查询该考试下的所有考场。
首先获取页面的值传,然后通过Ajax提交参数到controller,后台返回json,转变Json格式传递给combobox,通过combobox的selecton方法实现连查。
HTML中主要代码以及对应的js如下
@* 下一步,添加考试和考场信息 *@ <div id="AddExamRoomPartial"> @{Html.RenderPartial("../../Views/Examinee/AddExamRoomPartial");} </div> <script type="text/javascript"> <!--弹出框,添加考试和考场 --> $("#btnNext").click(function () { //选中的行 var rows = $('#dg').datagrid('getSelections'); var strId; //循环给提交删除参数赋值(考生ID) $.each(rows, function (i, n) { if (i == 0) { strId = "ExamineeId=" + n.ExamineeId; } else { strId += "&ExamineeId=" + n.ExamineeId; } }); //判断是否选择行 if (!rows || rows.length == 0) { $.messager.alert('提醒', '请至少要选择一个班级!', 'Info'); return; } else { //弹出添加考试考场 $('#AddExamRoom').dialog('open').dialog('setTitle', "绑定考试和考场"); var strOrganizationName; //循环给提交删除参数赋值(考生ID) $.each(rows, function (i, n) { if (i == 0) { strOrganizationName = "organizationName=" + n.organizationName; } else { strOrganizationName += "&organizationName=" + n.organizationName; } }); //提交 $.ajax({ type: "POST", async: false, url: "/Examinee/QueryExamByCollege", data: strOrganizationName, success: function (result) { $("#ChooseExam").combobox({ //onLoadSuccess: onLoadSuccess data: result, valueField: 'ExamId', textField: 'ExamName', formatter: function (result) { return "<a value=\"" + result.ExamId + "\" style=\"height:5px;\">" + result.ExamName + "</a>"; }, method: "post", onSelect: function (rec) { var url = '/Examinee/QueryExamRoomPlanByExamId?ExamId=' + rec.ExamId; $('#ChooseClassRoom').combobox('reload', url); } }); } }); } }); </script>
注意:对返回Json的返回值进行格式化。
formatter: function (result) { return "<a value=\"" + result.ExamId + "\" style=\"height:5px;\">" + result.ExamName + "</a>"; },
这个问题解决的时候用了很长时间,如果没有格式的设定,它将无法正常显示在下拉框中,从问题模糊的,到越来越明确,需要一个学习的过程,学习如何使用fiebug调试,更深入的了解MVC,AJAX,JS,EasyUI。