Easyui, easyui Official Website

Easyui, easyui Official Website

 

I. Overview 1. What is easyui?

Easyui is a collection of jQuery-based user interface plug-ins. That is, easyui mainly uses jQuery and provides plug-ins that are displayed on the user interface.

2. easyui is an extension of the HTML plug-in. Therefore, to create a plug-in using easyui, you must combine the corresponding HTML plug-in, for example, validatebox \ textbox \ filebox \ datebox \ datatimebox provided by easyui must be implemented on the <input> label.

3. data-options

It is used to instantiate the plug-in, that is, to add new features to the basic plug-in of easyui. The new features can be written in the data-options attribute. The attribute values are enclosed by single quotation marks, and the two attributes are separated by commas. New features can also be listed separately.

4. Each plug-in can be regarded as a container. Add other plug-ins. How to add them:

Reference the IDs of other plug-ins through corresponding properties, such as adding toolbar = "# toolbar" and adding button buttons = "# buttons ".

5. Syntax format for calling plug-in functions:

$ (Selector). Plug-In Name ("method name" [parameter value]);

6. href reload url

• Href: Static Loading. Load the specified page information.
• Reload: Dynamically Loaded, event-driven, such as clicking a button to load specified page information.
• Url: point to the server resource to obtain data from the server.

2. Functions of datagrid Data Grid 1.

Data Grid is mainly used to display data obtained from the database through Ajax in the form of tables.

2. json string format returned by the server:

"Rows": [{},{}] ", total": int data

3. The datagrid is built on the HTML <table> label.

4. After the datagrid is loaded on the page, it automatically retrieves data from the server through Ajax. You need to specify the url when instantiating the plug-in.

5. datagrid Properties

• Add toolbar: toolbar = "# toolbar ".
• Row number: rownumbers = "true ".
• Select singleSelect = "true" only for a single row ".
• Apply columns to the table width: fitColumns = "true ":.
• Pagination = "true ".

6. Column Title

<Thead> <tr> <th field = "the database field displayed in this column" width = ""> Column Title </th> <th field = "the database field displayed in this column "width =" "> Column Title </th> </tr> </thead>

7. Obtain the selected row

var row=$(selector).datagrid("getSelected")

Row indicates that all data including the row id is selected. The data format is as follows:

{name01:"value01",name02:"value02"}

8. The data in the table needs to be reloaded after modification:

$(selector).datagrid("reload");

 

Three Forms

1. form ("clear"): clears the form.

2. load data

$ (Selector ). form ("load", {name: "myName"}); // load custom data $ (selector ). form ("load", row); // load the data of the row selected by the datagrid

3. Form submission

$ (Selector ). form ('submit ', {url: xxx, onSubmit: function () {return $ (this ). form ("validate"); // verification, only submitted after the front-end verification is passed}, success: function () {}// process returned results })

If you do not need to process the data returned by Ajax, you can submit it as follows:

$(selector).form("submit");

4. After you submit a form using easyui, the form will not jump automatically. to jump, you need to set the jump resource in the callback function, such as window. location. href = "".