Basic operations such as adding, modifying, deleting, and querying Jquery EasyUI

I first learned about Jquery EasyUI and read some projects developed by bloggers. The pages are very dazzling, and I feel that the functions are quite powerful and the results are quite good. Recently I have been wanting to systematically learn a set of front-end controls, so I found some reference examples on the Internet. I wrote some basic addition, deletion, modification, and query functions, which is a basic entry to the control. You will have time to continue further study.

Before learning jquery easyui, you should go to the official website to download the latest http://www.jeasyui.com/download/index.php.

Let's take a look at the running page.

1. List display

2. Add a page

3. Modify the page

After downloading jquery easyui, several files on the next page are usually referenced.

Copy codeThe Code is as follows:
<Link href = "http://www.cnblogs.com/Resources/easyui/css/default.css" rel = "stylesheet" type = "text/css"/>
<Link href = "http://www.cnblogs.com/Resources/easyui/js/themes/default/easyui.css" rel = "stylesheet"
Type = "text/css"/>
// Page icon Style
<Link href = "http://www.cnblogs.com/Resources/easyui/js/themes/icon.css" rel = "stylesheet" type = "text/css"/>
<Script src = "http://www.cnblogs.com/Resources/easyui/js/jquery-1.7.2.min.js" type = "text/javascript"> </script>
// Main js of jquery easyui
<Script src = "http://www.cnblogs.com/Resources/easyui/js/jquery.easyui.min.js" type = "text/javascript"> </script>

First, the List displays data.

Copy codeThe Code is as follows:
<Table id = "dg" title = "My Users" class = "easyui-datagrid" style = "width: 700px; height: 250px"
Url = "http://www.cnblogs.com/GetJson/CreateJson.aspx" toolbar = "# toolbar" pagination = "true" rownumbers = "true"
Fitcolumns = "true" singleselect = "true">
<Thead>
<Tr>
<Th field = "AccountCode" width = "50">
No.
</Th>
<Th field = "AccountName" width = "50">
Card Name
</Th>
<Th field = "AccountPwd" width = "50">
Password
</Th>
<Th field = "CreateTime" width = "50">
Creation Time
</Th>
<Th field = "CreateName" width = "50">
Created
</Th>
</Tr>
</Thead>
</Table>

Jquery easyui uses the datagrid to display data. Therefore, select easyui-datagrid for the class; the url is a json data source in this list. "# toobar" is followed by toobar, which is a tool bar in the list. In this example, add, modify, click the delete button to delete data. Whether pagination displays pagination. rownumbers displays the number of rows. When pagination is performed, two parameters are sent to the backend. One is the current page, and the other is the number of rows displayed on each page. fitcolumns: Adaptive column width; singleselected: single choice.
Tool bar code

Copy codeThe Code is as follows:
<Div id = "toolbar">
<A href = "javascript: void (0)" class = "easyui-linkbutton" iconcls = "icon-add" onclick = "newuser ()"
Plain = "true"> Add </a> <a href = "javascript: void (0)" class = "easyui-linkbutton" iconcls = "icon-edit"
Onclick = "edituser ()" plain = "true"> modify </a> <a href = "javascript: void (0)" class = "easyui-linkbutton"
Iconcls = "icon-remove" plain = "true"> Delete </a>
</Div>

Data Source format



Add data source dialog box

Copy codeThe Code is as follows:
<Div id = "dlg" class = "easyui-dialog" style = "width: 400px; height: 280px; padding: 10px 20px ;"
Closed = "true" buttons = "# dlg-buttons">
<Div class = "ftitle">
Edit information
</Div>
<Form id = "fm" method = "post">
<Div class = "fitem">
<Label>
No.
</Label>
<Input name = "AccountCode" class = "easyui-validatebox" required = "true"/>
</Div>
<Div class = "fitem">
<Label>
Card number </label>
<Input name = "AccountName" class = "easyui-validatebox" required = "true"/>
</Div>
<Div class = "fitem">
<Label>
Password </label>
<Input name = "AccountPwd" class = "easyui-validatebox" required = "true"/>
</Div>
<Div class = "fitem">
<Label>
Creation Time </label>
<Input name = "CreateTime" class = "easyui-datebox" required = "true"/>
</Div>
<Div class = "fitem">
<Label>
Created by </label>
<Input name = "CreateName" class = "easyui-vlidatebox"/>
</Div>
<Input type = "hidden" name = "action" id = "hidtype"/>
<Input type = "hidden" name = "ID" id = "Nameid"/>
</Form>
</Div>

? <Div id = "dlg-buttons">
<A href = "javascript: void (0)" class = "easyui-linkbutton" onclick = "saveuser ()" iconcls = "icon-save"> save </a>
<A href = "javascript: void (0)" class = "easyui-linkbutton" onclick = "javascript: $ ('# dlg'). dialog ('close ')"
Iconcls = "icon-cancel"> cancel </a>
</Div>

Note: class is the pop-up box type; closed: The current display status is hidden; buttons: The function button of the pop-up box;

Add a style to the pop-up add page

Copy codeThe Code is as follows:
? <Style type = "text/css">
# Fm
{
Margin: 0;
Padding: 10px 30px;
}
. Ftitle
{
Font-size: 14px;
Font-weight: bold;
Padding: 5px 0;
Margin-bottom: 10px;
Border-bottom: 1px solid # ccc;
}
. Fitem
{
Margin-bottom: 5px;
}
. Fitem label
{
Display: inline-block;
Width: 80px;
}
</Style>

Js allows you to add, modify, and delete data.

Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var url;
Var type;
Function newuser (){
$ ("# Dlg"). dialog ("open"). dialog ('settitle', 'new user ');;
$ ("# Fm"). form ("clear ");
Url = "UserManage. aspx ";
Document. getElementById ("hidtype"). value = "submit ";
}
Function edituser (){
Var row = $ ("# dg"). datagrid ("getSelected ");
If (row ){
$ ("# Dlg"). dialog ("open"). dialog ('settitle', 'edit user ');
$ ("# Fm"). form ("load", row );
Url = "UserManage. aspx? Id = "+ row. ID;
}
}
Function saveuser (){
$ ("# Fm"). form ("submit ",{
Url: url,
Onsubmit: function (){
Return $ (this). form ("validate ");
},
Success: function (result ){
If (result = "1 "){
$. Messager. alert ("prompt message", "Operation successful ");
$ ("# Dlg"). dialog ("close ");
$ ("# Dg"). datagrid ("load ");
}
Else {
$. Messager. alert ("prompt message", "operation failed ");
}
}
});
}
Function destroyUser (){
Var row = $ ('# dg'). datagrid ('getselected ');
If (row ){
$. Messager. confirm ('Confirm', 'Are you sure you want to destroy this user? ', Function (r ){
If (r ){
$. Post ('Destroy _ user. php', {id: row. id}, function (result ){
If (result. success ){
$ ('# Dg'). datagrid ('reload'); // reload the user data
} Else {
$. Messager. show ({// show error message
Title: 'error ',
Msg: result. errorMsg
});
}
}, 'Json ');
}
});
}
}
</Script>