Jquery EasyUI的添加，修改，刪除，查詢等基本操作介紹
初識Jquery EasyUI看了一些博主用其開發(fā)出來的項(xiàng)目，頁面很炫，感覺功能挺強(qiáng)大，效果也挺不錯(cuò)，最近一直想系統(tǒng)學(xué)習(xí)一套前臺(tái)控件，于是在網(wǎng)上找了一些參考示例。寫了一些基本的增刪改查功能，算是對該控件的基本入門。后續(xù)有時(shí)間繼續(xù)深入學(xué)習(xí)。
在學(xué)習(xí)jquery easyui前應(yīng)該先到官網(wǎng)下載最新版本http://www.jeasyui.com/download/index.php
先看一下運(yùn)行后的頁面
1、列表展示
2、新增頁面
3、修改頁面
把jquery easyui下載好之后，一般引用下頁幾個(gè)文件
<link rel="stylesheet" type="text/css" />
<link rel="stylesheet"
type="text/css" />
//頁面圖標(biāo)樣式
<link 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主要的js
<script src="http://www.cnblogs.com/Resources/easyui/js/jquery.easyui.min.js" type="text/javascript"></script>
首先是列表展示數(shù)據(jù)
<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">
編號
</th>
<th field="AccountName" width="50">
卡名
</th>
<th field="AccountPwd" width="50">
密碼
</th>
<th field="CreateTime" width="50">
創(chuàng)建時(shí)間
</th>
<th field="CreateName" width="50">
創(chuàng)建人
</th>
</tr>
</thead>
</table>
jquery easyui是用datagrid對數(shù)據(jù)進(jìn)行展示的，所以class要選擇easyui-datagrid；url是本列表的一個(gè)json格式的數(shù)據(jù)來源toobar后面跟著的"#toobar"是列表的一個(gè)工具欄，本示例在列表上顯示的是添加，修改，刪除功能按鈕對數(shù)據(jù)進(jìn)行操作。pagination是否顯示分頁，rownumbers顯示行數(shù)，分頁時(shí)向后臺(tái)傳去兩個(gè)參數(shù)，一個(gè)就是當(dāng)前頁數(shù)另一個(gè)就是每頁顯示行數(shù)；fitcolumns：自適應(yīng)列寬；singleselected:單選。
工具條代碼
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" onclick="newuser()"
plain="true">添加</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit"
onclick="edituser()" plain="true">修改</a> <a href="javascript:void(0)" class="easyui-linkbutton"
iconcls="icon-remove" plain="true">刪除</a>
</div>
數(shù)據(jù)源格式
數(shù)據(jù)源添加彈出框
<div id="dlg" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px;"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">
信息編輯
</div>
<form id="fm" method="post">
<div class="fitem">
<label>
編號
</label>
<input name="AccountCode" class="easyui-validatebox" required="true" />
</div>
<div class="fitem">
<label>
卡號</label>
<input name="AccountName" class="easyui-validatebox" required="true" />
</div>
<div class="fitem">
<label>
密碼</label>
<input name="AccountPwd" class="easyui-validatebox" required="true" />
</div>
<div class="fitem">
<label>
創(chuàng)建時(shí)間</label>
<input name="CreateTime" class="easyui-datebox" required="true" />
</div>
<div class="fitem">
<label>
創(chuàng)建人</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">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')"
iconcls="icon-cancel">取消</a>
</div>
注：class為彈出框類型；closed:當(dāng)前顯示狀態(tài)為隱藏；buttons:彈出框的功能按鈕；
對彈出的添加頁面添加樣式
?<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實(shí)現(xiàn)對數(shù)據(jù)的添加修改刪除
<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("提示信息", "操作成功");
$("#dlg").dialog("close");
$("#dg").datagrid("load");
}
else {
$.messager.alert("提示信息", "操作失敗");
}
}
});
}
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>
相關(guān)文章
這篇文章主要介紹了jQuery制作效果超棒的手風(fēng)琴折疊菜單的效果，這里推薦給大家，有需要的小伙伴可以參考下2015-04-04
推薦40個(gè)簡單的 jQuery 導(dǎo)航插件和教程(下篇)
在下面的集合中，你會(huì)發(fā)現(xiàn)很多便利的 jQuery 導(dǎo)航插件和有用的教程，幫助你實(shí)現(xiàn)充滿吸引力的網(wǎng)站導(dǎo)航，讓你網(wǎng)站更有組織性和交互性2012-09-09
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單隔行變色的方法,涉及jQuery針對頁面元素樣式的相關(guān)操作技巧,需要的朋友可以參考下2016-02-02
學(xué)習(xí)了jquery,發(fā)現(xiàn)其功能真的很令我驚訝，為表格添加背景色用css也可以實(shí)現(xiàn)，卻不得不在<tr>標(biāo)簽里一行一行地添加，但用jquery只需四行代碼，就是這樣精簡的用法，讓我對jquery產(chǎn)生了極大的興趣，也不得不驚嘆新興的技術(shù)所帶來的效率！2010-01-01
這篇文章主要介紹了jQuery按需加載輪播圖(web前端性能優(yōu)化)知識,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
jQuery綁定點(diǎn)擊事件與改變事件的方式總結(jié)及多個(gè)元素綁定多個(gè)事件
我們一說到j(luò)Query中對于元素的修改,就是元素的內(nèi)容、屬性、樣式的修改,下面這篇文章主要給大家介紹了關(guān)于jQuery綁定點(diǎn)擊事件與改變事件的方式總結(jié)及多個(gè)元素綁定多個(gè)事件的相關(guān)資料,需要的朋友可以參考下2022-12-12![jQuery的選擇器中的通配符[id^=''code'']或[name^=''code'']及jquery選擇器總結(jié)](http://img.jbzj.com/images/xgimg/bcimg6.png)
jQuery的選擇器中的通配符[id^=''code'']或[name^=''code'']及jquery選擇器總結(jié)
這篇文章主要介紹了jQuery的選擇器中的通配符[id^='code']或[name^='code']及jquery選擇器總結(jié)的相關(guān)資料,需要的朋友可以參考下2015-12-12
jQuery EasyUI 布局之動(dòng)態(tài)添加tabs標(biāo)簽頁
本文給大家介紹jquery easyui布局之動(dòng)態(tài)添加tabs標(biāo)簽頁，實(shí)現(xiàn)思路是這樣的通過調(diào)用add方法就可以輕松實(shí)現(xiàn)，本文分步驟給大家詳細(xì)介紹，需要的朋友一起學(xué)習(xí)吧2015-11-11
獲取select的value、text值的簡單示例（jquery與javascript）
本篇文章主要分享了獲取select的value、text值的簡單示例代碼，代碼簡潔明了，有需要的朋友可以參考下2016-12-12
JQuery+CSS提示框?qū)崿F(xiàn)思路及代碼(純手工打造)
純手工打造、兼容性還哦可、可移植任何項(xiàng)目感興趣的朋友可以學(xué)習(xí)下，希望對你的jquery提升有所幫助2013-05-05