What is Easyui

1 Overview

1. What is easyui?

easyui is a collection of user interface plug-ins based on jQuery. That is, the main technology used by easyui is jQuery, and it provides plug-ins that are displayed in the user interface.

2.easyui is an extension of the HTML plug-in, so creating a plug-in using easyui must be combined with the corresponding HTML plug-in, such as validatebox\textbox\filebox \ provided by easyui datebox\datatimebox, etc. must be implemented on the tag.

3.data-options

is used to instantiate plug-ins, that is, to add new features to the easyui basic plug-in. New features can be concentrated Written in the data-options attribute , the attribute value is enclosed in single quotes, and the two attributes are separated by commas. New features can also be listed individually.

4. Each plug-in can be regarded as a container. Add other plug-ins. Add method:

Reference other plug-ins through the corresponding attributes id, such as adding toolbar toolbar="#toolbar" and adding buttons buttons="#buttons".

5. Syntax format for calling plug-in function:

$(selector).插件名("方法名"[参数值]);

6.href reload url

• href: Static loading, loading specified page information.

• reload: Dynamic loading, driven by events, such as clicking a button to load specified page information.

• #url: Points to server resources and obtains data from the server.

二 datagrid data grid

1. Function

Data grid is mainly used to display the data obtained from the database through Ajax in tabular form.

2. The json string format returned by the server:

"rows":[{},{}]",total":int数据

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

4. After the page is loaded, datagrid automatically obtains data from the server through Ajax, and the url needs to be given when instantiating the plug-in.

5.datagrid attribute

• Add toolbar: toolbar="#toolbar".

• Display row numbers: rownumbers="true".

• #Only single row selection is allowed: singleSelect="true".

• #Fit the columns to the width of the table: fitColumns="true":.

• #Display pagination bar: pagination="true".

6. Column header

<thead>  <tr><th field="在此列显示的数据库字段"width="">列标题</th><th field="在此列显示的数据库字段"width="">列标题</th>  </tr></thead>

7. Get selected row

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

row represents the selected row, including all data including id, data format:

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

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

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

三form

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

2. Load data

$(selector).form("load",{name:"myName"});//加载自定义数据
$(selector).form("load",row);//加载datagrid选中行数据

3. Form submission

$(selector).form('submit',{
                           url:xxx,
                           onSubmit:function(){
                                    return $(this).form("validate")；//验证，只要在前台验证通过后才提交
                                               },
                           success:function(){}//处理返回结果
})

If you do not need to process Ajax return data, the submission can be abbreviated as:

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

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

The above is the detailed content of What is Easyui. For more information, please follow other related articles on the PHP Chinese website!