easyui datagrid 编辑模式

1.主要用到的技术：前端easyui，后台是Spring MVC，Spring data Jpa等。

2.效果展示

　　

3.局部代码展示

　　

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  3 <html>
  4 <head>
  5     <%
  6         String path = request.getContextPath();
  7     %>
  8     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  9     <title>Menu</title>
 10     <%@include file="/jsp/resource.jsp" %>
 11 </head>
 12 <body>
 13 <div style="margin:10px 0;"></div>
 14 <table id="dg" class="easyui-datagrid" title="菜单可编辑列表" style="width:700px;height:auto"
 15        data-options="
 16                 iconCls: 'icon-edit',
 17                 singleSelect: true,
 18                 toolbar: '#tb',
 19                 url: '/csmisws/menu/datas.do',
 20                 onClickRow: onClickRow
 21             ">
 22     <thead>
 23     <tr>
 24         <th data-options="field:'id',width:100">编号</th>
 25         <th data-options="field:'text',width:180,align:'right',editor:'text'">名称</th>
 26         <th data-options="field:'pid',width:155,align:'right',editor:'numberbox'">父编号</th>
 27         <th data-options="field:'url',width:200,align:'right',editor:'text'">链接</th>
 28         </th>
 29     </tr>
 30     </thead>
 31 </table>
 32 
 33 <div id="tb" style="height:auto">
 34     <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"
 35        onclick="append()">添加</a>
 36     <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"
 37        onclick="removew()">删除</a>
 38     <%--<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true"--%>
 39        <%--onclick="accept()">接受改变</a>--%>
 40     <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true"
 41        onclick="reject()">撤销改变</a>
 42     <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true"
 43        onclick="getChanges()">永久保存改变</a>
 44 </div>
 45 <script type="text/javascript">
 46     var editIndex = undefined;
 47     function endEditing() {
 48         if (editIndex == undefined) {
 49             return true
 50         }
 51         if ($('#dg').datagrid('validateRow', editIndex)) {
 52             var ed = $('#dg').datagrid('getEditor', {index: editIndex, field: 'text'});
 53             alert(ed);
 54             var text = $(ed.target).val();
 55             $('#dg').datagrid('getRows')[editIndex]['text'] = text;
 56             $('#dg').datagrid('endEdit', editIndex);
 57             editIndex = undefined;
 58             return true;
 59         } else {
 60             return false;
 61         }
 62     }
 63     function onClickRow(index) {
 64         if (editIndex != index) {
 65             if (endEditing()) {
 66                 $('#dg').datagrid('selectRow', index)
 67                         .datagrid('beginEdit', index);
 68                 editIndex = index;
 69             } else {
 70                 $('#dg').datagrid('selectRow', editIndex);
 71             }
 72         }
 73     }
 74     function append() {
 75         if (endEditing()) {
 76             $('#dg').datagrid('appendRow', {status: 'P'});
 77             editIndex = $('#dg').datagrid('getRows').length - 1;
 78             $('#dg').datagrid('selectRow', editIndex)
 79                     .datagrid('beginEdit', editIndex);
 80         }
 81     }
 82     function removew() {
 83         if (editIndex == undefined) {
 84             return
 85         }
 86         $('#dg').datagrid('cancelEdit', editIndex)
 87                 .datagrid('deleteRow', editIndex);
 88         editIndex = undefined;
 89     }
 90 //    function accept() {
 91 //        if (endEditing()) {
 92 //            $('#dg').datagrid('acceptChanges');
 93 //        }
 94 //    }
 95     function reject() {
 96         $('#dg').datagrid('rejectChanges');
 97         editIndex = undefined;
 98     }
 99     function getChanges() { // save the changed data to the database.
100         endEdit();// 获取编辑过的信息，需要结束编辑状态
101         var rows = $('#dg').datagrid('getChanges');
102         if (rows.length) {
103             var inserted = $('#dg').datagrid('getChanges', "inserted");
104             var deleted = $('#dg').datagrid('getChanges', "deleted");
105             var updated = $('#dg').datagrid('getChanges', "updated");
106             // 打包整理修改过的数据
107             var effectRow = new Object();
108             if (inserted.length) {
109                 effectRow["inserted"] = JSON.stringify(inserted);
110             }
111             if (deleted.length) {
112                 effectRow["deleted"] = JSON.stringify(deleted);
113             }
114             if (updated.length) {
115                 effectRow["updated"] = JSON.stringify(updated);
116             }
117 //            alert(JSON.stringify(effectRow));
118             // 提交数据至后台数据库
119             $.ajax({
120                 url: "/csmisws/menu/savedata.do",
121                 type: "POST",
122                 data: effectRow,
123                 dataTyoe: "JSON",
124                 success: function () {
125                     $.messager.alert("提示", "提交成功了！");
126                     $('#dg').datagrid('acceptChanges');
127                 }, error: function () {
128                     $.messager.alert("提示", "提交错误了！");
129                     $('#dg').datagrid('acceptChanges');
130                 }
131             });
132         }
133     }
134 
135     function endEdit() {
136         var rows = $('#dg').datagrid('getRows');
137         for (var i = 0; i < rows.length; i++) {
138             $('#dg').datagrid('endEdit', i);
139         }
140         editIndex = undefined;
141     }
142 </script>
143 </body>
144 </html>
Jsp及Js代码
public Object save(String inserted,
                       String deleted,
                       String updated) {
        System.out.println("inserted " + inserted);
        System.out.println("deleted " + deleted);
        System.out.println("updated " + updated);
        int sta = 0;
        try {
            //insert data
            if (inserted != null) {
                List<Menu> inserts = JSON.parseArray(inserted, Menu.class);
                menuDaoJpa.save(inserts);
            }
            //deleted data
            if (deleted != null) {
                List<Menu> deletes = JSON.parseArray(deleted, Menu.class);
                menuDaoJpa.delete(deletes);
            }
            //update data
            if (updated != null) {
                List<Menu> updates = JSON.parseArray(updated, Menu.class);
                for (Menu m : updates) {
                    Menu existm = menuDaoJpa.findById(m.getId());
                    if (existm != null) {
                        existm.setText(m.getText());
                        existm.setPid(m.getPid());
                        existm.setUrl(m.getUrl());
                        menuDaoJpa.flush();
                    }
                }
            }
            sta = 1;
        } catch (Exception ex) {
            ex.printStackTrace();
        } finally {
            return sta;
        }
    }
Java代码
 1 @Id
 2     @Column(name = "ID")
 3     @GeneratedValue(strategy = GenerationType.AUTO)
 4     private Long id;
 5 
 6     @Column(name = "TEXT")
 7     private String text;
 8 
 9     @Column(name = "PID")
10     private Long pid;
11 
12     @Column(name = "URL")
13     private String url;
14 ...
Menu 实体类代码


4.总结，datagrid可编辑，如果字段比较少的话推荐，这样就不需要增删改查分开进行。

posted @ 2016-11-14 16:19  咕噜平子  阅读(561)  评论(0)  编辑  收藏  举报