Jquery EasyUI add modify delete query and other basic operations
- 2020-03-26 21:20:03
- OfStack
I first learned Jquery EasyUI saw some bloggers with its development of the project, the page is very dazzling, feel quite powerful, the effect is quite good, recently I have been trying to learn a set of foreground control system, so I found some reference examples on the Internet. Wrote some basic add, delete, change check function, is the basic introduction to the control. There will be time for further study.
In learning jquery easyui before should first to the official website to download the latest version (link: http://www.jeasyui.com/download/index.php)
Take a look at the page after it's run
1. List display
< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201310/2013101112343011.jpg ">
2. New pages
< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201310/2013101112343012.jpg ">
3. Modify the page
< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201310/2013101112343013.jpg ">
After downloading jquery easyui, generally refer to the next page of several files
<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 main js
<script src="http://www.cnblogs.com/Resources/easyui/js/jquery.easyui.min.js" type="text/javascript"></script>
The first is a list showing the data
<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">
Serial number
</th>
<th field="AccountName" width="50">
Name card
</th>
<th field="AccountPwd" width="50">
password
</th>
<th field="CreateTime" width="50">
Creation time
</th>
<th field="CreateName" width="50">
founder
</th>
</tr>
</thead>
</table>
Jquery easyui displays the data with a datagrid, so class selects easyui-datagrid; The url is a json-formatted data source for this list. Toobar followed by "#toobar" is a toolbar for the list. This example shows the add, modify, and delete function buttons on the list to manipulate the data. Pagination whether to display pages, rownumbers display the number of rows, paging to the background to pass two parameters, one is the current page and the other is the number of rows per page; Fitcolumns: adaptive column width; Singleselected: radio.
Toolbar code
<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 the </a> <a href="javascript:void(0)" class="easyui-linkbutton"
iconcls="icon-remove" plain="true"> delete </a>
</div>
Data source format
< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201310/2013101112343014.jpg ">
Data sources add pop-up boxes
<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>
Serial number
</label>
<input name="AccountCode" class="easyui-validatebox" required="true" />
</div>
<div class="fitem">
<label>
The 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>
founder </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 type of pop-up box; Closed: the current display state is hidden; Buttons: function buttons that pop up;
Add a style to the pop-up add page
?<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 to add, modify and delete
<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 ", " Operation is successful ");
$("#dlg").dialog("close");
$("#dg").datagrid("load");
}
else {
$.messager.alert(" Prompt information ", " The operation failure ");
}
}
});
}
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>