zoukankan      html  css  js  c++  java
  • 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


  • 相关阅读:
    深入探究JVM之垃圾回收器
    深入探究JVM之对象创建及分配策略
    深入探究JVM之内存结构及字符串常量池
    【深度思考】如何优雅告知用户,网站正在升级维护?
    Redis系列(九):Redis的事务机制
    [C#.NET 拾遗补漏]07:迭代器和列举器
    [C#.NET 拾遗补漏]06:单例模式最佳实践
    深入理解 EF Core:使用查询过滤器实现数据软删除
    简化RESTful开发,Spring Data REST让你少掉发
    如何查看Docker容器环境变量,如何向容器传递环境变量
  • 原文地址:https://www.cnblogs.com/wenlong/p/3684225.html
Copyright © 2011-2022 走看看