【ITOO】---easyUI的Combobox实现级联查询

    这个问题真的是困扰了我好久啊！查了好多的资料都没有解决！不过多亏了老盖的帮忙，换了一个方法终于解决了！下面就让我来还原一下当时的情况！

    在做ITOO新生系统之初，我负责学生核对信息界面，有一个编辑按钮，点击后学生信息总是显示不完整！如下图：

    所以我就开始各种调试，发现是js里面的方法写的不对，就完善了一下可以让信息显示完整，代码如下：

//编辑学生编辑按钮
$("#edit").bind("click").click(
    function EditStudent() {
        var row = $('#dg').datagrid('getSelected');
        //var row = $('#dg').datagrid('getSelections');
        if (!row || row.length == 0) {
            $.messager.alert('提醒', '请至少要选择一行数据', 'Info');
            return;
        }
        //如果选中某一行则弹出编辑学生对话框
        if (row) {
            $('#diaEdit').dialog({
                title: "修改学生信息",
                width: 400,
                height: 380,
                iconCls: 'icon-edit',                 //弹出框图标
                modal: true,
            });
            $('#diaEdit').dialog('open');
 
            //打开编辑学生对话框
            $("#edittxtCandidateID").val(row.CandidateID);     //获取考生号文本框的值
            $("#edittxtName").val(row.Name);     //姓名文本框
            //$("#edittxtSex").val(row.Sex);      //性别文本框
            $('#edittxtSex').combobox('setValue', row.Sex);
            $("#edittxtIdentityCardID").val(row.IdentityCardID); //身份证号文本框
            //学院文本框
            $('#edittxtDepartment').combobox('setValue', row.Department);        
            //宿舍文本框          
            $('#edittxtDormitory').combobox('setValue', row.StudentDorm);
 
            $("#edittxtCollege").val(row.College);     //学校文本框 
 
            $("#edittxtLevel").combobox('setValue', row.Level);   //级别文本框
 
            //显示专业内容，根据学院查询专业赋到下拉框中，李少然 2016年1月3日14:22:34
            $('#editMajor').combobox('setValue', row.Major);
 
            //班级文本框 ,根据专业查询班级赋到下拉框中 李少然 2016年1月3日
            $('#editClass').combobox('setValue', row.StudentClass);        
        }
    });

     信息显示完整了，可是另一个问题又来了：点击下拉框是白版，没有选项！而且因为我的需求是需要点击学院可以将该学院所对应的专业附到下拉框中，点击专业可以将该专业对应的班级附到下拉框中！如果下拉框是白版，是根本不能实现这个需求的！。

     开始时这个功能是应用了easyUI的combobox的一个data-options属性的onselect方法，也就是选中后进行查询，代码如下：

     

<input id="edittxtDepartment" 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.Department;                       
                      $('#editMajor').combobox('reload', url); 
                     }
            "/>

    如果用这种方法的话,造成的一个现象是：我最开始解决的那个将datagrid中的一行数据附到对话框中但是却显示不全的问题就又再次出现了。（按照这个方法的原理，用onselect也可以，但是不知道为什么显示数据和显示下拉框不能共存，希望广大网友可以指点一二！） 更重要的一点是：用onselect实现的级联，是必须点了学院按钮才会有专业的选项，而不能实现直接点专业的下拉框按钮就会有专业的选项！！！ 那么怎样才可以又可以把数据附到对话框，又可以实现combobox的级联查询，又可以随便点击下拉框按钮，下拉框都会有对应的数据出现呢？

这时老盖就改了一个思路，用了一个onchange方法，那么所有的问题就迎刃而解了！

    看代码：

    

 <input id="edittxtDepartment" class="easyui-combobox"       name="Department"
            data-options="                
             url:'/MaintainStudent/GetDepartmentName',
                    method:'get',
                    valueField:'DepartmentName',
                    textField:'DepartmentName',
                    panelHeight:'auto',
            onChange: function (newValue, oldValue) {
                    $('#editMajor').combobox({
                        url: '/MaintainStudent/GetMajor?DepartmentName=' + newValue,
                        valueField: 'MajorName',
                        textField: 'MajorName',
                    })
                }
            "/>

    大家可以明显看到区别，就是有了newvalue和oldvalue的应用，也就是相当于当对话框load的时候，你写的js给combobox赋值，然后当你点击下拉框的时候，最开始load的时候给combobox赋的值就是oldvalue，而我们新选中的或combobox的value就是新的值，这样就可以完成既可以赋值，又可以实现级联查询的功能！

    效果如下：