LigerUI编辑表格组件单元格校验问题

这几天在使用LigerUI（版本为1.2.2）编辑表格组件的时候，遇到几个小问题，从官方demo和api中没有找到解决的办法

问题1、从数据库查询出来的主键单元格不可编辑问题

主键单元格已经保存之前编辑的数据，由于是主键，因此一旦保存就不需要再进行修改

找到了一点儿线索，核心代码如下：

onBeforeEdit: function (e){if (e.record.editTime) {e.record.id.enabledEdit = false;//dataGrid.reRender();}return true;}

其中，reRender()函数是从http://www.tuicool.com/articles/ZZnyu2F找到的，新版本没有这个函数，虽然重新设置了单元格的enabledEdit属性为false，但是不知道如何阻止编辑单元格，于是这个问题只能通过变通的方式解决

变通的解决方式为，在编辑完成后判断当前记录是否已经保存过，比如已经有保存时间等属性，如果已经保存，就自动恢复成编辑之前的数据，核心代码如下：

onBeforeSubmitEdit:  function (e) {//查询出来的数据id不能修改if (e.column.name == "id" && e.record.editTime) {return false;}}

虽然，变通解决了不能修改的问题，但是理想的效果是单元格不可编辑

问题2：单元格校验问题

可编辑的表格，其中的数据有些是需要进行格式、业务校验的，虽然有人在ligerGrid的columns中写了validate属性，但是不知道如何触发其中的校验规则，设置的校验不能触发，肯定是不能起作用的，于是这个问题也需要找个变通的方式解决

变通的解决方式为，在保存之前，对每行的数据进行校验，遍历每行数据的核心代码

function validateGrid() {var rows = dataGrid.rows;for (var i = 0; i < rows.length; i++) {if (rows[i].id.length == 0) {$.ligerDialog.warn("第"+(i+1)+"行[编码]不能为空");return false;}if (rows[i].name.length == 0) {$.ligerDialog.warn("第"+(i+1)+"行[名称]不能为空");return false;}}return true;}

虽然，解决了数据校验问题，但是校验不通过的单元格，显示效果和校验通过的一样，效果不是很好

LigerUI使用起来比较简单，作者也半年左右升级一次，api虽然已有在线版的http://api.ligerui.com/，但是api函数没有名称排序，找起来不是很方便，有些函数没有在api中体现出来，只能查看源码或者开发工具调试才能找到相关的调用方法，不过还是要赞一个，支持免费、开源的LigerUI

LigerUI编辑表格组件单元格校验问题相关推荐

记一次用iview实现表格合并单元格的具体操作
记一次用iview实现表格"合并"单元格的具体操作最近做项目使用iview框架做后台管理系统,第一次使用iview遇到过很多问题,有些小坑也都在网上找到解决方案了,可作为一个通用 ...
JS禁用页面某区域不可选中文字、及修复导致行内编辑出现某单元格不可输入的问题
最近做了一个双击row的响应功能,不希望在双击table的row时出现文字复制的效果,影响体验,所以找到了禁用页面复制的js代码 document.onselectstart = function() ...
layui表格合并单元格
思想:layui表格合并单元格,layui并没有给出相应的解决办法:那么我们可以在前端使用js将相邻并相同的单元格合并: 1.页面代码: <!DOCTYPE html> <html ...
Table表格的单元格提示
表格的单元格显示单元格内容,如果太多显示为省略号鼠标放在上面,显示里面的全部内容 CSS关键代码 table{table-layout: fixed; }td{white-space: nowra ...
border-collapse:collapse;清除表格中单元格的空隙
border-collapse:collapse;清除表格中单元格的空隙转载于:https://www.cnblogs.com/lengv10/p/3718613.html
Latex 表格内文字过长自动换行表格内单元格内容强制换行
2019独角兽企业重金招聘Python工程师标准>>> \usepackage{array} \begin{tabular}{m{5cm}}或者\begin{tabular}{p{0 ...
EduCoder-Web程序设计基础-html5-表格基本结构-第4关：表格中单元格样式的设置
目录任务描述相关知识编程要求测试说明代码示例任务描述本关任务:编写一个两行两列的表格网页,表格中的单元格样式进行设置.效果如下图所示: 表格效果3 相关知识为了完成本关任务,你需要掌握 ...
html在线编辑器合并单元格,Bootstrap实现的表格合并单元格示例
本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 Bootstrap-表格合并 ...
python合并word表格单元格_合并Word 表格中单元格
//合并Word 表格中单元格 procedure mergeWordCell; var WordApp: TWordApplication; WordDoc: TWordDocument; DocI ...

LigerUI编辑表格组件单元格校验问题

LigerUI编辑表格组件单元格校验问题相关推荐

最新文章

热门文章