EasyUI learning experience and easyui Learning

EasyUI learning experience and easyui Learning

It takes a lot of time to modify a project interface more than a decade ago and start learning EasyUI in May. So, record it here and update it at any time.

I. quotation marksThe identification of custom keywords in EasyUI is not detailed in API documentation. It took a long time to understand. The basic rule is: 1. When directly defining in HTML, most of them must be enclosed by quotation marks, including user-defined function names. Except for boolean values and numbers. 2. When defining in js, only the string type needs to be enclosed by quotation marks. Keywords of the string type that are only recognized by EasyUI must also be enclosed by quotation marks, such as "center ". Example 1:

<input class="easyui-combobox" ID="ddlAccount"    data-options="    valueField:'Key',    textField:'Value',    panelHeight : 'auto',    editable:false,    required:true“/>

Here, "auto" is unique to EasyUI and must be enclosed in quotation marks. But the Boolean value true must not be enclosed by quotation marks, but many statements found on the Internet are enclosed by quotation marks. Example 2: function name. Assume there are the following functions:

function formatMoney(value, row, index) {            return (value.toFixed(2));}

The JS definition is written as follows (take the column definition of the DataGrid as an example ):

... Columns: [{field: 'balance ', title: 'balance', width: 100, align: 'right', sortable: true, formatter: formatMoney },...

The syntax of HTML is as follows:

<Th data-options = "field: 'balance ', width: 100, align: 'right', sortable: true, formatter: formatMoney"> balance </th>

The custom formatMoney function cannot be enclosed in quotation marks! It took me half a day to understand. This is an example of EasyUI. If the EasyUI of the old version (earlier than 1.3) does not have the data-options attribute, most of the attributes defined in HTML must be enclosed by quotation marks. For example, formatter = "formatMoney ". Ii. JQuery AJAX background  1. Session VariablesThe background implementation is very simple. The most common is to use ashx. However, if you want to use the Session variable in the background processing program, you must inherit the System. Web. SessionState. IRequiresSessionState interface. Example:

public class MenuHandler : IHttpHandler, System.Web.SessionState.IRequiresSessionState

Because menus are often associated with user permissions, user information is generally put into the Session variable after successful login, so the Session variable must be read when the menu is dynamically generated. At this time, the IRequiresSessionState interface must be inherited (automatically implemented by the system. 2. File UploadDo not forget to add "multipart/Form-data" to form "! Otherwise, the upload file cannot be obtained in the background Request. Files. If FileBox of EasyUI is used, but the server control is not used, Request. Files will be used in the background to read the file list, which is actually a standard input tag. Example:

<form id="ImportForm" runat="server" enctype="multipart/form-data" >

  3. dynamically add content (JQuery)You want to use Panel to create a simple navigation menu, which is similar to the official Demo of MenuButton. However, the menu item consists of multiple buttons and is dynamically generated by the background based on permissions. However, Panel does not provide a method to dynamically add content, but only supports loading remote pages. In fact, I don't understand the true intention of Panel. It is a ToolBar that can hold anything, not just menu buttons. Of course, it does not provide methods such as Add. After searching for a long time, I finally found a good article: easyui, jquery dynamic generation of menubutton. It turns out that JQuery has encapsulated all objects (except HTML) and provided a bunch of methods such as append () and prepend (). It is really powerful. Sample Code:

 1 function createMenu(divMenu) { 2     $.post('getMenu.ashx', null, function (data) { 3         var menuStr = ''; 4         var subMenuStr = ''; 5         $.each(data, function (i, node) { 6             menuStr += '< a id="MainMenu' + i + '" href="#" class="easyui-'; 7             if (node.menus.length > 0) {    //has submenu 8                 menuStr += 'menubutton" data-options="menu:\'#menu' + i +'\'">'; 9                 subMenuStr='< div id="menu'+ i + '">';10                 $.each(node.menus, function (j, o) {11                     subMenuStr += '< div >' + o.name + '</ div>';12                 })13                 subMenuStr += '</ div>';14             }15             else16                 menuStr += 'linkbutton" data-options="plain:true">';17             menuStr += node.title + '</ a>';18             menuStr += subMenuStr;19         });20         $('#' + divMenu).prepend($(menuStr));21         for (var i=0;i22             $('#MainMenu' + i).menubutton();23     }, "json");24 }