Mvc+easyui-based Web development Framework Experience Summary (6)--Application of drop-down list processing in the page

In many web interface, we can see a lot of drop-down list of elements, some are fixed, some are dynamic, some are dictionary content, some are the name field in other tables, sometimes referring to foreign key ID, sometimes refers to the name of the text content, the correct rapid use of the processing of the drop-down list, Can improve the aesthetics of our program interface and friendly, this article mainly introduces in my web development framework and related extended Web applications used in some of the representative drop-down list of processing scenarios, I hope to give you a reference to learn.

1, fixed drop-down list processing

The representative fixed list has the person sex The treatment, generally is male, the female two kinds, moreover for the convenience, generally uses the text direct use, the following effect is shown.

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201407/121834453487580.png "style=" border:0px; "/>

And their page code is simple, as shown below.

<select class= "Easyui-combobox" id= "Sex" name= "Sex" style= "width:120px;" > <option> men </option> <option> Women </option> </select>

This method is relatively simple, requires a few options to add, do not need additional JS code for binding processing, and do not require background code. However, this hard-coded approach is recommended for less, unless you need to extend only a few items in a fixed situation.

In this way, in the Easyui process, the ComboBox's control binding code is shown below.

$ ("#Sex"). ComboBox (' SetValue ', info. SEX);

And get the value of the control we will not repeat, generally through the JS code to handle them uniformly, as shown in the following code.

var postdata = $ ("#ffAdd"). Serializearray ();

Another way to fix a list is to display text that stores values, such as 0,1. As in my frame, there is the user information to modify the interface inside, whether to subscribe to the public number of information, it is stored after the value is a value, the display is text.

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201407/121842236605696.png "style=" border:0px; "/>

The interface code is shown below, which is also a fixed list, although they display different content from the background store.

<tr><th><label for= "Subscribe" > whether to subscribe to the public number: </LABEL></TH><TD colspan= "3" >< Select Id= "Subscribe" name= "Subscribe" class= "Easyui-combobox" style= "width:150px" ><option value= "1" > Subscriptions </option><option value= "0" > Cancel </option></select>&nbsp;&nbsp;&nbsp;</td ></tr>

For such a control, the binding code is the same as above, but only the content of the binding is numeric.

$ ("#Subscribe1"). ComboBox (' SetValue ', info. Subscribe);

And if we need to display this value as text in the view view through the lable control, we just need to handle it simply.

$ ("#Subscribe2"). Text (info. Subscribe = = "1"? "Subscription": "Cancel");

2, dynamic drop-down list processing

Just said, fixed list for some general simple options, but for the need to change or more options, need to use dynamic drop-down list, dynamic drop-down list there are several ways, one is similar to dictionary binding text processing, one is bound foreign key reference name way and so on.

Let's take a look at two different ways to handle this.

1) drop-down list of dictionary text content

In many cases, we need to use a lot of dictionary content, in most cases the value of the reference dictionary (the general case is the text content) to store it. Dictionary list In many cases is very convenient, we can be in the background of the dynamic management of dictionary items, so that timely feedback to the interface elements, to achieve the dynamic display of the list content.

For example, in my Contacts editing Web interface, I need to use the contents of many dictionary items, the interface effect is as follows.

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201407/121857399899887.png "style=" border:0px; "/>

The red box above is a dynamic drop-down list item, how do we dynamically bind its content to the Web interface?

First, we need to define a dictionary function on the Controller of the dictionary view to return the JSON information to the interface, as shown in the following background code.

<summary>///gets the corresponding dictionary data based on the dictionary type, facilitates the binding of the UI control///</summary>///<param name= "dicttypename" > Dictionary type name < /param>///<returns></returns>public actionresult Getdictjson (string dicttypename) {List< clistitem> treelist = new list<clistitem> (); Clistitem pnode = new Clistitem ("", ""); Treelist.insert (0, Pnode);D ictionary<string, string> dict = bllfactory< Dictdata>. Instance.getdictbydicttype (Dicttypename); foreach (string key in Dict. Keys) {Treelist.add (New Clistitem (Key, Dict[key]));} Return tojsoncontent (treelist);}

The clistitem above is a custom class that contains the text and value two properties.

Above the controller function, the returned content may be the following similar format (JSON format)

[{text: "", Value: "}, {text:" Professor ", Value:" Professor "}, {text:" head Nurse ", Value: "Head Nurse"}]

The above describes the controller's processing logic and data format, then inside the view code, how to bind the dynamic list by JS code?

Since we have used the list of bound dictionaries many times, we first define a generic JS function to reduce the duplication of code, as shown below

function Binddictitem (control, Dicttypename) {$ (' # ' + Control). ComboBox ({url: '/dictdata/getdictjson?dicttypename= ' + Dicttypename,valuefield: ' Value ', TextField: ' Text '});

Then, when you need to initialize the dictionary list of the interface, call this JS function, as shown in the following code.

Initializes the dictionary information function Initdictitem () {Binddictitem ("titles", "titles"); Binddictitem ("Rank", "title"); Binddictitem ("Importance", "important level"); Binddictitem ("Recognition", "the degree of recognition to the company"); Binddictitem ("Interestdemand", "Customer interest Appeal"); Binddictitem ("Carefocus", "Customer care Focus"); Binddictitem ("Responsedemand", "responsible for demand"); Binddictitem ("relationship", "relationship with the company"); Binddictitem ("nationality", "nationality"); Binddictitem ("Political", "political face"); Binddictitem ("JobType", "occupation type"); Binddictitem ("eduction", "education"); Binddictitem ("Animal", "Zodiac"); Binddictitem ("Constellation", "Constellation"); Binddictitem ("Marriagestatus", "marital status"); Binddictitem ("Healthcondition", "health status"); Binddictitem ("BodyType", "body Size");}

2) Bind foreign key reference name

After reading the above dynamic list processing, may have solved most of your problems, but sometimes we may have such a requirement, in a table need to refer to the ID of another table, but we need to be in the interface editing, visual, that is, by name to replace the display of the ID, background storage, The ID value of this control will be stored. For example, when I create a customer contact, I may need to select a customer, so I need to design a function button, pop up an interface for me to select a customer from the list, select the main interface to display the customer's name, if you have saved for editing, directly display the customer name can be, the demand effect is as follows.

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201407/121913187709517.png "style=" border:0px; "/>

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201407/121918286292186.png "style=" border:0px; "/>

After you select a customer, the effect is as follows.

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201407/121920293013154.png "style=" border:0px; "/>

Understand the above interface effect, the specific code is how to implement it?

In fact, a hidden field that needs to define an ID is used to store the database, a read-only text box to display the name, and a button to do so, some of the code is shown below.

  <tr>           <th>              <label for= "Customer_ID" > Customer Name: </label>           </th>            <td colspan= "3" >               <input class= "Easyui-validatebox"  style= " Width:300px;background-color:peachpuff " readonly=" readonly " type=" text " id=" Customer_name "  name= "Customer_name"  data-options= "Required:true,validtype: ' length[1,50] '"/>                <input type= "hidden"   Style= "width:300px"  id= "customer_id"  name= "customer_id"  />                <a href= "javascript:void (0)"  class= "Easyui-linkbutton"  id= " Btnselectcustomer " iconcls=" Icon-search "> select customer </a>             </td>     </tr>

Select the customer, we call a window to display the customer information, and then customer selection, the main interface to update the content, the specific JS interface code as shown below.

Bind the Select Client button event function Bindselectcustomerevent () {$ ("#btnSelectCustomer"). Click (function () {$.showwindow ({title: ') Select Customer ', useiframe:true,width:900,height:700,content: ' Url:/customer/selectcustomer ', data: {ID: $ (' #Customer_ID '), Name: $ (' #Customer_Name ')},buttons: [{text: ' Confirm ', Iconcls: ' Icon-ok ', handler: ' Dook '//This method is in the popup page}, {text: ' Cancel ', Iconcls: ' Icon-cancel ', handler:function (Win) {win.close ();}}],onload:function (win, content) {//window Called when open, initialize the form content if ( Content) {Content.doinit (Win);}});});

If the user already has the data, if you open the interface, we will escape the name of the customer to assign to the corresponding name of the control is OK, the ID hidden control by normal assignment can be, as follows

$.getjson ("/customer/getcustomername?id=" + info. customer_id, function (Result) {$ ("#Customer_Name"). Val (result);});

This article is from the "Wu Huacong blog" blog, make sure to keep this source http://wuhuacong.blog.51cto.com/1779896/1828939

Mvc+easyui-based Web development Framework Experience Summary (6)--Application of drop-down list processing in the page