成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

jQuery EasyUI 框架提供了創(chuàng)建網(wǎng)頁所需的一切，幫助您輕松建立站點。

easyui 是一個基于 jQuery 的框架，集成了各種用戶界面插件。

easyui 提供建立現(xiàn)代化的具有交互性的 javascript 應(yīng)用的必要的功能。

使用 easyui，您不需要寫太多 javascript 代碼，一般情況下您只需要使用一些 html 標(biāo)記來定義用戶界面。

HTML 網(wǎng)頁的完整框架。

easyui 節(jié)省了開發(fā)產(chǎn)品的時間和規(guī)模。

easyui 非常簡單，但是功能非常強(qiáng)大。

先給大家展示效果圖：

Html代碼：

<table id="dd">
</table>

引入JS文件和CSS樣式

<script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery.easyui.min.js" type="text/javascript"></script>
<link  rel="stylesheet"
type="text/css" />
<link  rel="stylesheet"
type="text/css" />
<script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var datagrid; //定義全局變量datagrid
var editRow = undefined; //定義全局變量：當(dāng)前編輯的行
datagrid = $("#dd").datagrid({
url: ‘UserCenter.aspx‘, //請求的數(shù)據(jù)源
iconCls: ‘icon-save‘, //圖標(biāo)
pagination: true, //顯示分頁
pageSize: 15, //頁大小
pageList: [15, 30, 45, 60], //頁大小下拉選項此項各value是pageSize的倍數(shù)
fit: true, //datagrid自適應(yīng)寬度
fitColumn: false, //列自適應(yīng)寬度
striped: true, //行背景交換
nowap: true, //列內(nèi)容多時自動折至第二行
border: false,
idField: ‘ID‘, //主鍵
columns: [[//顯示的列
{field: ‘ID‘, title: ‘編號‘, width: 100, sortable: true, checkbox: true },
{ field: ‘UserName‘, title: ‘用戶名‘, width: 100, sortable: true,
editor: { type: ‘validatebox‘, options: { required: true} }
},
{ field: ‘RealName‘, title: ‘真實名稱‘, width: 100,
editor: { type: ‘validatebox‘, options: { required: true} }
},
{ field: ‘Email‘, title: ‘郵箱‘, width: 100,
editor: { type: ‘validatebox‘, options: { required: true} }
}
]],
queryParams: { action: ‘query‘ }, //查詢參數(shù)
toolbar: [{ text: ‘添加‘, iconCls: ‘icon-add‘, handler: function () {//添加列表的操作按鈕添加，修改，刪除等
//添加時先判斷是否有開啟編輯的行，如果有則把開戶編輯的那行結(jié)束編輯
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
//添加時如果沒有正在編輯的行，則在datagrid的第一行插入一行
if (editRow == undefined) {
datagrid.datagrid("insertRow", {
index: 0, // index start with 0
row: {
}
});
//將新插入的那一行開戶編輯狀態(tài)
datagrid.datagrid("beginEdit", 0);
//給當(dāng)前編輯的行賦值
editRow = 0;
}
}
}, ‘-‘,
{ text: ‘刪除‘, iconCls: ‘icon-remove‘, handler: function () {
//刪除時先獲取選擇行
var rows = datagrid.datagrid("getSelections");
//選擇要刪除的行
if (rows.length > 0) {
$.messager.confirm("提示", "你確定要刪除嗎?", function (r) {
if (r) {
var ids = [];
for (var i = 0; i < rows.length; i++) {
ids.push(rows[i].ID);
}
//將選擇到的行存入數(shù)組并用,分隔轉(zhuǎn)換成字符串，
//本例只是前臺操作沒有與數(shù)據(jù)庫進(jìn)行交互所以此處只是彈出要傳入后臺的id
alert(ids.join(‘,‘));
}
});
}
else {
$.messager.alert("提示", "請選擇要刪除的行", "error");
}
}
}, ‘-‘,
{ text: ‘修改‘, iconCls: ‘icon-edit‘, handler: function () {
//修改時要獲取選擇到的行
var rows = datagrid.datagrid("getSelections");
//如果只選擇了一行則可以進(jìn)行修改，否則不操作
if (rows.length == 1) {
//修改之前先關(guān)閉已經(jīng)開啟的編輯行，當(dāng)調(diào)用endEdit該方法時會觸發(fā)onAfterEdit事件
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
//當(dāng)無編輯行時
if (editRow == undefined) {
//獲取到當(dāng)前選擇行的下標(biāo)
var index = datagrid.datagrid("getRowIndex", rows[0]);
//開啟編輯
datagrid.datagrid("beginEdit", index);
//把當(dāng)前開啟編輯的行賦值給全局變量editRow
editRow = index;
//當(dāng)開啟了當(dāng)前選擇行的編輯狀態(tài)之后，
//應(yīng)該取消當(dāng)前列表的所有選擇行，要不然雙擊之后無法再選擇其他行進(jìn)行編輯
datagrid.datagrid("unselectAll");
}
}
}
}, ‘-‘,
{ text: ‘保存‘, iconCls: ‘icon-save‘, handler: function () {
//保存時結(jié)束當(dāng)前編輯的行，自動觸發(fā)onAfterEdit事件如果要與后臺交互可將數(shù)據(jù)通過Ajax提交后臺
datagrid.datagrid("endEdit", editRow);
}
}, ‘-‘,
{ text: ‘取消編輯‘, iconCls: ‘icon-redo‘, handler: function () {
//取消當(dāng)前編輯行把當(dāng)前編輯行罷undefined回滾改變的數(shù)據(jù),取消選擇的行
editRow = undefined;
datagrid.datagrid("rejectChanges");
datagrid.datagrid("unselectAll");
}
}, ‘-‘],
onAfterEdit: function (rowIndex, rowData, changes) {
//endEdit該方法觸發(fā)此事件
console.info(rowData);
editRow = undefined;
},
onDblClickRow: function (rowIndex, rowData) {
//雙擊開啟編輯行
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
if (editRow == undefined) {
datagrid.datagrid("beginEdit", rowIndex);
editRow = rowIndex;
}
}
});
});
</script>

以上實例代碼給大家介紹了Jquery easyui開啟行編輯模式增刪改操作的相關(guān)知識，希望對大家學(xué)習(xí)有所幫助。