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