这几天在使用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编辑表格组件单元格校验问题的更多相关文章

  1. jquery操作表格 合并单元格

    jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...

  2. 使用POI创建word表格合并单元格兼容wps

    poi创建word表格合并单元格代码如下: /** * @Description: 跨列合并 */ public void mergeCellsHorizontal(XWPFTable table, ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:为所有表格的单元格添加边框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  5. Aspose.Word 操作word复杂表格 拆分单元格 复制行 插入行 文字颜色

    private void button3_Click(object sender, EventArgs e)         {             object savePathWord =&q ...

  6. Swift - 给表格的单元格UITableViewCell添加图片,详细文本标签

    表格UITableView中,每一单元格都是一个UITableViewCell.其支持简单的自定义,比如在单元格的内部,添加图片和详细文本标签. 注意UITableViewCell的style: (1 ...

  7. 将Word表格中单元格中的文字替换成对应的图片

    示例 原文件结构: 替换后文档结构: 软件截图: 代码: using System;using System.Collections.Generic;using System.ComponentMod ...

  8. easyui表格,单元格合并

    easyui的合并单元格比较麻烦,官网提供一下方法 $('#tt').datagrid({ onLoadSuccess:function(){ var merges = [{ index:2, row ...

  9. elementUI表格合并单元格

    相信你肯定看了 ElementUI 官方文档了,没看的话先去看下表格各个属性的意义,方便下文阅读:传送门 但你会发现此例过于简单,死数据,但我们开发的时候往往都是后台传递过来的数据,导致我们 rows ...

随机推荐

  1. crontab入门

    参数 crontab是一个处理定时任务的命令,在终端输入man crontab可以得到使用方法提示,主要参数如下: crontab -u # 指定运行的账户,默认为当前账户 crontab -l # ...

  2. Windows / VS下不同类型变量转换

    [时间:2016-07] [状态:Open] [关键词:windows,vs,mfc,类型转换] 在实际编码中经常遇到不同类型及编码方式的字符串.变量之间的转换,比如Unicode->char. ...

  3. Android下基于SDL的位图渲染(二)理论篇

    理论篇 上一篇中介绍了如何将SDL2源码应用到Android渲染中,实际上SDL本身提供的android-project实现了基于android的c运行时环境,通过上面实践篇的介绍,就是完成这个环境搭 ...

  4. Android开发(八)——Android组件

    参考: [1] Android开发教程:理解Intent和Intent Filter.http://liuzhichao.com/p/506.html

  5. u-boot2016.05 有关 4096page size , oob == 224 nand 的移植支持

    大致介绍一下这个 nand 的基础属性 pagesize == 4096 byte oob == 224 byte block size == 256 Kbyte u-boot configs/xxx ...

  6. Go Revel - Controllers(控制器)

    Controller(控制器)整个revel都是围绕它处理所有请求 控制器可以是任何直接或间接内嵌了`*revel.Controller`类型的结构,如: type AppController str ...

  7. 临时文件夹迁移 temp位置移动

    方法/步骤 首先,在其他驱动器新建一个文件夹,给临时文件夹安个新家 桌面,右键"我的电脑",选择"属性" 点击"高级系统设置" 点击&quo ...

  8. hive和hbase区别和联系

    作者:有点文链接:https://www.zhihu.com/question/21677041/answer/185664626来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  9. [算法]和为S的两个数字

    题目描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,使得他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 对应每个测试案例,输出两个数,小的先输出. 思路 定义两个指 ...

  10. git 忽略已经添加到版本库的文件

    第一步: 指令:git rm -r --cached YOUR_PATH YOUR_PATH 即 你的文件,-r 指定了递归所有的子文件夹. 第二步: 修改项目根目录下的 .gitignore 文件, ...