使用EasyUI的combobox控件实现级联搜索条件
昨天接到一个需求，是做一个简单的查询页面，相对于目前公司系统有一个新的东西，需要实现多级机构的级联查询。公司系统的前端框架采用的是jquery-easyui-1.4.3，
在以前接触到的系统中，前端做的不是太多，有采用velocity+html的，实现这种级联倒是做过，只是没怎么记录。现在使用easyui，需要学习一下。
看了些关于easyui的东东，打算采用combobox的input来实现这个级联查询功能。
首先，combobox 实现 动态加载 选项的方法有： reload（url） 、loadData（data）---data是json格式。这点比较方便实现级联，这里要注意，关于cache的东西，我遇到一个问题就是公司系统的查询公用方法涉及到cache的，该方法会根据传入的查询sql名去判断是否直接从cache里取查询结果，而没有把传入的查询条件也作为区别点去判断是否需要重新查询数据库。因此公司系统的这个方法 只适用于一些固定的在数据库里配置的下拉框选择项的获取功能，对于我这种需要动态获取 下拉框选项的 功能不支持。这一点导致了我把reload 和 loadData都写过一遍，多做了无用功啊。最后发现两种方法都有问题之后，我才开始去查找问题，才发现原来是公用方法的问题。
以上 都是前话。现在来说 使用EasyUI的combobox控件实现级联搜索条件 的具体操作。
首先，要使用EasyUI，需要下载EasyUI的开源包。把包解压放到自己的工程里去，在jsp页面把EasyUI资源引入进去，这样我们才能在自己的页面用EasyUI的东西。
1 <link href="${cpath}/common/jquery-easyui/themes/cupertino/easyui.css" rel="stylesheet" type="text/css" media="screen" id="easyuiTheme"> 2 <link href="${cpath}/common/jquery-easyui/themes/icon.css" rel="stylesheet" type="text/css" media="screen"> 3 <link href="${cpath}/common/jquery-easyui/themes/icon_my.css" rel="stylesheet" type="text/css" media="screen"> 4 5 <script src="${cpath}/common/jquery-easyui/jquery-1.8.0.min.js" charset="utf-8" type="text/javascript"></script> 6 <script src="${cpath}/common/jquery-easyui/jquery.easyui.min.js" charset="utf-8" type="text/javascript"></script> 7 <script src="${cpath}/common/jquery-easyui/locale/easyui-lang-zh_CN.js" charset="utf-8" type="text/javascript"></script>
然后，就是写自己的页面，在页面里添加自己需要的元素，关于要使用combobox的控件的元素，添加class="easyui-combobox"，（这里采用input）
1 <table> 2 <tr> 3 <td class="td_left"> 4 分公司名称： 5 </td> 6 <td> 7 <input name="fengongsi" id="fengongsi" class="easyui-combobox" value="" style="width: 220px;"/> 8 </td> 9 <td class="td_left"> 10 三级机构名称： 11 </td> 12 <td> 13 <input name="sanji" id="sanji" class="easyui-combobox" value="" style="width: 220px;"/> 14 </td> 15 <td class="td_left"> 16 四级机构名称： 17 </td> 18 <td> 19 <input name="siji" id="siji" class="easyui-combobox" value="" style="width: 220px;"/> 20 </td> 21 </tr>
其次，编写js方法了。不管是直接在页面写js代码 还是在页面引入js文件，都一样，只是写法不一样，个人喜好把页面和js分开，感觉这样更好，呵呵。
<script type="text/javascript" src="XXXX.js"></script>
如下：
1 $(function() { 2 //分公司查询 3 $('#fengongsi').combobox({ 4 valueField:'ID', 5 textField:'TEXT', 6 filter:comboboxFilter, 7 cache: false, 8 url: tContextPath + '/common/getCodeNameByIbatis.do?SELECT_SQL_NAME=queryFenGongSiSql' 9 ,onSelect: function (record) { 10 var a = record.ID; 11 $.ajax({ 12 type: "POST", 13 url:（你自己的查询action） , 14 cache: false, 15 dataType : "json", 16 success: function(data){ 17 $("#sanji").combobox("loadData",data); 18 } 19 }); 20 } 21 22 }); 23 //选择分公司时清空三级四级机构 24 $('#fengongsi').combobox({ 25 onChange:function(a,b){ 26 //分公司赋值 27 $('#sanji').combobox('setValue',"");//等价于下两行 28 $("#sanji").attr("value",""); 29 $('#sanji').combobox('select',""); 30 //四级机构赋空值 31 $('#siji').combobox('setValue',"");//等价于下两行 32 $("#siji").attr("value",""); 33 $('#siji').combobox('select',""); 34 35 $("#sanji").combobox("loadData",{}); 36 $("#siji").combobox("loadData",{}); 37 //三级机构查询 38 // $('#sanji').combobox('reload',tContextPath + '/common/getCodeNameByIbatis.do?SELECT_SQL_NAME=querySanJiSql&fengongsi='+a); 39 // $('#siji').combobox('reload',tContextPath + '/common/getCodeNameByIbatis.do?SELECT_SQL_NAME=querySiJiSql&fengongsi='+a); 40 41 } 42 }); 43 //三级机构查询 44 $('#sanji').combobox({ 45 valueField:'ID', 46 textField:'TEXT', 47 cache: false, 48 filter:comboboxFilter 49 ,onSelect: function (record) { //三级机构联动分公司 50 var a = record.ID; 51 $.ajax({ 52 type: "POST", 53 url:（你自己的查询action链接）, 54 cache: false, 55 dataType : "json", 56 success: function(data){ 57 $("#siji").combobox("loadData",data); 58 } 59 }); 60 } 61 }); 62 //三级机构联动分公司时数据初始化 63 $('#sanji').combobox({ 64 onChange:function(a,b){ 65 var fen = a.substr(0,4); 66 //四级机构赋空值 67 $('#siji').combobox('setValue',"");//等价于下两行（解决浏览器兼容问题） 68 $("#siji").attr("value",""); 69 $('#siji').combobox('select',""); 70 71 $("#siji").combobox("loadData",{}); 72 } 73 }); 74 //四级机构查询 75 $('#siji').combobox({ 76 valueField:'ID', 77 textField:'TEXT', 78 cache: false, 79 required:false, 80 filter:comboboxFilter 81 }); 82 });
至于怎么获取数据，就不写了，只要你在 写的从数据库或者从配置文件读取数据的action里，把数据组转化成json格式就OK（转化可以用fastjson包里的公用方法JSON.toJSONString(list)将查询结果转化成字符串，然后再在action层转json类型），json的键值对的名称跟在js里写的valueField、textField对应。
这样，就能实现联动的检索条件了。
（）
