考试系统——可输入并自动匹配的下拉框(二)——JQuery Easy UI框架

原创 2013年12月04日 08:10:32

             不看帮助寸步难行,帮助是站在巨人的肩膀上。

                                                                                                                                                                                                ——题记

          接上一篇文章,上一篇用的Jquery Easy UI框架把自动匹配做出来了,但是没有级联,本篇文章主要说一下级联。

        继上一次的实现,继续往下做,通过AJax传值,实现级联效果,但是遇到一个问题,能绑定到数据但下拉框显示不出来,它显示在一个隐藏的控件中;如果用一般的Select控件也能显示出来。所以可能是格式的问题。

 

        调试了很长时间还是出不来,于是就找了小崔师哥,小崔师哥又翻出官网上的帮助文档,看了看,很快给我们解决了,原来就是传值的格式问题导致的。还发现原来这个控件就有选择下拉框内容的事件,于是就推翻了重来。帮助就是站在巨人的肩膀上,多看帮助,少走弯路。


 一、先来说说原来是如何实现的?

           控件代码:

//学院控件
 <select runat="server"  id="College"   class="easyui-combobox" name="College"  onchange = "changeitem(this)" ></select>
//课程控件
<select  id="Course"   class="easyui-combobox" name="Course"  ></select>


    由于select控件是Html控件,于是加上runat='Server',即在后台也可以用了。于是学院代码是在后台直接绑定上的,绑定上显示数据了。但是级联课程的时候虽然能绑定出来数据但是不能显示出来,只能显示在其框架的一个隐藏的控件中。如果用正常的Select控件,能绑定上。所以我感觉问题就出在了Easy UI的框架上。

 

绑定实现:

 function changeitem(field1,field2) {
         
            //Easy UI的实现方式,不能通过document.getElementById获取值
            var College = field1;
            // var Course = document.getElementById("Course");
            if ("" != field1) {
                 var collegevalue = field1;//得到ID
                 //绑定考试名称,使用json数据
                 $.ajax({
                     type: "get",
                     url: "Linkage.ashx?CollegeID=" + escape(collegevalue) + "&t=" + new Date().getTime(),
                     success: function (strJson) {
                         
                     bindCourse(strJson);
                     

                     },
                     error: function (XmlHttpRequest, textStatus, errorThrown) {
                         alert(XmlHttpRequest.responseText);
                     }
                 });

            }

        }

        //解析json数据,绑定课程下拉列表  
        //将json数据绑定到DropDownList  
        function bindCourse(strJson) {

            var dataArray = eval(strJson);
         
            $("#Course").empty(); //清空学期下拉框信息  
            //依次遍历传回的json每条数据  
            for (var i = 0; i < dataArray.length; i++) {
                //传递参数 

                $("#Course").append($("<option value='" + dataArray[i].CourseID + "'>" + dataArray[i].CourseName + "</option>"));
              
            }
        }

         原来Easy ui本来就有其本身的一套框架,它的绑定数据也有其自己的实现方式,是自动绑定的,我自己又给它写了一套绑定方式,它不能识别。那时候只想到只要传过值去就可以了,没想到问题重重。

 

二、Easy UI的实现方式:

          控件代码:


//第一个学院的绑定实现
<input  class="easyui-combobox" name="language"  data-options=" 
                    	                        url: '../../Linkage/BindCollege.ashx',
				                        method: 'get',
				                        valueField: 'CollegeID',
				                        textField: 'CollegeName',
				                        panelWidth: 350,
				                        panelHeight: 'auto',
                                        onSelect: function(rec){   
                       
                                                var url = '../../Linkage/Linkage.ashx?CollegeID='+rec.CollegeID;   
                                                $('#Course').combobox('reload', url); 
                                            }
                                            "  />
//第二个课程,只需要绑定上ID值和课程名称就可以了。
<input id="Course" class="easyui-combobox" data-options="valueField:'CourseID',textField:'CourseName',
				                        panelWidth: 350,
				                        panelHeight: 'auto',
                                                                                         "  />

 当然后台还是用的一般处理程序,通过Json转换。现在只要用简单的几句话就可以实现这么强大的功能了。


三、实现结果:


     

级联,可输入自动匹配效果:

   

四、Jquery Easy UI使用

   

  继承自$.fn.combo.defaults,通过$.fn.combobox.defaults覆盖默认值

 

combobox显示的是一个可以编辑的文本框和一个下拉列表.允许用户从里面选择一个或者是多个值,用户可以直接输入值到列表顶部,或者可以从列表选择一个或多个现有值.

 

创建两个依赖的combobox

<input id="cc1" class="easyui-combobox" data-options="   
        valueField: 'id',   
        textField: 'text',   
        url: 'get_data1.php',   
        onSelect: function(rec){   
            var url = 'get_data2.php?id='+rec.id;   
            $('#cc2').combobox('reload', url);   
        }" />  
<input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'" /> 


json数据转换示例:

[{   
    "id":1,   
    "text":"text1"  
},{   
    "id":2,   
    "text":"text2"  
},{   
    "id":3,   
    "text":"text3",   
    "selected":true  
},{   
    "id":4,   
    "text":"text4"  
},{   
    "id":5,   
    "text":"text5"  
}]  

//Json要根据上面格式转换:
Json.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":\"" + dt.Rows[i][j].ToString() + "\""); 



五、总结

         在做自动匹配,级联的过程中,由于Easy UI不熟悉,拿过框架来想到的就是传值的问题,传值的问题用的Ajax也不熟悉,就这样一点点克服。每走一步都是一个坎,一开始下拉选中时间触发不了,然后是IE6不兼容,现在是值获取了不显示。虽然现在的做法完全推翻了上次onChange事件触发的做法,它自己也有一套自己的触发事件。通过这件事情我也深刻理解到,想问题要想全面点,多看官网的帮助,有利于我们的成长。

 

     下篇博客继续,ComboboxDropDownListHtmlWeb控件)的级联问题,敬请期待。


版权声明:本文为博主原创文章,未经博主允许不得转载。

jquery easy ui中根据第一个下拉框框选中的值,设置第二个下拉框是否可以编辑

例如“报告交付方式”包含固定交付时,第二个下拉框不可编辑,反之可以编辑,具体代码如下 报告交付方式:     ,             onSelect:function(){       ...
  • wangjingjing1014
  • wangjingjing1014
  • 2016年11月29日 11:32
  • 1857

EasyUi模糊匹配搜索框combobox

现在项目当中很多已经应用了Jquery-easyUi这个界面框架了,所以,学习一点easyUI的常用工具就显得很重要了,现在介绍的就是我在项目中用到的easyUi的模糊匹配组合框combobox. ...
  • gaoshili001
  • gaoshili001
  • 2015年01月30日 11:41
  • 8200

easyui的combobox,自动搜索的下拉框

如图,输入关键字,左匹配检索 HTML代码 js获取数据 $('#userId').combobox({ prompt:'输入首关键字自动检索', ...
  • hgg923
  • hgg923
  • 2016年11月30日 20:57
  • 5910

jq easyui开发考试系统

好长时间没有写了,有时侯不知道该写xi
  • xzzhouhu
  • xzzhouhu
  • 2014年05月07日 22:35
  • 1273

利用jQuery是实现可输入(搜索)的下拉框

先看效果   功能:点击下拉框输入框时,自动显示下面的下拉列表,而且是根据输入框中输入的搜索添加,自动在后台查找,然后传到前台,展现页面。 用的的js: var $xialaSELEC...
  • MINEZHANGHAO
  • MINEZHANGHAO
  • 2013年10月23日 09:03
  • 7327

jquery可编辑的下拉框combox

  • 2014年08月01日 13:05
  • 80KB
  • 下载

easyui datagrid editor checkbox 单击事件

Easyui datagrid treegrid中可以为行追加checkbox元素,例如: $('#tt').treegrid({ url:'get_data.php', id...
  • liu251890347
  • liu251890347
  • 2014年08月26日 15:19
  • 10749

使用jQuery Autocomplete(自动完成)插件,结合ajax实现搜索框匹配

要实现如图所示效果,通过ajax,和Autocomplete完成匹配,整了好久,做一下记录。 实现过程如下 jsp页面:引入   添加标签用于绑定:  药店名称: auto...
  • qililong88
  • qililong88
  • 2016年07月18日 14:15
  • 15745

ui-select 拼音检索报错cannot read property 'tostring' of undefined

在使用ui-select的时候,用拼音检索报错。 点进去看文件,错误是出现在过滤器中 去看这个过滤器中代码,原因出现在画红框的地方,item[prop]转化为字符串的时候出错 查看ite...
  • okieM
  • okieM
  • 2017年06月13日 22:11
  • 399

JQuery+ajax实现类似百度搜索自动匹配功能

引言    我们接触最多的、用的最多的搜索引擎就是百度了,可以说现在我们的生活如果离开像百度、谷歌这样的搜索引擎还是我们的生活没有了方向,我们在使用的时候都有一个体验就是我我们在输入关键紫的时候,他会...
  • u013045437
  • u013045437
  • 2015年10月23日 18:39
  • 7649
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:考试系统——可输入并自动匹配的下拉框(二)——JQuery Easy UI框架
举报原因:
原因补充:

(最多只允许输入30个字)