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