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

<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; //定義全局變量：當前編輯的行
datagrid = $("#dd").datagrid({
url: ‘UserCenter.aspx‘, //請求的數(shù)據(jù)源
iconCls: ‘icon-save‘, //圖標
pagination: true, //顯示分頁
pageSize: 15, //頁大小
pageList: [15, 30, 45, 60], //頁大小下拉選項此項各value是pageSize的倍數(shù)
fit: true, //datagrid自適應寬度
fitColumn: false, //列自適應寬度
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 () {//添加列表的操作按鈕添加，修改，刪除等
//添加時先判斷是否有開啟編輯的行，如果有則把開戶編輯的那行結束編輯
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);
//給當前編輯的行賦值
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ù)組并用,分隔轉換成字符串，
//本例只是前臺操作沒有與數(shù)據(jù)庫進行交互所以此處只是彈出要傳入后臺的id
alert(ids.join(‘,‘));
}
});
}
else {
$.messager.alert("提示", "請選擇要刪除的行", "error");
}
}
}, ‘-‘,
{ text: ‘修改‘, iconCls: ‘icon-edit‘, handler: function () {
//修改時要獲取選擇到的行
var rows = datagrid.datagrid("getSelections");
//如果只選擇了一行則可以進行修改，否則不操作
if (rows.length == 1) {
//修改之前先關閉已經(jīng)開啟的編輯行，當調(diào)用endEdit該方法時會觸發(fā)onAfterEdit事件
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
//當無編輯行時
if (editRow == undefined) {
//獲取到當前選擇行的下標
var index = datagrid.datagrid("getRowIndex", rows[0]);
//開啟編輯
datagrid.datagrid("beginEdit", index);
//把當前開啟編輯的行賦值給全局變量editRow
editRow = index;
//當開啟了當前選擇行的編輯狀態(tài)之后，
//應該取消當前列表的所有選擇行，要不然雙擊之后無法再選擇其他行進行編輯
datagrid.datagrid("unselectAll");
}
}
}
}, ‘-‘,
{ text: ‘保存‘, iconCls: ‘icon-save‘, handler: function () {
//保存時結束當前編輯的行，自動觸發(fā)onAfterEdit事件如果要與后臺交互可將數(shù)據(jù)通過Ajax提交后臺
datagrid.datagrid("endEdit", editRow);
}
}, ‘-‘,
{ text: ‘取消編輯‘, iconCls: ‘icon-redo‘, handler: function () {
//取消當前編輯行把當前編輯行罷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>