EasyUI +MVC实现combobox连查

标签：

      最近在做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。

EasyUI +MVC实现combobox连查

标签：

原文地址：http://blog.csdn.net/lxy344x/article/details/46531657