Jquery easyui開啓行編輯模式增刪改操做先上圖javascript
Html代碼:css
<table id="dd"> </table>
引入JS文件和CSS樣式html
<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 href="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/themes/icon.css" 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', //請求的數據源 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 0 row: { } }); //將新插入的那一行開戶編輯狀態 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); } //將選擇到的行存入數組並用,分隔轉換成字符串, //本例只是前臺操做沒有與數據庫進行交互因此此處只是彈出要傳入後臺的id alert(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); //把當前開啓編輯的行賦值給全局變量editRow editRow = 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>