EasyUI+Javascript+MVC 实现三级级联（一）

     三级联动其实就是做了一个这样的事情，当我们触发这个事件时，紧接着下一个事件就能触发，在这个例子中拿下拉框讲一个三级联动的小实例。

效果图：

     当我们选择学校名字的时候，点击学院的下拉框就会出现相匹配的学院选择项

     当我们选择学院名称后，又会出现相匹配的专业选项

     当我们选择专业选项的时候，同样的会出现相同的班级选项

 

     如果没有进行选择，则选择下拉框的时候将不会出现相应的选项。

下面我们看一下代码是怎么样实现的。

一、前台界面

<span style="font-family:KaiTi_GB2312;font-size:18px;"> @*学校*@
    <div class="fitem">
        <label class="fontstyle" style="margin-left: 0px;">学　　校：</label>
        <input id="txtCollege" class="easyui-combobox"
            name="College"
            data-options="
                    url:'/MaintainStudent/GetCollege',
                    method:'get',
                    valueField:'College',
                    textField:'College',
                    panelHeight:'auto'
            ">
    </div>

    @*学院*@
    <div class="fitem">
        <label class="fontstyle" style="margin-left: 0px;">学　　院：</label>
        <input id="txtDepartment" class="easyui-combobox"  
            name="Department"
            data-options="
                    url:'/MaintainStudent/GetDepartmentName',
                    method:'get',
                    valueField:'DepartmentName',
                    textField:'DepartmentName',
                    panelHeight:'auto',
             onSelect: function(rec){ 
                      var url = '/MaintainStudent/GetMajor?DepartmentName='+rec.DepartmentName; 
                      $('#txtMajor').combobox('reload', url);  
                     } 
            " />
    </div>

    @*专业*@
    <div class="fitem">
        <label class="fontstyle" style="margin-left: 0px;">录取专业：</label>
        <input id="txtMajor" class="easyui-combobox"  editable="false"
             name="Major" data-options="
            url:'/MaintainStudent/GetMajor',
            method:'get',
            valueField:'MajorName',
            textField:'MajorName',
            panelHeight:'auto',
            onSelect: function(rec){ 
                      var url = '/MaintainStudent/GetClass?MajorName='+rec.MajorName; 
                      $('#Class').combobox('reload', url);  
     
        }" />
           
    </div>
    
    @*班级*@
    <div class="fitem">
        <label class="fontstyle" style="margin-left: 0px;">班　　级：</label>
        <input id="Class" class="easyui-combobox" editable="false"
            name="Class"
            data-options="
                    url:'/MaintainStudent/getClass',
                    method:'get',
                    valueField:'ClassNumber',
                    textField:'ClassNumber',
                    panelHeight:'auto',  ">
    </div></span>

二、前台利用到了些Javascript代码

<span style="font-family:KaiTi_GB2312;font-size:18px;">//弹出框里确定按钮触发的事件
function AddStudent() {
    if ($("#txtCandidateID").val() == "") {
        $.messager.alert('提醒', '考生号不能为空', 'Info');
        return;
    }
    if ($("#txtName").val() == "") {
        $.messager.alert('提醒', '姓名不能为空', 'Info');
        return;
    }
    if ($("#txtIdentityCardID").val() == "") {
        $.messager.alert('提醒', '身份证号不能为空', 'Info');
        return;
    }
    
    var txtCandidateID = $("#txtCandidateID").val();
    var txtName = $("#txtName").val();
    var txtSex = $("#txtSex").combobox('getText');
    var txtIdentityCardID = $("#txtIdentityCardID").val();
    var txtCollege = $("#txtCollege").combobox('getText');
    var txtDepartment = $("#txtDepartment").combobox('getText');
    var txtMajor = $("#txtMajor").combobox('getText')
    var txtClass = $("#Class").combobox('getText');
    var txtDormitory = $("#txtDormitory").combobox('getText');
    var txtLevel = $("#txtLevel").combobox('getText');

    //将要添加的学生信息数据获取传给url路径下

    $.ajax({  
        url: "/MaintainStudent/AddStudentReload",  
        data:{txtCandidateID: txtCandidateID, txtName: txtName, txtSex: txtSex, txtIdentityCardID: txtIdentityCardID, txtCollege: txtCollege, txtDepartment: txtDepartment, txtMajor: txtMajor, txtClass: txtClass, txtDormitory: txtDormitory, txtLevel: txtLevel},  
        type: "POST",  
        dataType:'json',  
        success:function () {
            $("#dg").datagrid("reload");
            $.messager.alert("提示！", "信息添加成功！");
            //$('#diaAdd').dialog('close');
        }  
       
    });
    $('#diaAdd').dialog('close');</span>

三、由于制作这块的时候，在最开始的主界面弹出的时候，我加载了弹出框视图，所以在弹出框弹出的时候重新加载获取下弹出框的数据

<span style="font-family:KaiTi_GB2312;font-size:18px;">// 下拉框选择控件，下拉框的内容是动态查询数据库信息  
// 在加载服务器数据之前改变http请求参数的值
$(function () {
    //添加学生弹出框级联—根据学院名称查询专业
    $('#txtDepartment').combobox({
        onChange: function (newValue, oldValue) {
            // 使用新的URL重新载入列表数据
            $('#txtMajor').combobox('reload', '/MaintainStudent/GetMajor?DepartmentName=' + newValue);
        }
    });

    //添加学生弹出框级联—根据专业名称查询班级
    $('#txtMajor').combobox({
        onChange: function (newValue, oldValue) {
            // 使用新的URL重新载入列表数据
            $('#Class').combobox('reload', '/MaintainStudent/GetClass?MajorName=' + newValue);
        }
    });

    //添加学生弹出框级联—根据班级查询宿舍
    $('#Class').combobox({
        onChange: function (newValue, oldValue) {
            // 使用新的URL重新载入列表数据
            $('#txtDormitory').combobox('reload', '/MaintainStudent/GetDormData?ClassNumber=' + newValue);
        }
    });


});</span>

     好了，前台的部分代码也就展示到这里了，请看系列博客，介绍后台代码实现。