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