【Operamasks-UI】可编辑表格insertRow和deleteRow遇到空表格时的问题

问题描述：在OMUI的一个可编辑的表格omGrid中，如果没有对组件设置dataSource，在执行insertRow操作时，表格中不会插入新记录，而通过自行扩展该组件为其配置dataSource之后（参见【Operamasks-UI】omGrid直接设置json数据给dataSource），执行deleteRow时会出现js报错的问题。

问题分析：

首先对于表格未设置dataSource时，直接执行insertRow操作，表格中未插入新记录的问题，是因为官方在开发该可编辑插件时，认为dataSource一定是会配置的，即使该返回一个空的数据集合也可以，如{rows:[],total:0}。通过om-grid和om-grid-roweditor的源代码的分析得知，roweditor插件是通过_onRefresh()函数对数据进行初始化的，代码的执行顺序图如下：

从图中可以看到，如果dataSource未设置或者加载数据失败的话，是不会调用_onRefreshCallbacks的，也就是说roweditor没有被初始化，所以在insertRow时不会成功。

再来研究一下这个执行顺序，会发现在_init()执行时，已经完成了对_onRefreshCallbacks的调用，而在init()执行之后，om-grid-roweditor插件才为om-grid注入了一个_onRefresh函数，从理论上来说，roweditor初始化是不会被完成的，但是为什么设置过dataSource的omGrid就没有问题了呢？了解了jquery的ajax调用机制之后，应该就会知道jquery加载数据是异步加载的，所以在omGrid加载数据时，roweditor已经初始化过了。而前面提到的自行扩展omGrid设置dataSource方式中，直接通过json数据作为数据源进行初始化时，代码执行是顺序执行的，同样会出现roweditor未被初始化的情况，导致在deleteRow时报js错误。如果尝试将om-grid中加载数据的ajax请求改为同步请求，也同样会出现deleteRow报js错误的情况。这算是om-grid-roweditor深藏的一个bug??

解决方案：

有了前面的分析，得出的解决方案是在组件初始化完成之后再为组件设置值，如下：

var data={"rows":[{}],"total":0};
$('#grid').omGrid({title : '表格',limit:15,//dataSource:data,editMode:"all",colModel : [ {header : 'ID', name : 'id', width : 100, align : 'center'}, {header : '地区', name : 'city', width : 120, align : 'left',editor:{editable:true}}, {header : '地址', name : 'address', align : 'left', width : 'autoExpand',renderer:function(value,rowData,rowIndex){return value + "<img src='tool_tip.gif'/>";}} ]
});
$("#grid").omGrid("setData",data);

以上内容转自：http://dinguangx.iteye.com/blog/1900652

需要更正一点，到目前为止官方发布的最新版本为2.0，GitHub上有个2.1的好像还不如2.0稳定，2.0版本的“setData”方法是不支持直接设置JSON格式数据的，所以解决这个问题的方法应该是添加一个文件或者添加一个后台方法，返回数据“

{"rows":[{}],"total":0}

”

【Operamasks-UI】可编辑表格insertRow和deleteRow遇到空表格时的问题相关推荐

打开excel表格会自动打开一个空表格
原因: 有个MySql产品插件,作为Excel加载项,每次打开任何一个Excel都会被Excel加载,弹出一个空表文件. 解决方法: 该MySql产品看起来没多大用,找到卸载该MySql产品即可方法 ...
easy ui 可编辑表格，新增行某个字段可以修改，已经存在的数据不允许修改
1. 问题描述,easy ui 可编辑表格,在添加的时候可以进行编辑标题,已经存在的数据不允许编辑标题 2.解决问题的主要方法是区别新增数据和已有数据的区别,easy ui 自带的属性并没又找到区别的 ...
js 操作table: insertRow()，deleteRow()，insertCell()，deleteCell()方法
表格有几行: var trCnt = table.rows.length; (table为Id ) 每行有几列:for (var i=0; i<trCnt; i++) ...
js 操作table: insertRow()，deleteRow()，insertCell()，deleteCell()方法
表格有几行: var trCnt = table.rows.length; (table为Id ) 每行有几列:for (var i=0; i<trCnt; i++) ...
element UI 对话框编辑取消事件，当前行会清空或者替换掉bug解决
问题:如题element UI 对话框编辑取消事件,当前行会清空或者被替换掉,table表格里的编辑按钮打开对话框,关闭对话框,this.$refs.ruleForm.resetFields()不生效 ...
在Element UI中表格根据数据动态变化显示表格的内容
需求对于Element UI里的表格,如果假设传入data的数据为数字(事实上其他的字母之类的也可)代表为表格的一些固定选项,而不是直接传入字符串,怎样实现替换.比如对于某个表格的选项,传入的数据用 ...
word表格分开快捷键_在Word 表格的编辑中,快速拆分表格应按快捷键为______。
[单选题]在Word文档中,如果要指定每页中的行数,可以通过_____进行设置. [简答题]要求把任务点的所有课程笔记都上传,拍照上传. [单选题]在Word文档中,有一个段落的最后一行只有一个字符, ...
wordpress自适应表格_给WordPress添加自适应表格让表格自适应屏幕
wordpress自带的表格不能自适应屏幕宽带,每次新建了表格,电脑上显示正常的,结果换到手机上就超出屏幕宽度了,很麻烦,更重要的是很不美观,本次我就问为大家带来一个添加自适应表格的教程. 案列分析 ...
源码推荐：仿写映客直播 ,快速切换主题 ,星星评分控件,表格样式，可以横向移动的表格, 仿微信键盘-
仿写映客直播(上传者:五仁月饼) 工作之余写的,基于IJKPlayer播放,对内存做了处理.目前已完成直播列表和直播间的搭建,后续还会慢慢完善. 项目地址 publishImageAndVideoAn ...
androidstudio表格中填充宽跟长一样_Excel表格的基本操作教程，覆盖表格制作的10大知识！...
Excel表格制作包含的知识比较多,通常制作一张表格需要这10大知识:新建表格.调整行高列宽.插入行列和单元格.删除行列和单元格.移动行列和单元格.表格文字编辑.单元格格式设置.表格边框与单元格边框设 ...

【Operamasks-UI】可编辑表格insertRow和deleteRow遇到空表格时的问题

【Operamasks-UI】可编辑表格insertRow和deleteRow遇到空表格时的问题相关推荐

最新文章

热门文章