EasyUI 行編輯模式

EasyUI在線API：http://www.jeasyui.net/plugins/

EaysUI 行編輯模式記錄

參考：http://www.cnblogs.com/kexb/p/3685913.html 　　Jquery easyui開啓行編輯模式增刪改操做

　   　http://www.cnblogs.com/babietongtianta/p/3765484.html　　easyui datagrid 行編輯功能

 

一、引入EasyUI腳本

二、

 1 <script src="/Content/JqEasyui/jquery-1.8.0.min.js" type="text/javascript"></script>
 2 <script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
 3 <script src="/Content/JqEasyui/jquery.easyui.min.js" type="text/javascript"></script>
 4 <script type="text/javascript">
 5     $(function () {
 6         LoadList();
 7     })
 8     function Save(id, index) {
 9         $("#tt").datagrid("endEdit", index);  //關閉editor編輯行,editor關閉時會在頁面上保存修改後的數據
10         $.post("/One/Update", $("#tt").datagrid('getSelected'), function (data) {
11             if (data != "OK") {
12                 $.messager.alert('提示', "保存失敗", 'error');
13             } else {
14                 $.messager.alert('提示', "保存成功");
15             }
16             $("#tt").datagrid("load");
17         })
18     }
19     function LoadList() {
20         //沒有editor對象,建立一個int記錄被編輯的行號
21         //當被編輯的行號爲undefined時,則表明沒有被編輯的行
22         var editRow = undefined;
23         $("#tt").datagrid({
24             url: '/One/TestSelect',
25             title: 'datagrid中editor測試', //標題
26             iconClis: 'icon-edit', //圖標
27             width: 660,
28             height: 250,
29             singleSelect: true, //單選開關 true(開)/false  控制只有一行能被選中
30             idField: 'Id', //主鍵
31             columns: [[
32                             { field: 'Id', title: '序號', width: 60 },
33                             { field: 'Name', title: '名稱', width: 60,
34                                 editor: {  //定義行編輯事件
35                                     type: 'text',  //editor框類型  text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree
36                                     options: {  //editor選項，做用不明
37                                         required: true
38                                     }
39                                 }
40                             },
41                             { field: 'Class', title: '分類', width: 60,
42                                 editor: {
43                                     type: 'text',
44                                     options: {
45                                         required: true
46                                     }
47                                 }
48                             },
49                             { field: 'Other4', title: '操做', width: 70,   //添加操做列
50                                 formatter: function (value, row, index) {  //添加操做列同時設置點擊事件
51                                     return "<a  onclick='Save(" + row.Id + "," + index + ")' href='#'>保存</a>";
52                                 }
53                             }
54             ]],
55             onDblClickRow: function (index, row) {  //雙擊行事件
56                 //驗證是否有正在編輯行
57                 if (editRow != undefined) {  //editRow有值時則表明某一行正在編輯中
58                     //關閉當前編輯行
59                     $("#tt").datagrid("endEdit", editRow);
60                     //開始編輯當前行
61                     $("#tt").datagrid("beginEdit", index);
62                 } else {
63                     $("#tt").datagrid("beginEdit", index);
64                 }
65                 editRow = index;  //記錄當前編輯行號
66             },
67             onClickCell: function (index, row) {  //單擊行事件
68                 //                $.messager.alert('提示', 'onBeforeSelect');
69                 if (editRow != undefined) {
70                     //取消當前編輯行
71                     $("#tt").datagrid("cancelEdit", editRow);
72                     editRow = undefined;   
73                 }
74             }
75         })
76     }
77 </script>
78 <table id="tt">
79 </table>

View Code