Use JQueryEasyUI in Asp. Net

In fact, it is okay to use a similar framework and look at the documents on the official website. This article is a summary of my recent use of JQueryEasyUI. It can also reduce the number of new friends who use JQueryEasyUI.
Download reference
The Directory of the extracted files is as follows:

Demo: some sample pages of JQueryEasyUI. You can delete this directory during project use;
Locale: the directory contains some local files to support different languages, such as Chinese can reference the easyui-lang-zh_CN.js;
Plugins and src: These two directories contain js files that support various JQueryEasyUI functions;
Themes: Ignore.
To use JQueryEasyUI, You need to reference four files, two css files and two js files:
<Link rel = "stylesheet" type = "text/css" href = "../Scripts/jqueryeasyui/themes/gray/easyui.css"/>
<Link rel = "stylesheet" type = "text/css" href = "../Scripts/jqueryeasyui/themes/icon.css"/>
<Script type = "text/javascript" src = "../Scripts/jqueryeasyui/jquery-1.8.0.min.js"> </script>
<Script type = "text/javascript" src = "../Scripts/jqueryeasyui/jquery. easyui. min. js"> </script>
If you need to use localization, you also need to reference:
<Script type = "text/javascript" src = "../Scripts/jqueryeasyui/locale/easyui-lang-zh_CN.js"> </script>
Page of JQueryEasyUI Grid
According to the official documentation can easily build a Grid, at the beginning of the period I did not reference the localization file easyui-lang-zh_CN.js, the list of tabs shown in English, after checking the information on the Internet, you can use the code to re-build the pagination bar:
// Set the pagination control var p = $ ('# dg'). datagrid ('getpager ');
$ (P). pagination ({
PageSize: 10, // number of records displayed on each page. The default value is 10 pageList: [10, 20, 30, 40, 50]. // you can set the list of records per page. beforePageText: 'dide', // Chinese characters displayed before the page number text box
AfterPageText: 'total pages {pages} page ',
DisplayMsg: 'Current {from}-{to} records total {total} records'
/* OnBeforeRefresh: function () {$ (this ). pagination ('loading'); alert ('before refresh '); $ (this ). pagination ('loaded ');}*/
}), And later found that only need to reference the localization file easyui-lang-zh_CN.js after the paging bar is automatically displayed as Chinese. Referencing a localized file can also solve the problem of calendar control format. Therefore, if you are using a Chinese system, we recommend that you reference a localized file on the page.
Value of the JQueryEasyUI Control
Using JQuery to retrieve the control value is simple, as follows:
$ ("# CstName"). val ();
$ ("# TaskNo"). val (). To use the JQueryEasyUI calendar control, drop-down control, or other controls, add a class to the common input and select controls:
<Input id = "FeedBackDate" name = "FeedBackDate" class = "easyui-datebox" maxlength = "10"
Style = "width: 150px;"/>
<Select id = "IsKfCl" class = "easyui-combobox" name = "IsKfCl" style = "width: 150px;">
<Option value = ""> </option>
<Option value = "yes"> Yes </option>
<Option value = "no"> NO </option>
</Select> the following method is used to obtain the values of these controls: $ ("# FeedBackDate"). datebox ("getValue ");
$ ("# IsKfCl"). combobox ("getValue"); two methods of Grid ToolBar
Generally, some buttons such as add, edit, and delete are added to the top of the Grid list control, as shown in the following figure:

You can use ToolBar in JQueryEasyUI. The ToolBar can be defined during DataGrid initialization as follows:
$ ('# Dg'). datagrid ({
Collapsible: false,
FitColumns: true,
SingleSelect: true,
RemoteSort: false,
SortName: 'rolename ',
SortOrder: 'desc ',
Nowrap: true,
Method: 'get ',
LoadMsg: 'loading data ...',
Url :'...',
FrozenColumns :[[
{Field: 'ck ', checkbox: true}
],
Columns :[[
{Field: 'id', title: 'id', 80, sortable: true },
{Field: 'name', title: 'name', 100, sortable: true}
],
Pagination: true,
PageNumber: 1,
Rownumbers: true,
Toolbar:
[
{
Id: 'btnadd ',
Text: 'add ',
IconCls: 'icon-add ',
Handler: function (){
$ ("# Name"). val ("");
Add ();
}
},
'-',
{
Id: 'btnedit ',
Text: 'editor ',
IconCls: 'icon-edit ',
Handler: function (){
Var selected = $ ('# dg'). datagrid ('getselected ');
If (selected ){
Var name = selected. Name;
$ ("# Name"). val (name );
Edit ();
}
}
},
'-',
{
Id: 'btndelete ',
Text: 'delete ',
Disabled: true,
IconCls: 'icon-delete ',
Handler: function (){
}
}
]
});
}); Another way is to define the ToolBar in the div separately, and then associate the div ID when the DataGrid is initialized. First, define the div of the ToolBar with the ID tb:
<! -- Toolbar -->
<Div id = "tb" style = "padding: 5px; height: auto; display: none;">
<Div style = "margin-bottom: 5px">
<A href = "#" class = "easyui-linkbutton" iconcls = "icon-add" onclick = "add ()"> add </a>
<A href = "#" class = "easyui-linkbutton" iconcls = "icon-edit" onclick = "edit ()"> edit-</a>
<A href = "#" class = "easyui-linkbutton" iconcls = "icon-edit" onclick = "copyAdd ()"> copy '</a>
<A href = "#" class = "easyui-linkbutton" iconcls = "icon-cut" onclick = "copyVss ()"> copy address · </a>
<A href = "#" class = "easyui-linkbutton" iconcls = "icon-save" onclick = "downReg ()"> download REG </a>
<A href = "#" class = "easyui-linkbutton" iconcls = "icon-remove" onclick = "del ()"> Delete y </a>
<! -- Query region -->
Region: <input id = "seaArea" style = "width: 100px"/>
Customer name: <input id = "seaCstName" style = "width: 100px"/>
<A href = "#" class = "easyui-linkbutton" iconcls = "icon-search" onclick = "searchSrcCode ()"> query </a>
</Div>
</Div> set the toobar attribute value to tb during DataGrid initialization:
Pagination: true,
PageNumber: 1,
Rownumbers: true,
Toolbar: '# tb ',
... Define the ToolBar separately. I personally think it should be more flexible, and the JS Code will be simpler.
Form submission
As shown in the list above, there are two ways to submit data:
Organize data by yourself and submit it using Ajax (get post;
Use Form submission.
I used the first method when I was just using it:
// Save
Function saveFeedBackLog (mode, id ){
$. Ajax ({
Type: "POST ",
DataType: "json ",
// Cache: true,
Url: "../Ajax/FeedBackLogAjax. ashx? Method = SaveFeedBackLog ",
Data: {FeedBackDate: $ ("# FeedBackDate"). datebox ("getValue "),
CstName: $ ("# CstName"). val (),
TaskNo: $ ("# TaskNo"). val (),
FeedBackContent: $ ("# FeedBackContent"). val (),
CsZrr: $ ("# CsZrr"). combobox ("getValue "),
CsYzResult: $ ("# CsYzResult"). val (),
IsKfCl :,
KfZrr: $ ("# KfZrr"). combobox ("getValue "),
EndDate: $ ("# EndDate"). datebox ("getValue "),
KfClDate: $ ("# KfClDate"). val (),
Wtyy: $ ("# Wtyy"). val (),
Mode: mode,
ID: id
},
Success: function (data ){
//..........
When there are many fields on the page, it will be troublesome. During saving, You need to extract the values of each field one by one and send them to the background, during editing, you also need to extract the values of each field in the row one by one and assign them to the controls in the Form. Later, we found that JQueryEasyUI provides the Form Ajax submission method, which will simplify the Code a lot, in addition, some verification controls provided by JQueryEasyUI can be used for Form submission.
Assign a value to the form during editing
Function edit (){
Var rowData = $ ('# dg'). datagrid ('getselection ');
If (rowData. length = 0 ){
$. Messager. alert ('hprompt ',' select the item to edit! ', 'Info ');
}
Else if (rowData. length> 1 ){
$. Messager. alert ('hprompt ',' can only be selected for editing! ', 'Info ');
}
Else {
_ Mode = "2 ";
Var row = $ ('# dg'). datagrid ('getselected ');
OpenDialog ();
$ ('# Fm'). form ('load', row );
_ SrcCodeManageID = row. SrcCodeManageID;
Url = "../Ajax/SrcCodeManageAjax. ashx? Method = SaveSrcCodeManage & ID = "+ row. SrcCodeManageID +" & Mode = "+ _ mode;
}
} Save
// Save
Function saveSrc (){
$ ('# Fm'). form ('submit ',{
Url: url,
OnSubmit: function (){
Return $ (this). form ('validate ');
},
Success: function (data ){
If (data = "Success "){
$ ('# Dlg'). dialog ('close'); // close the dialog
$ ('# Dg'). datagrid ('reload'); // reload the user data
$. Messager. alert ('hprompt ',' saved successfully! ', 'Info ');
}
Else if (data = "Error ")
{
$. Messager. alert ('error', 'System error! ', 'Error ');
}
}
});
} It can be seen that the second method is much simpler than the first method, and some form verification can be used when saving, such as setting required items, phone number, and mail format.