Easyui, easyui Official Website

Source: Internet
Author: User

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 = "".

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.