Easyui Learning Experience

Because to revise a project interface more than 10 years ago, start learning Easyui in September, many things have to be tried before you know, small problems will waste a lot of time. So, just record it here, keep it up to date.

One, quotation marksEasyui's custom keyword recognition, API documentation vague. Touched for a long time to understand. The basic rule is: 1. When defined directly in HTML, most of them must be quoted, including custom function names. However, the Boolean value, the number exception. 2. When defining in JS, only the string type needs to be quoted, and the keyword for the string type recognized by Easyui is quoted, such as "center".Example 1:

<class= "Easyui-combobox"  ID= "Ddlaccount"     Data-options= "    valuefield: ' Key ',    textField: ' Value ',    panelheight: ' Auto ',    editable: False,    required:true "/>

The "Auto" here is unique to Easyui and must be quoted. However, the Boolean value true must not be quoted, but many of the online search statements are quoted. Example 2. The function name. The following functions are assumed:

function Formatmoney (value, row, index) {            return (value.tofixed (2));}

then use The JS definition is written as (in the case of a DataGrid column definition):

... columns: [[    {field: ' Balance ', title: ' Balance ', width:100, align: ' right ', Sortable:true, Formatter:formatmoney},.. .

The syntax for direct HTML definition is:

<th data-options= "field: ' Balance ', width:100, align: ' right ', sortable:true, Formatter:formatmoney "> balance </th>

The custom Formatmoney function here is definitely not quoted! It took me half a day to understand, this is my easyui, the example of the writing is very clear. If you use the old version of Easyui (about 1.3 ago) without the Data-options attribute, most of the attributes defined in HTML must be quoted. such as: formatter= "Formatmoney". Second, JQuery AJAX backstage 1. Session VariablesThe implementation of the background is very simple, the most common is the use of ashx. However, if you want to use the session variable in a spooler, you must inherit the System.Web.SessionState.IRequiresSessionState interface. Cases:

 Public class Menuhandler:ihttphandler, System.Web.SessionState.IRequiresSessionState

Because the menu is often associated with user rights, user information is typically placed in the session variable after the login succeeds, so the session variable must be read when the menu is dynamically generated. The IRequiresSessionState interface must be inherited (automatically implemented by the system). 2. File UploadDon't forget to add "Multipart/form-data" in the form! Otherwise, the background request.files is not to upload files. If the use of Easyui Filebox, and no server control, the background is to use Request.Files read the file list, in fact, is a standard input tag. Cases:

<id= "Importform"  runat= "Server"  enctype= " Multipart/form-data ">

third, dynamic add content (JQuery)Want to use panel to make a simple navigation menu, similar to the official demo of Menubutton, except that the menu item is composed of multiple buttons, dynamically generated by the background according to permissions. However, the Panel does not provide a way to dynamically add content, only the ability to load a remote page. In fact, I do not understand the real purpose of the panel, it is a container can be loaded with anything, not just a menu button toolbar, of course, does not provide the method of Add. Searched for most of the day, finally found a good article: "Easyui,jquery dynamic Generation Menubutton". The original jquery has been to all objects (except HTML) encapsulation, provide append (), prepend () and so a bunch of methods, directly to use it, it is really powerful ah. code example:

1 functionCreateMenu (divmenu) {2$.post (' Getmenu.ashx ',NULL,function(data) {3         varMenustr = ' ';4         varSubmenustr = ' ';5$.each (data,function(i, node) {6Menustr + = ' < a id= "MainMenu ' + i + '" href= "#" class= "easyui-';7             if(Node.menus.length > 0) {//Has submenu8Menustr + = ' Menubutton "data-options=" menu:\ ' #menu ' + i + ' \ ' "> ';9Submenustr= ' < div id= "Menu ' + i + '" > ";Ten$.each (Node.menus,function(j, O) { OneSubmenustr + = ' < div > ' + o.name + ' </div> '; A                 }) -Submenustr + = ' </div> '; -             } the             Else -Menustr + = ' LinkButton ' data-options= "plain:true" > "; -Menustr + = Node.title + ' </a> '; -Menustr + =Submenustr; +         }); -$ (' # ' +divmenu). Prepend ($ (MENUSTR)); +          for(varI=0; I A$ (' #MainMenu ' +i). Menubutton (); at}, "JSON"); -}

Easyui Learning Experience