不看帮助寸步难行,帮助是站在巨人的肩膀上。
——题记
接上一篇文章,上一篇用的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'" />
[{ "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事件触发的做法,它自己也有一套自己的触发事件。通过这件事情我也深刻理解到,想问题要想全面点,多看官网的帮助,有利于我们的成长。
下篇博客继续,Combobox,DropDownList(Html,Web控件)的级联问题,敬请期待。