现在的位置: 首页 > easyui > Grid > datagrid > 正文
可编辑表格使用经验分享(持续更新)
2012年11月10日 datagrid ⁄ 共 10661字 评论数 69 ⁄ 被围观 54,644 views+
文章目录
[隐藏]

对于Easyui的可编辑表格,个人也是较为陌生的,尽管在操作方式上可能比使用表单修改的方式便捷,但是可编辑表格对代码质量的要求往往更高一些,不熟练的话,容易出现这样或者那样的问题,本篇文章就自己使用的经历做一些总结。

相关接口方法

Name Parameter Description
Method:
beginEdit index 使行进入可编辑状态
endEdit index 结束行的可编辑状态,所做的改动将会被临时保存
cancelEdit index 取消编辑状态,所做的改动将会还原。
getChanges type 获取被更改的行数据,返回一个对象数组,每个数组元素的内容是对应行被修改的字段键值;需要注意的是在使用acceptChanges方法之后便会清空所有变更数据,这时getChanges是获取不到数据的。入参为type,包含以下三个值:
inserted: 只获取插入的行数据;
deleted: 只获取被删除的行数据;
updated: 只获取字段有更新的行数据;
如果不设置type,将会获取所有变化的行数据
acceptChanges null 提交所有被更改的数据行,提交之后就无法使用rejectChanges方法对所作的修改做回滚操作了。
rejectChanges none 回滚所有的操作,还原为表格的最初数据,在acceptChanges之后便无法再回滚了。
validateRow index 对行数据进行校验,全部字段都校验通过才返回true,入参为行的索引.
getEditors index 获取某一行的所有编辑器,注意该方法必须在beginEdit方法执行之后,endEdit方法执行之前才能获取到编辑器,即,只有编辑状态的行才能获取到编辑器.返回为对象数组,每个元素包含以下信息:
actions: the actions that the editor can do, same as the editor definition.
target: 编辑器对应DOM的jQuery对象.
field: 字段的field.
type: 编辑器类型, 比如 'text','combobox','datebox', 等
getEditor options 获取某一行某一列的编辑器,注意该方法必须在beginEdit方法执行之后,endEdit方法执行之前才能获取到编辑器,即,只有编辑状态的行才能获取到编辑器.返回值为对象,对象信息同于getEditors。入参包含:
index: 行索引.
field: 字段的field.
addEditor params 增加某列的编辑器,params是对象,包含field属性以及editor属性,其中editor对象包含type和编辑器options属性;params也可以是一数组,用于同时操作多列.
removeEditor params 删除某列的编辑器,params可以为某列的field或者是包含多个field的数组.
Event:
onClickRow rowIndex, rowData 行点击事件,通常在该事件里面触发行的可编辑状态,使当前行可以编辑.
onBeforeEdit rowIndex, rowData 当行进入可编辑状态的时候触发该事件.
onAfterEdit rowIndex, rowData, changes 当结束可编辑状态时触发该事件,changes为对象,记录了发生变化的字段以及对应的值.
onCancelEdit rowIndex, rowData 当取消行编辑的时候调用该事件.

列属性formatter

formatter属性对于可编辑表格来讲是非常重要的,想combobox,checkbox这些编辑器,如果不用formatter进行格式化的话,最终datagrid会显示我们的key而不是我们想要的desc,所以formatter属性非常重要。

编辑器类型

根据Easyui datagrid的设计,每一列可以对应一种编辑器类型,比如说校验框,下拉框等。框架自带了以下几种编辑器:
text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree

除了框架自带的编辑器,datagrid还提供了灵活的扩展接口,用户可以方便地自己扩展编辑器,比如官方提到的一个例子:

  1. $.extend($.fn.datagrid.defaults.editors, {
  2.     text: {
  3.         init: function(container, options){
  4.             var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
  5.             return input;
  6.         },
  7.         getValue: function(target){
  8.             return $(target).val();
  9.         },
  10.         setValue: function(target, value){
  11.             $(target).val(value);
  12.         },
  13.         resize: function(target, width){
  14.             var input = $(target);
  15.             if ($.boxModel == true){
  16.                 input.width(width - (input.outerWidth() - input.width()));
  17.             } else {
  18.                 input.width(width);
  19.             }
  20.         }
  21.     }
  22. });
基于my97的编辑器

这里提别提一下将my97日期控件整合到可编辑表格的方法,只要扩展编辑器类型就可以了,当然了网页首先要引入my97的WdatePicker.js文件,然后仿照text编辑器写my97日期型编辑器:

  1. $.extend($.fn.datagrid.defaults.editors, {
  2.     my97 : {
  3.         init : function(container, options) {
  4.             var input = $('<input class="Wdate" type="text" onclick="WdatePicker({dateFmt:\'yyyy-MM-dd HH:mm:ss\',readOnly:true});"  />')
  5.                     .appendTo(container);
  6.             return input;
  7.         },
  8.         getValue : function(target) {
  9.             return $(target).val();
  10.         },
  11.         setValue : function(target, value) {
  12.             $(target).val(value);
  13.         },
  14.         resize : function(target, width) {
  15.             var input = $(target);
  16.             if ($.boxModel == true) {
  17.                 input.width(width - (input.outerWidth() - input.width()));
  18.             } else {
  19.                 input.width(width);
  20.             }
  21.         }
  22.     }
  23. });

为什么要将my97整合到可编辑表格中?无非是垂涎它的强大功能,特别是时间限制,方便的格式化定义等。而对于时间限制,好像仅仅靠扩展这个编辑器还远远不够,比如说我两个字段,一个是开始日期,一个结束日期,两个字段彼此是有约束关系的,我们该如何处理?这个后面会进一步给出解决方案。

简单的密码编辑器

请参见:http://www.easyui.info/archives/646.html

动态增加/删除编辑器

这两个方法原文出自夏悸的http://easyui.btboys.com/post-83.html,我在此基础上稍微做了修改,主要是将方法体放到each里面了,从而支持多个grid一起操作。

  1. $.extend($.fn.datagrid.methods, {
  2.     addEditor : function(jq, param) {
  3.         return jq.each(function(){
  4.             if (param instanceof Array) {
  5.                 $.each(param, function(index, item) {
  6.                     var e = $(jq).datagrid('getColumnOption', item.field);
  7.                     e.editor = item.editor;
  8.                 });
  9.             } else {
  10.                 var e = $(jq).datagrid('getColumnOption', param.field);
  11.                 e.editor = param.editor;
  12.             }
  13.         });
  14.     },
  15.     removeEditor : function(jq, param) {
  16.         return jq.each(function(){
  17.             if (param instanceof Array) {
  18.                 $.each(param, function(index, item) {
  19.                     var e = $(jq).datagrid('getColumnOption', item);
  20.                     e.editor = {};
  21.                 });
  22.             } else {
  23.                 var e = $(jq).datagrid('getColumnOption', param);
  24.                 e.editor = {};
  25.             }
  26.         });
  27.     }
  28. });

这两个扩展适合动态控制某列是否可编辑以及该列的编辑器类型,但是使用的时候要特别注意:当前表格还有处于编辑状态行的时候不要用这两个方法,会造成getEditor方法获取数据不准确,所以这两个扩展方法较为适合单行编辑模式

字段的级联操作

combobox的级联操作

那例子来分析,比如行政区域分级别,南京市下面有江宁区,栖霞区等;而连云港市下面有灌云县等。当我们选择不同城市的时候,区县级别的行政区域combobox内容要动态变化,这就是级联。

combobox要想实现级联,方式其实很简单,利用combobox的onSelect和onShowPanel事件就可以较为轻松地实现。onSelect事件用于我们例子提到的市级行政区域,而onShowPanel使用用于我们提到的区县级行政区域。两者都是为了动态加载区县级区域的内容。例如:

  1. <th rowspan="2" data-options="field:'city',width:100,align:'center',formatter:regionFormatter,
  2.     editor:{
  3.         type:'combobox',
  4.         options:{
  5.             valueField:'id',
  6.             textField:'name',
  7.             data:getRegions(''),
  8.             required:true,
  9.             onSelect:function(record){
  10.                 var target = $('#tt').datagrid('getEditor',{'index':editingIndex,'field':'county'}).target;
  11.                 target.combobox('clear');
  12.                 target.combobox('loadData',getRegions(record.id));
  13.                 target.combobox('setValue',getRegions(record.id)[0].id);
  14.             }
  15.         }
  16. }">城市</th>
  17. <th rowspan="2" data-options="field:'county',width:100,align:'center',formatter:regionFormatter,
  18.     editor:{
  19.         type:'combobox',
  20.         options:{
  21.             valueField:'id',
  22.             textField:'name',
  23.             data:regions,
  24.             required:true,
  25.             onShowPanel:function(){
  26.                 var targetCity = $('#tt').datagrid('getEditor',{'index':editingIndex,'field':'city'}).target;
  27.                 var targetCounty = $('#tt').datagrid('getEditor',{'index':editingIndex,'field':'county'}).target;
  28.                 var valueCity = targetCity.combobox('getValue');
  29.                 var valueCounty = targetCounty.combobox('getValue');
  30.                 targetCounty.combobox('clear');
  31.                 targetCounty.combobox('loadData',getRegions(valueCity));
  32.                 targetCounty.combobox('setValue',valueCounty);
  33.             }
  34.         }
  35. }">区县</th>

需要注意的是,代码中我们大量使用了getEditor方法,这个方法其实才是联动的纽带,通过它,我们可以实现编辑器之间交互的载体,通过它,我们可以定位到任意一个存在的编辑器,进而对其进行必要的操作。

文本类型编辑器的级联

类似文本类型编辑器主要是text,textarea,numberbox,validatebox,datebox这些编辑器。这个地方,我们拿前面提到的例子,日期框,而是使用我们扩展的my97编辑器,我们利用它来实现两个日期间的约束。

首先最重要的还是getEditor方法,它负责不同编辑器之间交互的载体;再者,对于文本,我们要自己绑定事件去实现对其它编辑器的约束,而且绑定的事情最好是有自己的命名空间,防止跟datagrid自带的事件冲突,这地方我们使用click.myNameSpace。直接看实现日期框联动的代码可能更为清晰:

  1. onClickRow:function (rowIndex) {
  2.     editingIndex = rowIndex;
  3.     if (lastIndex != rowIndex) {
  4.         if ($(this).datagrid('validateRow', lastIndex)) {
  5.             $(this).datagrid('endEdit', lastIndex);
  6.             $(this).datagrid('beginEdit', rowIndex);
  7.             var startTimeEditor = $('#tt').datagrid('getEditor', {
  8.                         index : rowIndex,
  9.                         field : "startTime"
  10.                     });
  11.             var endTimeEditor = $('#tt').datagrid('getEditor', {
  12.                         index : rowIndex,
  13.                         field : "endTime"
  14.                     });
  15.             if (startTimeEditor) {
  16.                 startTimeEditor.target.attr("onclick""");
  17.                 startTimeEditor.target.unbind("click.myNameSpace").bind(
  18.                         "click.myNameSpace"function(e) {
  19.                             var initObj = {
  20.                                 dateFmt : 'yyyy-MM-dd',
  21.                                 readOnly : false
  22.                             };
  23.                             if (endTimeEditor.target.val() != "")
  24.                                 initObj["maxDate"] = endTimeEditor.target.val();
  25.                             WdatePicker(initObj);
  26.                         });
  27.             }
  28.             if (endTimeEditor) {
  29.                 endTimeEditor.target.attr("onclick""");
  30.                 endTimeEditor.target.unbind("click.myNameSpace").bind(
  31.                         "click.myNameSpace"function(e) {
  32.                             var initObj = {
  33.                                 dateFmt : 'yyyy-MM-dd',
  34.                                 readOnly : false
  35.                             };
  36.                             if (startTimeEditor.target.val() != "")
  37.                                 initObj["minDate"] = startTimeEditor.target
  38.                                         .val();
  39.                             WdatePicker(initObj);
  40.                         });
  41.             }
  42.             lastIndex = rowIndex;
  43.         } else {
  44.             $(this).datagrid('selectRow', lastIndex);
  45.         }
  46.     }
  47. }

我们首先使用startTimeEditor.target.attr("onclick", "");将这种事情绑定方式删除,然后利用jQuery的事件机制做绑定,可以看到代码里面其实是对my97编辑器进行了重构,从而实现my97日期框可选日期范围的限制。

编辑字段对非编辑字段的依赖

有时候可编辑字段对不可编辑字段也有依赖关系。一个典型的场景,如饭店结账表格,有“应收金额(自动计算,不可编辑)”字段和“实收金额(收银员手工填写,可编辑)”字段,这种情况下,实收金额显然是不能大于应收金额的。

其实这种情况的处理比两个可编辑字段的级联更为简单,利用前面提到的“动态增加/删除编辑器”扩展,我们只要在onClickRow事件中动态设置“实收金额”字段的编辑器类型就可以了。

假设“实收金额”字段的编辑器类型是validatebox,使用自己扩展的max最大值规则,我们只要动态设置最大值就行了,如下代码仅供参考:

  1. onClickRow:function(rowIndex){
  2.     if (lastIndex != rowIndex){
  3.         $('#tt').datagrid('endEdit', lastIndex);
  4.         //获取当前行的应收金额值作为新的校验规则
  5.         var newMax = 'max[' + $('#tt').datagrid('getSelected').receivable + ']';
  6.         //动态改变实收金额字段的编辑器类型(只有在整个表格都没有处于编辑状态的行时改变编辑器类型才是安全的)
  7.         $('#tt').datagrid('addEditor ',{field:'paid',editor:{type:'validatebox',options:{validType:newMax}}});
  8.         $('#tt').datagrid('beginEdit', rowIndex);
  9.     }
  10.     lastIndex = rowIndex;
  11. }

注意:因为动态改变编辑器类型需要在所有行都退出可编辑状态时才是安全的,所以这种方式只适合单行编辑模式。

数据提交与恢复

利用loading提高用户体验

这个地方我们要临时改变loadMsg,因为默认的提示是“正在加载中……”,我们提交数据的时候应改为“正在保存中……”,保存成功后再还原loadMsg属性,例如:

  1. if ($.isEmptyObject(chanages) == false) {
  2.     var bakMsg = $(this).datagrid('options').loadMsg;
  3.     $(this).datagrid('options').loadMsg = "正在保存中……";
  4.     $('#tt').datagrid('loading');
  5.     setTimeout(function() {
  6.                 $('#tt').datagrid('loaded');
  7.                 $('#tt').datagrid('options').loadMsg = bakMsg;
  8.             }, 1000);
  9. }
结束编辑后获取原始数据

在调用acceptChanges之前,表格的原始行数据都可以通过绑定到DOM上的对象的originalRows属性获取,即:

  1. var originalRows = $('#tt').data('datagrid').originalRows;

而在调用acceptChanges之后,原始数据便是彻底消失,再也找不回来了。
目前就总结这么多,后面再有的话会陆续补上,本文提到的所有功能均在演示页面中可以找到。

常见问题集锦

表头和数据表格错位

错位场景一:数据只有一行;且处于可编辑状态;且datagrid的初始化方式是javascript;且初始化datagrid的脚本没有放在document.ready里面,而是放到了body的闭合标签前。使劲点下面链接看演示:

http://easyui.info/version/jquery-easyui-1.3.5/demo/datagrid/dislocation_01.html

解决方式:老老实实的把初始化datagrid的脚本写到document.ready里面。

效果演示

单行编辑:http://www.easyui.info/easyui/demo/datagrid/063.html
多行编辑:http://www.easyui.info/easyui/demo/datagrid/064.html

目前有 69 条留言 其中:访客:39 条, 博主:30 条

  1. yokoboy : 2013年02月15日13:36:49  -49楼 @回复 回复

    高手,何止是高手! 很有用,谢谢! 😛

  2. tang2992 : 2013年04月10日20:03:14  -48楼 @回复 回复

    能不能把“多行编辑:http://www.easyui.info/easyui/demo/datagrid/064.html”的完整源码分享一下


    • 管理员
      世纪之光 : 2013年04月10日22:40:12  地下1层 @回复 回复

      你用chrome这些浏览器自带的审查元素不就能看到了html源码了吗?

  3. checke : 2013年07月10日19:09:32  -47楼 @回复 回复

    在哪步做ajax form post呢?这快没看懂。


    • 管理员
      世纪之光 : 2013年07月12日13:49:11  地下1层 @回复 回复

      你的问题我也没怎么能看明白,能表达得清楚一点吗 ?

      • checke : 2013年07月17日15:49:15  地下2层 @回复 回复

        我后来又看了看代码,明白了是在鼠标移除当前焦点时做的保存。

  4. luolibing : 2013年08月08日22:51:40  -46楼 @回复 回复

    我们之前也做过这种可编辑,但客户总感觉体验不怎么好 因为切换编辑的时候比较的慢,数据量一大,新增一行要四五秒钟


    • 管理员
      世纪之光 : 2013年08月12日11:45:45  地下1层 @回复 回复

      Easyui的可编辑表格效率确实很低,有待优化,建议使用可编辑表格别超过20条数据。准备专门写个datagrid优化的专题。

  5. checkme : 2013年08月12日16:33:26  -45楼 @回复 回复

    还想请教一个问题,在提交的时候如何做输入验证呢?
    因为这种编辑方式没有表单,不能使用form(‘validate’)。
    谢谢!


    • 管理员
      世纪之光 : 2013年08月12日18:26:52  地下1层 @回复 回复

      校验使用validateRow方法就可以了,因为没有相关事件,所以你只能在调用endEdit方法之前调用validateRow方法校验,僬侥成功则结束编辑,校验不成功不让结束编辑。validateRow方法只用于校验编辑状态的行,所以rows的校验跟提交(acceptChanges方法)关系不大,直接有联系的应该是endEdit.

      • 余书慧 : 2013年09月05日18:52:24  地下2层 @回复 回复

        你好我这边有个关于formatter格式化的问题,方便加下我QQ吗,104207438


        • 管理员
          世纪之光 : 2013年09月05日19:33:31  地下3层 @回复 回复

          尽量在这里把问题描述清楚吧,加QQ不是我写博客的初衷。问题写下来,别人也可以再看到。

          • 余书慧 : 2013年09月06日10:46:51  地下4层 @回复 回复

            您看下我这个demo
            http://jsfiddle.net/jack_zhum/PEV4u/17/embedded/result/
            我双击编辑后选中一个打勾,然后再回来编辑想把之前打勾的去掉。但是就是去不掉,麻烦您帮我看下可以吗。谢谢


            • 管理员
              世纪之光 : 2013年09月07日11:13:09  地下5层 @回复 回复

              白天不在电脑前,晚上回家帮你看看,在线的demo,今天不要关闭

              • 余书慧 : 2013年09月07日20:44:39  地下6层 @回复 回复

                好的。谢谢你世纪之光


            • 管理员
              世纪之光 : 2013年09月08日09:48:45  地下5层 @回复 回复

              你的脚本都是动态加载的,我不好调试。但是你的代码存在很多思路上的问题:
              第一:每个列的值对应一个基本数据类型,你非要用一个json格式的字符串;
              第二:foramtter的时候不需要你再拼装class=’datagrid-cell的DIV了,这个也可能造成Bug
              你先把第二点改正过来,不行的话,再把第一点改正过来试试。

              • 余书慧 : 2013年09月12日14:37:04  地下6层 @回复 回复

                不好意思前几天有点事,世纪之光json格式字符串我改了.你看下这个demo还是上次那个问题。
                http://jsfiddle.net/ewRdr/1/embedded/result/
                双击2013-09-18号的数据。
                把没打勾的打上勾然后下一行保存的时候。再回去把打勾的取消,取消不了


                • 管理员
                  世纪之光 : 2013年09月12日23:47:47  地下7层 @回复 回复

                  我说的第二点你还是没改%……把第二点也改了。

      • easyui菜鸟 : 2013年09月24日10:24:29  地下2层 @回复 回复

        楼主可不可以给一个validateRow方法校验可编辑表格字段的例子,我现在的问题是项目框架中easyui 的datagrid被封装了一层,我想做对可编辑表格每个字段的校验,不知道怎么入手,不知道怎么在结束编辑一行记录的时候就调用validateRow进行校验,还有validateRow具体对每个字段的校验是不同的(比如数字,或者日期等等)如何写具体的校验代码呢?谢谢!


        • 管理员
          世纪之光 : 2013年09月24日10:37:53  地下3层 @回复 回复

          一般都是在调用endEdit方法之前,使用validateRow方法进行校验,不合格的话,就不要调用endEdit方法。至于各种校验类型,自己扩展就行了,我给的demo里也有简单的演示。

          • easyui菜鸟 : 2013年09月24日10:55:17  地下4层 @回复 回复

            楼主你看我代码,怎么监听当编辑结束的时候调用endEdit方法并在调用之前使用validateRow方法校验呢?就是我代码的入口往哪里写呢?(Datagrid为封装的easyui datagrid)
            ———–代码如下———–
            var ssDatagrid;

            /*初始化查询*/
            function inits(str){
            ssDatagrid = new Datagrid(“ss”);
            }
            //添加一行
            function interface_addRows() {
            ssDatagrid.addRow();
            }

            //删除一行
            function interface_del() {
            ssDatagrid.deleteRow();
            }


            • 管理员
              世纪之光 : 2013年09月24日14:19:48  地下5层 @回复 回复

              校验不是靠监听的,没有相关事件,你需要明确的知道你要结束哪一行的编辑,然后validateRow那一行,我说的应该够清楚了吧?

              • easyui菜鸟 : 2013年09月24日15:36:38  地下6层 @回复 回复

                谢谢,我明白了,还有一个问题,就是如何判断,所有可编辑表格都已经验证成功并且状态为endEdit,我就可以保存到数据库中去了。否则,点击保存的时候,我想弹提示信息。


                • 管理员
                  世纪之光 : 2013年09月24日16:19:37  地下7层 @回复 回复

                  只能循环判断,一条一条validateRow。

                  • easyui菜鸟 : 2013年09月24日17:11:59  地下8层 @回复 回复

                    好的,非常感谢楼主!

        • easyui菜鸟 : 2013年09月25日10:25:28  地下3层 @回复 回复

          楼主你好,我想问一下validateRow校验的时候,怎么让两个字段有关联,比如第一个字段为一个下拉框,第二个字段是一个数字输入框,我想当第一个字段的下拉框选择不同值时,改变第二个字段的验证条件,比如第一个字段选1,第二个字段可为空,第一个字段选2,第二个字段不可为空,这个怎么做呢?谢谢


          • 管理员
            世纪之光 : 2013年09月25日22:32:45  地下4层 @回复 回复

            那你要在validateRow之前,你就要根据第一个字段重新设置第二个字段的验证类型,设置完成后,立刻调用validateRow方法。

            • easyui菜鸟 : 2013年09月26日14:39:41  地下5层 @回复 回复

              可否提供个具体代码的示例供参考?比如,如何拿到第一个字段的值,从而进行判断,又如何用代码重新设置第二个字段的验证类型呢?因为我的验证类型都写死在jsp页面table字段属性上了。具体代码怎么写呢?谢谢!


              • 管理员
                世纪之光 : 2013年09月27日09:13:32  地下6层 @回复 回复

                可行的思路已经给你了,具体代码你自己去看API去摸索,如果动态改变编辑器类型我文章中也提到了。

                • easyui菜鸟 : 2013年09月27日09:33:36  地下7层 @回复 回复

                  好的,非常感谢!

  6. it新人 : 2013年09月13日10:55:34  -44楼 @回复 回复

    combobox级联的时候,我这样写,为何获取的是null呢,filed:childrenproject是正确的,var target = datagrid.datagrid(‘getEditors’, { ‘index’: -1, ‘field’: ‘childrenproject’ }).target;


    • 管理员
      世纪之光 : 2013年09月13日18:04:04  地下1层 @回复 回复

      index为-1怎么会取到呢,index应该是从0开始的吧,哪里有-1啊?

  7. it新人 : 2013年09月14日10:41:44  -43楼 @回复 回复

    datagrid行编辑的时候有没有通过键盘左右移动到编辑列的方法啊


    • 管理员
      世纪之光 : 2013年09月15日09:20:01  地下1层 @回复 回复

      这个肯定是可以实现的,不过估计比较复杂,有时间的话我研究一下如何实现这个功能。

  8. 小五 : 2013年09月29日15:22:46  -42楼 @回复 回复

    下拉框 编辑后换行编辑后就变成编辑前的值了,在单击那行的时候显示的又是编辑后的值了 🙁


    • 管理员
      世纪之光 : 2013年09月29日18:25:07  地下1层 @回复 回复

      肯定是你代码逻辑处理得有问题,好好检查下拉框,单步调试。

  9. xiaocai : 2013年11月10日14:56:32  -41楼 @回复 回复

    楼主在吗??我有个问题想请你给看一下,当进入到一个新的页面的时候,这个新的页面里面的表格的某一列(这一列是下拉框)都呈现可编辑状态,这个怎么实现啊???用的jqueryeasyui。 ——比如我的表格有10条数据,这10条数据的第三列都呈现可编辑状态,就是在进入页面之后呈现出来,而且这一列是下拉框


    • 管理员
      世纪之光 : 2013年11月14日09:16:45  地下1层 @回复 回复

      用beginEdit方法,循环开启每一行的可编辑状态。

  10. easyui菜鸟 : 2013年11月20日15:48:00  -40楼 @回复 回复

    您好,请问如何判断某行可编辑表格是不是可编辑状态?


    • 管理员
      世纪之光 : 2013年11月20日20:20:14  地下1层 @回复 回复

      方法一:使用getEditors方法获取编辑器,如果获取不到,则不是可编辑行,反之则是可编辑行。
      方法二:每个可编辑行对应的tr都包含一个”datagrid-row-editing”样式,通过tr是否包含这个样式也可以判断是否在可编辑状态。

      • easyui菜鸟 : 2013年11月21日09:39:29  地下2层 @回复 回复

        好的,非常感谢!~

  11. allan : 2014年02月26日17:55:54  -39楼 @回复 回复

    我想在editor里实现弹窗效果,然后弹窗里有grid,选中一条记录,可以将rowData返回给editor,然后可以将这个rowData赋给其它栏位。


    • 管理员
      世纪之光 : 2014年02月26日17:59:44  地下1层 @回复 回复

      可以将combogrid扩展成一个编辑器类型。

  12. 小五 : 2014年03月05日18:27:07  -38楼 @回复 回复

    可编辑表格的一行商品的实现输入商品编号以后后面自动加载出该商品的单价


    • 管理员
      世纪之光 : 2014年03月05日20:26:34  地下1层 @回复 回复

      这个思路很多,你可以监控输入框的keyup事件来实现对商品单价的查询和显示。

  13. 苗文正 : 2014年04月11日02:14:47  -37楼 @回复 回复

    大哥你好,我也是easyui中文社区的,我希望能向你请教一个问题,我在easyui的关于Row Editing in DataGrid的demo中发现,如果鼠标左击一下选中某一行,然后按下Backspace键,那么浏览器就进行了跳转,请教这个问题如何处理啊,谢谢,谢谢!


    • 管理员
      世纪之光 : 2014年04月11日16:37:27  地下1层 @回复 回复

      Backspace确实会使浏览器回退后转的,网上有很多解决方案,阻止浏览器的默认行为就可以了。网上找的现成一段代码,你可以试试:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      
      function banBackSpace(e) {
          var ev = e || window.event;//获取event对象
          var obj = ev.target || ev.srcElement;//获取事件源
          var t = obj.type || obj.getAttribute('type');//获取事件源类型
          //获取作为判断条件的事件类型
          var vReadOnly = obj.readOnly;
          var vDisabled = obj.disabled;
          //处理undefined值情况
          vReadOnly = (vReadOnly == undefined) ? false : vReadOnly;
          vDisabled = (vDisabled == undefined) ? true : vDisabled;
          //当敲Backspace键时,事件源类型为密码或单行、多行文本的,
          //并且readOnly属性为true或disabled属性为true的,则退格键失效
          var flag1 = ev.keyCode == 8 && (t == "password" || t == "text" || t == "textarea") && (vReadOnly == true || vDisabled == true);
          //当敲Backspace键时,事件源类型非密码或单行、多行文本的,则退格键失效
          var flag2 = ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea";
          //判断
          if (flag2 || flag1) return false
       
      }
      //禁止退格键 作用于Firefox、Opera
      document.onkeypress = banBackSpace;
      //禁止退格键 作用于IE、Chrome
      document.onkeydown = banBackSpace;
  14. 小伙 : 2014年05月06日16:59:16  -36楼 @回复 回复

    这个测试用例用的1.3.2版本,我现在做的系统用的1.3.5版本。
    当选择多行一起编辑时,只有最后一条的下拉才能出发onSelect事件,其余的编辑状态的下拉框都无法触发,这个是版本的问题,具体原因实在是无处下手,大神求解 🙁


    • 管理员
      世纪之光 : 2014年05月07日13:30:47  地下1层 @回复 回复

      @小伙 : 最好是能把你能重现问题的静态文件(不需要服务器直接能运行并能呈现你说的bug)发给我,否则我不好帮你分析问题。

  15. 黑颈 : 2014年05月15日22:22:26  -35楼 @回复 回复

    发现一个大bug,用getChinges是取不到当前正在编辑行的内容的,如
    {“inserted”:[{“id”:””,”name”:””}],”updated”:[],”deleted”:[]}

    • 世纪之光 : 2014年05月16日09:52:47  地下1层 @回复 回复

      这不是Bug,正在编辑的行,当然不属于已经提交了的更改。

  16. hailiang : 2014年07月16日17:52:31  -34楼 @回复 回复

    楼主你好 关于datagrid 中editor type为combogrid,我发现选择combogrid一行后,datagrid单元格中显示的是idField中绑定的值 而不是textField中绑定的值,不知道是不是easyui中的bug


    • 管理员
      世纪之光 : 2014年07月19日22:42:45  地下1层 @回复 回复

      建议你好好看看datagrid的列属性:formatter,大多数显示问题都是因为没有使用formatter造成的。

  17. sofine : 2014年07月24日16:02:29  -33楼 @回复 回复

    真不错,谢谢了

  18. web开发分享 : 2015年02月04日12:15:16  -32楼 @回复 回复

    不知道日期控件 怎么做验证?自定义的其他控件怎么集成进easyui的验证。行编辑。


    • 管理员
      世纪之光 : 2015年02月05日20:57:43  地下1层 @回复 回复

      日期控件的验证没有什么特别之处吧:datebox->combo->textbox->validatebox
      直接写validType选项就可以了。
      自定义的其它控件需要Datagrid扩展对应的编辑器才能用到可编辑表格中,进而在表格中验证。

  19. JuneDing : 2015年02月05日18:01:29  -31楼 @回复 回复

    datagrid有两列,一列是类型是combogrid,另外一列类型是:combobox;

  20. JuneDing : 2015年02月05日18:08:41  -30楼 @回复 回复

    datagrid有两列,一列是类型是combogrid,另外一列类型是:combobox; 在combogrid的事件方法 onClickRow:combogridClick,代码为:

    1
    2
    3
    4
    5
    6
    7
    
    var unitEdit  = $('#detailTable').datagrid('getEditor', {index:selectedIndex,field:'unitid'});
    units=[
        {unitid:'0000',unitname:rowData.medunit},
        {unitid:'0001',unitname:rowData.basicunit}
    ];
     
    $(unitEdit.target).combobox('loadData',units);

    其中units:为全局变量,我在combobox使用了formatter; 但是会出现,当我当前编辑行结束时,combobox显示名称,当我再次选中改行为编辑行时显示的是编码。(单行编辑)


    • 管理员
      世纪之光 : 2015年02月05日20:50:35  地下1层 @回复 回复

      是不是你unitid字段保存的值有问题?(不是”0000″和”00001″)。
      行结束编辑后用getData方法看看你这条数据的unitid字段值是否在”0000″和”0001″之中。

  21. S : 2015年02月27日11:10:27  -29楼 @回复 回复

    我在做可编辑表格时候,由于是点击了一个按钮来加载可编辑表格的,所以会导致与表头错位的问题,有没有什么办法能解决这个错位的问题?


    • 管理员
      世纪之光 : 2015年02月27日13:39:35  地下1层 @回复 回复

      小兄弟,你的问题太模糊了,无法具体的回答你,只能给你点思路:
      分析DOM和CSS,看看为什么会发生错位,然后再具体定位问题。

  22. 三五闲心 : 2015年04月16日14:22:18  -28楼 @回复 回复

    editgrid用的时间控件、下拉框、输入框都是自己扩展的,不是editgrid原生的控件。IE8下当行时编辑状态的时候如果列宽小于控件的宽度会被撑开。但是我看到你“单行编辑”,“多行编辑”DEMO在IE8没有这个问题。想请教一下是否知道问题出在哪个地方。是否是哪里的css我这边没有设置好。


    • 管理员
      世纪之光 : 2015年04月18日15:55:45  地下1层 @回复 回复

      不好意思哦,因为是你自己扩展的控件,我凭经验和猜测无法知道大概问题。

  23. 不锈钢网 : 2015年07月20日14:26:54  -27楼 @回复 回复

    好文章,内容淋漓尽致.禁止此消息:nolinkok@163.com

  24. 水中鳥 : 2015年08月12日23:07:28  -26楼 @回复 回复

    有BUG
    如果新增一筆資料
    在”my97″起始與結束會無法卡關,也就是結束日可以選擇小於起始日,但是只有有存過檔案的話就不會有這樣的問題了
    謝謝


    • 管理员
      世纪之光 : 2015年08月13日10:17:20  地下1层 @回复 回复

      谢谢提醒,新增行的时候没有绑定编辑器target的click事件,所以导致了这个Bug,目前已经修复。

  25. lonelyman : 2015年08月13日10:33:33  -25楼 @回复 回复

    请问楼主,这个“http://www.easyui.info/easyui/demo/datagrid/064.html” demo如何下载啊。
    查看网页元素的方法好像demo不太全,谢谢!


    • 管理员
      世纪之光 : 2015年08月13日10:41:18  地下1层 @回复 回复

      都会用审查元素了 还不知道如何抓包和获取代码吗?好好去学学怎么使用审查元素吧。
      主要js文件是:http://www.easyui.info/easyui/demo/datagrid/064.js

给我留言

留言无头像?


×