First know jquery Easyui saw some bloggers with its development of the project, the page is very cool, feeling very powerful, the effect is quite good, and recently has been thinking about the system to learn a set of front control, so on the Internet to find some reference examples. Wrote a number of basic additions and deletions to check the function, is a basic introduction to the control. Follow-up has time to continue to study further.
You should go to the official website to download the latest version before you study jquery Easyui http://www.jeasyui.com/download/index.php
First look at the running page
1. List display
2, add page
3, modify the page
After you download the jquery Easyui, you typically refer to the next few files.
Copy Code code 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>
jquery Easyui the main JS
<script src= "Http://www.cnblogs.com/Resources/easyui/js/jquery.easyui.min.js" type= "Text/javascript" ></ Script>
First, the list shows the data
Copy Code code 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= "M" >
Number
</th>
<th field= "AccountName" width= "M" >
Card Name
</th>
<th field= "Accountpwd" width= "M" >
Password
</th>
<th field= "Createtime" width= "M" >
Creation time
</th>
<th field= "Createname" width= "M" >
Create a person
</th>
</tr>
</thead>
</table>
The jquery Easyui is displayed with the DataGrid, so class wants to select Easyui-datagrid;url is a JSON-formatted data source for this list toobar followed by "#toobar" is a toolbar for the list, This example displays the add, modify, and delete feature buttons on the list to manipulate the data. Pagination whether to display pagination, rownumbers show the number of rows, paging to the background to pass two parameters, one is the current number of pages, the other is to display rows per page; Fitcolumns: Adaptive column width; singleselected: Radio.
Tool bar code
Copy Code code 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
Data Source Add pop-up box
Copy Code code as follows:
<div id= "Dlg" class= "Easyui-dialog" style= "width:400px"; height:280px; padding:10px 20px; "
Closed= "true" buttons= "#dlg-buttons" >
<div class= "Ftitle" >
Information editing
</div>
<form id= "FM" method= "POST" >
<div class= "Fitem" >
<label>
Number
</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>
Create Time </label>
<input name= "Createtime" class= "Easyui-datebox" required= "true"/>
</div>
<div class= "Fitem" >
<label>
Created by person </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 pop-up box type; closed: Current display status is hidden; buttons: function button of pop-up box;
Add a style to a pop-up add page
Copy Code code 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 implementation of the data added modify Delete
Copy Code code 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 Information", "successful Operation");
$ ("#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>
