EasyUI效果--DataGrid的编辑效果

DataGrid的编辑效果是我目前使用的easyUI的第三个效果，相对于前两个，这个算是比较复杂点了。
    运行起来的效果，大概就是这样，任意点击某行，然后该行变为可以编辑的,失去焦点之后,该行恢复.点击上面的按钮Append,Remove,Accept,Reject,getChanges可以添加一行,删除一行,保存修改,撤销修改,获取改变的数据.

    之前拿到官网的源码之后,进行测试.开始没细看代码,删了几列数据,包括Product列,就发现只有第一次点击数据会有编辑效果,并且之后不论怎么做都不会恢复到只读的样子.

    后来,看代码发现,点击行时,会判断endEditing方法的返回值是否为true.
    分析代码,最开始editIndex编辑索引为undefined,假设我点击了第二行,那么editIndex为1.执行onClickRow()的方法,由于index为1 != undefined,所以执行判断endEditing(结束编辑)的方法是否为true,若结束,则将该选中行(第二行)执行beginEdit方法,并且将editIndex更新为1.若没有结束,则还是选中之前那行.
    而结束编辑方法,先判断editIndex是否为undefined,若是,则直接返回true,表示结束;若不是,假设我之前点击了第二行,然后再点击第三行,则目前是index为2,而editIndex为1.则判断第二行是否为有效行,不是就直接返回false,表示没有结束.否则,需要将该有效行的修改获取到值,其他还好说,但是下拉框需要获取到valueField和textFiled,所以根据valueField值字段,获取到第二行的productid的指定的编辑器ed ,并且获取该下拉框中的值textFiled,将该值赋到productname字段上,最后endEit结束编辑,并设置editIndex为undefined,并且返回true.
    简而言之,该方法的作用就是:结束之前的编辑,只是无效的结束不掉,有效的要先保存下再结束,而第一次选中行,那不管如何都是结束了.
    而删掉Product列之后,由于没有productid,所以ed为null,获取不到该字段的编辑器,然后$(ed.target)就抛异常TypeError: ed is null,执行else,返回false,endEditing不结束,所以就只能有一次编辑效果了.

[javascript]

  1. <script type="text/javascript">
  2. var editIndex = undefined;
  3. function endEditing(){
  4. if (editIndex == undefined){return true}
  5. if ($(‘#dg‘).datagrid(‘validateRow‘, editIndex)){
  6. var ed = $(‘#dg‘).datagrid(‘getEditor‘, {index:editIndex,field:‘productid‘});
  7. var productname = $(ed.target).combobox(‘getText‘);
  8. $(‘#dg‘).datagrid(‘getRows‘)[editIndex][‘productname‘] = productname;
  9. $(‘#dg‘).datagrid(‘endEdit‘, editIndex);
  10. editIndex = undefined;
  11. return true;
  12. } else {
  13. return false;
  14. }
  15. }
  16. function onClickRow(index){
  17. if (editIndex != index){
  18. if (endEditing()){
  19. $(‘#dg‘).datagrid(‘selectRow‘, index)
  20. .datagrid(‘beginEdit‘, index);
  21. editIndex = index;
  22. } else {
  23. $(‘#dg‘).datagrid(‘selectRow‘, editIndex);
  24. }
  25. }
  26. }

然后是我的代码,先是html代码,效果是上图一样,只是字段和名字不同.

[html]

  1. <!--查询主页面*******start************************************************************************ -->
  2. <div title="查询规则" class="easyui-panel"
  3. style="padding: 20px; width: 100%">
  4. <input id="searchtxt" class="easyui-searchbox" style="width: 350px"
  5. searcher="doSearch" /> <a href="javascript:void(0)"
  6. class="easyui-linkbutton" data-options="iconCls:‘icon-search‘"
  7. onclick="doSearchButton()" style="width: 80px">查询</a>
  8. </div>
  9. <table id="dg" title="规则列表" class="easyui-datagrid"
  10. url="${pageContext.request.contextPath}/queryPageRule"
  11. style="width: 100%; height: 450px" toolbar="#toolbar"
  12. pagination="true" rownumbers="true" fitColumns="true" sortName="sort"
  13. sortOrder="asc" remoteSort=false singleSelect="true"
  14. data-options="iconCls: ‘icon-edit‘,onClickRow: onClickRow">
  15. <thead>
  16. <tr>
  17. <th data-options="field:‘id‘,width:30,hidden:‘hidden‘">规则id</th>
  18. <th
  19. data-options="field:‘rule‘,width:30,
  20. formatter:function(value,row){
  21. return row.rule;
  22. },
  23. editor:{
  24. type:‘combobox‘,
  25. options:{
  26. valueField:‘rule‘,
  27. textField:‘rule‘,
  28. url:‘rule1.json‘,
  29. method:‘get‘,
  30. required:true
  31. }
  32. }">规则</th>
  33. <th
  34. data-options="field:‘type‘,width:30,
  35. formatter:function(value,row){
  36. return row.type;
  37. },
  38. editor:{
  39. type:‘combobox‘,
  40. options:{
  41. valueField:‘type‘,
  42. textField:‘type‘,
  43. method:‘get‘,
  44. url:‘ruleType.json‘,
  45. required:true
  46. }
  47. }">类型</th>
  48. <th data-options="field:‘sort‘,align:‘right‘,width:30">优先级</th>
  49. <th
  50. data-options="field:‘startIndex‘,width:30,align:‘right‘,editor:{type:‘numberbox‘}">起始位置</th>
  51. <th
  52. data-options="field:‘length‘,width:30,align:‘right‘,editor:{type:‘numberbox‘}">长度</th>
  53. <th
  54. data-options="field:‘realLength‘,width:30,align:‘right‘,editor:{type:‘numberbox‘}">原长度</th>
  55. <th data-options="field:‘result‘,width:30,editor:‘text‘">效果</th>
  56. <th
  57. data-options="field:‘isValid‘,formatter:formatValid,width:20,align:‘center‘,editor:{type:‘checkbox‘,options:{on:‘启用‘,off:‘停用‘}}">是否启用</th>
  58. </tr>
  59. </thead>
  60. </table>
  61. <div id="toolbar" width="50">
  62. <a href="javascript:void(0)" class="easyui-linkbutton"
  63. data-options="iconCls:‘icon-add‘,plain:true" onclick="append()">添加</a>
  64. <a href="javascript:void(0)" class="easyui-linkbutton"
  65. data-options="iconCls:‘icon-remove‘,plain:true" onclick="removeit()">删除</a>
  66. <a href="javascript:void(0)" class="easyui-linkbutton"
  67. data-options="iconCls:‘icon-edit‘,plain:true" onclick="MoveUp()">上移</a>
  68. <a href="javascript:void(0)" class="easyui-linkbutton"
  69. data-options="iconCls:‘icon-edit‘,plain:true" onclick="MoveDown()">下移</a>
  70. <a href="javascript:void(0)" class="easyui-linkbutton"
  71. data-options="iconCls:‘icon-save‘,plain:true" onclick="accept()">保存</a>
  72. <a href="javascript:void(0)" class="easyui-linkbutton"
  73. data-options="iconCls:‘icon-undo‘,plain:true" onclick="reject()">撤销</a>
  74. <a href="javascript:void(0)" class="easyui-linkbutton"
  75. data-options="iconCls:‘icon-undo‘,plain:true" onclick="saveUpDow()">保存优先级</a>
  76. </div>
  77. <!--查询主页面*******end************************************************************************ -->

主要是这样的,首先规则和类型列都是下拉框列,优先级列不议不可编辑;起始位置,长度和原长度的编辑器都是可编辑的数字框,效果是文本框,而是否启用显示的是中文"启用","停用".而按钮,除了正常的添加,删除,保存和撤销,还有上移和下移,以及保存优先级,这三个按钮是用来处理优先级的.
    其中,添加方法,就是在结束之前的编辑之后,添加一行,其中isValid行设置默认为"启用",而sort优先级和该表的数据行数一样.而editIndex编辑索引,假设现在有8行,再加一行为9行,则sort为9.appendRow执行完之后,datagrid就是9条数据了,而编辑索引应该为8.

[javascript]

  1. function append() {
  2. if (endEditing()) {
  3. $(‘#dg‘).datagrid(‘appendRow‘, {
  4. isValid : ‘启用‘,
  5. sort:$(‘#dg‘).datagrid(‘getRows‘).length + 1,
  6. });
  7. editIndex = $(‘#dg‘).datagrid(‘getRows‘).length - 1;
  8. $(‘#dg‘).datagrid(‘selectRow‘, editIndex).datagrid(‘beginEdit‘,
  9. editIndex);
  10. }
  11. }

移除一行,先选中一行,然后取消对该行的编辑,然后删了该行,并将编辑索引清了.

[javascript]

  1. function removeit() {
  2. if (editIndex == undefined) {
  3. return
  4. }
  5. $(‘#dg‘).datagrid(‘cancelEdit‘, editIndex).datagrid(‘deleteRow‘,
  6. editIndex);
  7. editIndex = undefined;
  8. }

撤销修改,则将所有没有保存的数据,进行还原.

[javascript] view plain copy

  1. function reject() {
  2. $(‘#dg‘).datagrid(‘rejectChanges‘);
  3. editIndex = undefined;
  4. }

而提交数据,将之前修改的结果进行持久化保存.还是先结束之前的编辑,然后获取到所有修改,添加,删除和修改的.将所有修改中的isValid的启用改为true,因为后台该字段为boolean类型.并将所有的添加,删除和修改的结果都用JSON.stringify处理,将数据通过Contoller处理,最后用acceptChanges提交所有修改.

[javascript]

  1. function accept() {
  2. if (endEditing()) {
  3. //利用easyui控件本身的getChange获取新添加，删除，和修改的内容
  4. if ($("#dg").datagrid(‘getChanges‘).length) {
  5. var inserted = $("#dg").datagrid(‘getChanges‘, "inserted");
  6. var deleted = $("#dg").datagrid(‘getChanges‘, "deleted");
  7. var updated = $("#dg").datagrid(‘getChanges‘, "updated");
  8. var effectRow = new Object();
  9. if (inserted.length) {
  10. inserted.forEach(function(e){
  11. if(e.isValid == "启用") {
  12. e.isValid = true;
  13. }else {
  14. e.isValid = false;
  15. }
  16. })
  17. effectRow["inserted"] = JSON.stringify(inserted);
  18. }
  19. if (deleted.length) {
  20. deleted.forEach(function(e){
  21. if(e.isValid == "启用") {
  22. e.isValid = true;
  23. }else {
  24. e.isValid = false;
  25. }
  26. })
  27. effectRow["deleted"] = JSON.stringify(deleted);
  28. }
  29. if (updated.length) {
  30. updated.forEach(function(e){
  31. if(e.isValid == "启用") {
  32. e.isValid = true;
  33. }else {
  34. e.isValid = false;
  35. }
  36. })
  37. effectRow["updated"] = JSON.stringify(updated);
  38. }
  39. $.post("${pageContext.request.contextPath}/add", effectRow, function(rsp) {
  40. if(rsp.status){
  41. $.messager.alert("提示", "提交成功！");
  42. $dg.datagrid(‘acceptChanges‘);
  43. }
  44. }, "JSON").error(function() {
  45. $.messager.alert("提示", "提交错误！");
  46. });
  47. }else {
  48. var updown = $("#dg").datagrid(‘getData‘);
  49. if (updown.length) {
  50. updown.forEach(function(e){
  51. if(e.isValid == "启用") {
  52. e.isValid = true;
  53. }else {
  54. e.isValid = false;
  55. }
  56. })
  57. $.post("${pageContext.request.contextPath}/add", function(rsp) {
  58. if(rsp.status){
  59. $.messager.alert("提示", "提交成功！");
  60. $dg.datagrid(‘acceptChanges‘);
  61. }
  62. }, "JSON").error(function() {
  63. $.messager.alert("提示", "提交错误！");
  64. });
  65. }
  66. }
  67. }
  68. }

而对于优先级的修改,是这样处理的.上移和下移按钮分别执行MoveUp和MoveDown方法,获取到当前选中行,以及该行的索引,执行mysort方法,传入当前行的索引,以及‘up‘指令,以及对应的datagrid名.同理moveDown一样,只是指令为‘down‘.

[javascript]

  1. //上移
  2. function MoveUp() {
  3. var row = $("#dg").datagrid(‘getSelected‘);
  4. var index = $("#dg").datagrid(‘getRowIndex‘, row);
  5. mysort(index, ‘up‘, ‘dg‘);
  6. editIndex = undefined;
  7. }
  8. //下移
  9. function MoveDown() {
  10. var row = $("#dg").datagrid(‘getSelected‘);
  11. var index = $("#dg").datagrid(‘getRowIndex‘, row);
  12. mysort(index, ‘down‘, ‘dg‘);
  13. editIndex = undefined;
  14. }

而mysort方法,是这样处理的,若为up,则根据传入的index和datagrid的名字获取到本行以及上一行的数据,将本行和上一行的数据进行交换,并且刷新,然后还是选中之前的行.而优先级的值,是和行号保持一致的.down同理.

[javascript]

  1. function mysort(index, type, gridname) {
  2. if ("up" == type) {
  3. if (index != 0) {
  4. //本行
  5. var toup = $(‘#‘ + gridname).datagrid(‘getData‘).rows[index];
  6. //上一行
  7. var todown = $(‘#‘ + gridname).datagrid(‘getData‘).rows[index - 1];
  8. //本行的sort-1,本行的上一行的sort+1 (如8(index为7),上移为7;则原来的7,变为8)
  9. toup.sort = index;
  10. todown.sort = index+1;
  11. $(‘#‘ + gridname).datagrid(‘getData‘).rows[index] = todown;
  12. $(‘#‘ + gridname).datagrid(‘getData‘).rows[index - 1] = toup;
  13. $(‘#‘ + gridname).datagrid(‘refreshRow‘, index);
  14. $(‘#‘ + gridname).datagrid(‘refreshRow‘, index - 1);
  15. $(‘#‘ + gridname).datagrid(‘selectRow‘, index - 1);
  16. }
  17. } else if ("down" == type) {
  18. var rows = $(‘#‘ + gridname).datagrid(‘getRows‘).length;
  19. if (index != rows - 1) {
  20. //本行
  21. var todown = $(‘#‘ + gridname).datagrid(‘getData‘).rows[index];
  22. //下一行
  23. var toup = $(‘#‘ + gridname).datagrid(‘getData‘).rows[index + 1];
  24. //本行的sort+1,本行的上一行的sort-1 (如8(index为7),下移为9;则原来的9,变为8)
  25. toup.sort = index + 1;
  26. todown.sort = index + 2;
  27. $(‘#‘ + gridname).datagrid(‘getData‘).rows[index + 1] = todown;
  28. $(‘#‘ + gridname).datagrid(‘getData‘).rows[index] = toup;
  29. $(‘#‘ + gridname).datagrid(‘refreshRow‘, index);
  30. $(‘#‘ + gridname).datagrid(‘refreshRow‘, index + 1);
  31. $(‘#‘ + gridname).datagrid(‘selectRow‘, index + 1);
  32. }
  33. }
  34. }<span style="font-family: KaiTi_GB2312; background-color: rgb(255, 255, 255);">      </span>

而保存就是将所有的数据都获取到,进行保存.
   后台contoller中如何处理数据?将数据传到后台后,从request获取到值,用JsonUntils的fromJson方法将数据从json转为实体list.然后更新实体list.

[javascript]

    1. /**
    2. * 添加规则
    3. *
    4. * @param rule
    5. * @param response
    6. */
    7. @RequestMapping("/add")
    8. public void addRule(Rule rule, Object effectRow, HttpServletRequest request, HttpServletResponse response) {
    9. logger.info("Controller开始执行添加规则的方法");
    10. // 获取编辑数据 这里获取到的是json字符串
    11. String updown = request.getParameter("updown");
    12. boolean flagUpdown = false;
    13. if (updown != null) {
    14. listUpdown = (List<Rule>) JsonUtils.fromJson(updown, new TypeToken<List<Rule>>() {
    15. }.getType());
    16. flagUpdated = ruleBean.updateEntitys(listUpdown);
    17. }
    18. try {
    19. try {
    20. jacksonJsonUntil.BeanToJson(response, flagUpdown);
    21. } catch (Exception e) {
    22. e.printStackTrace();
    23. }
    24. } catch (Exception e) {
    25. logger.error("Controller的添加规则失败", e);
    26. throw e;
    27. }
    28. logger.info("Controller执行完成添加规则的方法");
    29. }
时间： 2024-08-29 13:45:44

EasyUI效果--DataGrid的编辑效果的相关文章

SpringMVC+easyUI中datagrid行编辑模式（添加数据）实现_2014.5.2

一.概述 根据我们平常的习惯,一共有两种修改模式,一种是弹窗是修改,将原有的数据提取到dialog上,然后再重新提交到后台(好像easyui里面有个onAfterEdit,这个事件里面有三个参数,其中的一个参数就是发现数据是否有改变),而第二种方式就是实现行编辑模式,在原有的datagrid上添加一个空行,(本例是实现添加数据,不考虑原有数据). 二.实现 1.后台就不赘言了.直接上代码,但是我还是有个疑问,对于SpingMVC的Controller层次中的方法的**入参**,我在前台通过aja

关于easyUI的datagrid的编辑功能时的问题

编辑时,如果form中包含了id输入域,会发送一个{id,id}这样的字符串到服务端,因为javascript的function edit(){}逻辑中,已经拿到Id提交了.所以,编辑和添加功能共用的form,不能包含id输入项. 如下:

easyui datagrid可编辑表格使用经验分享

文章目录 1相关接口方法 2列属性formatter 3编辑器类型 3.1基于my97的编辑器 3.2简单的密码编辑器 3.3动态增加/删除编辑器 4字段的级联操作 4.1combobox的级联操作 4.2文本类型编辑器的级联 4.3编辑字段对非编辑字段的依赖 5数据提交与恢复 5.1利用loading提高用户体验 5.2结束编辑后获取原始数据 6常见问题集锦 6.1表头和数据表格错位 7效果演示 对于Easyui的可编辑表格,个人也是较为陌生的,尽管在操作方式上可能比使用表单修改的方式便捷,但

easyui datagrid 批量编辑和提交

前台主要代码: <script type="text/javascript"> $(function() { var $dg = $("#dg"); $dg.datagrid({ url : "servlet/list", width : 700, height : 250, columns : [ [ { field : 'code', title : 'Code', width : 100, editor : "vali

Atom设置震撼的编辑效果

在代码编辑器.文本编辑器领域,有着不少的「神器」级的产品,如历史悠久的 VIM.Emacs 以及如今当红的SublimeText.另外还有 EditPlus.NotePad++.UltraEdit 等一大堆流行的利器,可谓百家争鸣. 然而,作为目前全球范围内影响力最大的代码仓库/开源社区,GitHub 的程序员们并不满足于此.他们使用目前最先进流行的技术重新打造了一款称为“属于21世纪”的代码编辑器——Atom, 它开源免费跨平台,并且整合 Git 并提供类似 SublimeText 的包管理功

在EasyUI的DataGrid中嵌入Combobox

在做项目时,需要在EasyUI的DataGrid中嵌入Combobox,花了好几天功夫,在大家的帮助下,终于看到了它的庐山真面: 核心代码如下: <html> <head> @*添加Jquery EasyUI的样式*@ <link href="@Url.Content("../../Content/JqueryEasyUI/themes/default/easyui.css")" rel="stylesheet" /

EasyUI中datagrid实现显示、增加、 删除、 修改、 查询操作(后台代码C#)

2datagrid加载数据.代码如下所示 一.数据的显示 1新建HtmlPage2.html页面,引入相关文件.如下所示 <script src="easyui/js/jquery-1.8.2.min.js"></script>  <script src="easyui/js/jquery.easyui.min.js"></script>  <link href="easyui/css/themes/d

Easyui的datagrid结合hibernate实现数据分页

最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1.先来看看效果,二话不说,上图直观! 2.easyui的datagrid的使用方法 在这里,datagrid的使用我不做过多讲解,俺毕竟是初学者,不敢班门弄斧.所以就简单带一下. ①.在easyui的layout中的center中定义一个table,id为"datagridTable". <div region="center"

EasyUI的DataGrid日期列(datebox)正确显示json时间格式

问题描述: 前端使用EasyUI,后台使用Spring MVC, 数据库里面存储的时间格式为:2014-06-10,但是后台返回给前台页面的数据是json格式的,类似于:1402367297000的形式,日期列datebox是无法解析的.具体如下图: 自己也是EasyUI小白,网上查查资料,倒腾下总算搞出来了,这里做下记录. 一般情况下我们所需的日期格式都是:2014-02-02或者2014/09/09形式的,因此首先要考虑实现一个添加日期格式化的插件. jQuery日期格式化 在自己的js中添