Cascading search conditions using Easyui ComboBox controls

Yesterday received a demand, is to do a simple query page, relative to the current company system has a new thing, need to achieve multi-level mechanism of CASCADE query. The front-end frame of the corporate system is jquery-easyui-1.4.3,

In previous contact with the system, the front end does not do too much, there is the use of velocity+html, to achieve this cascade is done, but not how to record. Now, using Easyui, you need to learn a bit.

Read something about Easyui, intends to use the ComboBox input to achieve this CASCADE query function.

First, the ComboBox implements the dynamic load option in the following way: Reload (URL), loaddata (data)---data is in JSON format. This is more convenient to achieve cascading, here to note, about the cache of things, I encountered a problem is the company's system of query common method involves the cache, the method will be based on the query SQL name to determine whether to directly from the cache query results, Instead of passing the query criteria as a distinguishing point to determine whether the database needs to be re-queried. Therefore, this method of the company system only applies to some fixed in the database configuration of the dropdown box selection of the function, for me this need to dynamically get the dropdown box option is not supported. This led me to write reload and loaddata all over again, do not work hard ah. Finally found that both methods have problems, I began to look for problems, only to find that the original is a common method of the problem.

All of these are previous words. Now, use the Easyui ComboBox control to implement the Cascade search conditions.

First, to use Easyui, you need to download the Easyui open source package. Unpack the package into your own project, the JSP page to the Easyui resources into, so that we can in their own pages with Easyui things.

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>

View Code

Then, just write your own page, add the elements you need on the page, add class= "Easyui-combobox" to the elements of the control that you want to use the ComboBox in, and (here with input)

1<table>2<tr>3<tdclass= "Td_left" >4 Sub-company name:5</td>6<td>7<input name= "Fengongsi" id= "Fengongsi"class= "Easyui-combobox" value= "" style= "width:220px;" />8</td>9<tdclass= "Td_left" >Ten level Three organization name: One</td> A<td> -<input name= "Sanji" id= "Sanji"class= "Easyui-combobox" value= "" style= "width:220px;" /> -</td> the<tdclass= "Td_left" > - level Four organization name: -</td> -<td> +<input name= "Siji" id= "Siji"class= "Easyui-combobox" value= "" style= "width:220px;" /> -</td> +</tr>

View Code

Next, write the JS method. Whether it is directly on the page to write JS code or the introduction of the page JS file, are the same, just the wording is not the same, personal preferences to the page and JS separate, feel so better, hehe.

<script type= "Text/javascript" src= "Xxxx.js" ></script>

As follows:

1 $ (function () {2     //Branch Inquiries3$ (' #fengongsi '). ComboBox ({4Valuefield: ' ID ',5TextField: ' TEXT ',6 Filter:comboboxfilter,7Cachefalse,8Url:tcontextpath + '/common/getcodenamebyibatis.do? Select_sql_name=queryfengongsisql '9 , Onselect:function (record) {Tenvar a =record.id; One $.ajax ({ AType: "POST",   - URL: (your own query action), -Cachefalse,   theDataType: "JSON",   - success:function (data) { -$ ("#sanji"). ComboBox ("LoadData"), data);  -                       }   +                     }); -             } +  A         });  at      //three-level four-level organization is emptied when selecting a branch office -$ (' #fengongsi '). ComboBox ({ - Onchange:function (A, b) { -                    //Branch Assignment Value -$ (' #sanji '). ComboBox (' SetValue ', "");//equivalent to the next two lines -$ ("#sanji"). attr ("Value", "" "); in$ (' #sanji '). ComboBox (' Select ', ""); -                 //Four-level mechanism assignment null value to$ (' #siji '). ComboBox (' SetValue ', "");//equivalent to the next two lines +$ ("#siji"). attr ("Value", "" "); -$ (' #siji '). ComboBox (' Select ', ""); the                    *$ ("#sanji"). ComboBox ("LoadData"),{}); $$ ("#siji"). ComboBox ("LoadData"),{});Panax Notoginseng                 //Three level agency enquiry - //$ (' #sanji '). ComboBox (' Reload ', Tcontextpath + '/common/getcodenamebyibatis.do? Select_sql_name=querysanjisql&fengongsi= ' +a); the //$ (' #siji '). ComboBox (' Reload ', Tcontextpath + '/common/getcodenamebyibatis.do? Select_sql_name=querysijisql&fengongsi= ' +a); +  A               } the         }); +      //Three level agency enquiry -$ (' #sanji '). ComboBox ({ $Valuefield: ' ID ', $TextField: ' TEXT ', -Cachefalse,  - Filter:comboboxfilter the, Onselect:function (record) {//Three-level agency linkage Branch -var a =record.id;Wuyi $.ajax ({ theType: "POST",   - URL: (Your own query action link), WuCachefalse,   -DataType: "JSON",   About success:function (data) { $$ ("#siji"). ComboBox ("LoadData"), data);  -                       }   -                     }); -               } A         }); +      //three-level mechanism linkage branch when data initialization the$ (' #sanji '). ComboBox ({ - Onchange:function (A, b) { $var fen = a.substr (0,4); the                 //Four-level mechanism assignment null value the$ (' #siji '). ComboBox (' SetValue ', "");//equivalent to the next two lines (resolves browser compatibility issues) the$ ("#siji"). attr ("Value", "" "); the$ (' #siji '). ComboBox (' Select ', ""); -                   in$ ("#siji"). ComboBox ("LoadData"),{});  the               } the         }); About      //Four level Agency enquiry the$ (' #siji '). ComboBox ({ theValuefield: ' ID ', theTextField: ' TEXT ', +Cachefalse,  -Requiredfalse, the Filter:comboboxfilterBayi         }); the});

As for how to get the data, do not write, as long as you write from the database or from the configuration file read the data in the action, the data set into JSON format OK (conversion can be used in the Fastjson package of common methods json.tojsonstring (list) Convert the query result to a string, and then to the action layer to JSON type, the name of the JSON key-value pair with the JS write Valuefield, TextField corresponding.

In this way, we can achieve the linkage of the search conditions.

（）

Cascading search conditions using Easyui ComboBox controls