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可编辑,如果字段比较少的话推荐,这样就不需要增删改查分开进行。

时间: 2024-07-30 13:41:02

EasyUI 可以编辑datagrid的相关文章

EasyUI可编辑datagrid用combobox实现多级联动

<body> <script type="text/javascript"> $(function(){ var editing ; //判断用户是否处于编辑状态 var flag ; //判断新增和修改方法 $('#set_schedule').datagrid({ idField:'id' , fitColumns: false , url:'scheduleAction_loadScheduleData.action?sureDocumentId='+$(

easyui行编辑:利用append row添加行,直接在行中编辑,ajax提交保存

今天工作用到了easyui行编辑,在这里总结一下,不会的同学可以看看,顺便吐槽一下,网上的很多博客都是粘贴复制的,内容很乱 ,而且看不懂,不知道这些粘贴复制的怀的是什么心,不但没用,还影响别人搜索. 呼吁大家在写博客的时候认真一些,别只粘贴复制,至少可以自己运行好了贴上自己的代码和一点感想,对别人用处很大的. 好了,正题开始--> 我用的是easyui 1.4 效果如下: 点击添加按钮,在第二行的位置添加新行,点击单元格输入内容,点保存通过ajax提交. 修改则直接点击单元格修改,点保存提交.

jQuery EasyUI教程之datagrid应用

三.设定或定制各种功能 1.增加分页 创建DataGrid数据表格 设置“url”属性,用来装入远端服务器数据,服务器返回JSON格式数据. Html代码代码   <table id="tt" class="easyui-datagrid" style="width:600px;height:250px" url="datagrid2_getdata.php" title="Load Data" ic

jQuery EasyUI API - Grid - DataGrid [原创汉化官方API]

jQuery EasyUI API - Grid - DataGrid [原创汉化官方API] 2014-04-02   DataGrid 继承自 $.fn.panel.defaults,覆盖默认值 $.fn.datagrid.defaults. DataGrid控件显示数据以表格的形式提供了丰富的选择,支持排序,组和编辑数据. DataGrid控件被设计来减少开发时间和要求开发商没有特定的知识.它是轻量级的和功能丰富的.合并单元格,多列标题,冻结列和页脚是仅有的几个特点. [依赖于] pane

Easy-UI 动态添加DataGrid的Toolbar按钮

在前人的基础上进行的修改,不知道他是从哪里引用来的,所以没有粘贴引用地址. 原代码不支持1.3.6. 修改功能: 1.如果之前没有添加过工具,用这个方法不能添加(已修复): 2.估计是不支持1.3.6,所以在1.3.6下不能删除按钮(已修复): 3.添加了在删除最有一个按钮后把按钮容器删除掉: 插件代码: $.extend($.fn.datagrid.methods, { addToolbarItem: function (jq, items) { return jq.each(function

miniUI 可编辑datagrid获取值的问题

<div id="variableGrid" class="mini-datagrid" borderStyle="border-right:0px;border-top:0px;" style="height: auto;"> <div property="columns"> <div field="varCode" name="varCode&

jQuery EasyUI教程之datagrid应用(三)

今天继续之前的整理,上篇整理了datagrid的数据显示及其分页功能 获取数据库数据显示在datagrid中:jQuery EasyUI教程之datagrid应用(一) datagrid实现分页功能:jQuery EasyUI教程之datagrid应用(二) 接下来就是数据的增删改查了,首先我们在页面中添加功能按钮 这里很简单就是datagrid的toolbar属性 接下来我们实现按键的功能 查询比较麻烦我们最后写,先写添加吧,既然要添加,就应该有表格或是输入的文本框吧,还要进行提交,那就要有f

jQuery EasyUI教程之datagrid应用(二)

上次写到了让数据库数据在网页datagrid显示,我们只是单纯的实现了显示,仔细看的话显示的信息并没有达到我们理想的效果,这里我们丰富一下: 上次显示的结果是这样的 点击查看上篇:jQuery EasyUI教程之datagrid应用(一) 这里不难发现生日的格式是毫秒(long型数据),并不是我们想要的年月日的格式,那我们就修改一下 我们在js中写入格式时间的方法,并在生日一列用formatter来调用方法格式时间, //格式化时间 //把long型日期转为想要类型 function getDa

easyUI中的datagrid

datagrid比较容易出错的地方,总结一下,大家可以少走弯路,也避免自己以后再犯. 1.两个属性,pageSize.pageList,其中pageSize一定要在pageList定义内,不然就报错 2.重新load的时候,传入的参数一定要为json,而且之前的queryparam中的数据不会带入 function doSearch(obj, cls, datagridId) { var data = $(obj).parent().find("fieldset").serialize