Jquery easyui開啟行編輯模式增刪改操作

Jquery easyui開啟行編輯模式增刪改操作先上圖

 

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 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>