`
wenlongsust
  • 浏览: 76405 次
  • 性别: Icon_minigender_1
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论

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 Grid合并单元格

    Ligerui Grid合并单元格 ,指定列合并单元格,该合并是整列合并

    Ligerui Table导出excel 支持样式、冻结行列、图片等导出

    LigerUI Table不仅具备基本的表格功能,如排序、筛选、分页,还提供了丰富的扩展特性,如导出Excel功能。这个功能使得用户能够方便地将网页上的数据导出到Excel文件中,以便于进一步的数据分析或存储。 标题"...

    ligerui-LigerUI-V1.2.5.rar

    - **表格(Grid)**:LigerUI的表格组件支持动态加载、分页、排序、过滤、自定义列模板等功能,方便展示和操作大量数据。 - **表单(Form)**:表单组件提供了丰富的验证规则和联动效果,能够快速构建交互性强的...

    全套ligerui源代码和api以及示例

    LigerUI是一个轻量级的前端框架,它以简洁、高效为设计原则,提供了一系列与后台技术无关的UI组件,如表格、表单、下拉菜单、对话框、按钮、树形结构等。这些组件具有良好的跨浏览器兼容性,支持主流的现代浏览器,...

    ligerUI 教程API手册

    ligerUI 教程API手册,方便查询

    ligerui+Json_使用LigerUI的Grid和Java的Json实现数据显示

    Grid是LigerUI中的一个核心组件,用于展示表格数据,支持多种交互功能和自定义样式。 首先,我们需要理解LigerUI的Grid组件。Grid允许你通过简单的配置就能创建具有分页、排序、过滤和编辑功能的表格。它的主要特性...

    Jquery Liger UI框架学习

    例如,在构建一个行政审批系统时,你可以利用Liger UI的表格组件展示大量的审批任务,使用表单组件创建和编辑审批单,通过对话框进行确认或取消操作,而下拉菜单则可用于快速选择审批状态。 总之,jQuery Liger UI...

    JQuery LigerUI建筑工程管理系统

    其次,LigerUI的表单组件则用于数据的录入和编辑。它可以自动生成各种输入控件,如文本框、下拉列表、日期选择器等,同时提供验证功能,确保输入数据的准确性。在系统中,管理员可能需要添加、修改或删除工程项目的...

    ligerui-LigerUI

    1. **组件丰富**:LigerUI包含了各种常见的前端组件,如表格、树形结构、下拉框、按钮、表单、对话框、面板、日期选择器等,满足开发者在构建页面时的各种需求。 2. **高度可定制化**:每个组件都提供了丰富的配置...

    jQuery ligerUI Demos 导航页、菜单栏

    jQuery ligerUI是一款基于jQuery的前端开发框架,它提供了一系列丰富的UI组件,使得开发者能够快速构建具有专业界面的Web应用程序。在"jQuery ligerUI Demos 导航页、菜单栏"这个主题中,我们将深入探讨ligerUI如何...

    LigerUI demo及api文档

    这将为开发者提供一个直观了解LigerUI功能的平台,并且能够通过API文档深入理解各个组件的工作原理和使用方法。 描述中提到的"Source文件夹"可能包含了LigerUI的各种组件的源代码示例,这些示例通常包含了HTML、CSS...

    Jquery LigerUI 中文 API

    LigerUI 包含了大量的组件,如表格、表单、对话框、下拉菜单等,大大简化了前端开发工作。本文将深入解析其中文 API,帮助开发者更好地理解和应用这个强大的工具。 1. **基础使用** - **引入文件**:在项目中使用 ...

    Jquery-LigerUI.rar_ligerui

    5. **表格**:LigerUI的表格组件支持分页、排序、过滤、编辑等功能,同时具备良好的数据绑定能力,能够轻松处理大量数据,提高数据展示效率。 6. **日历组件**:LigerUI的日历组件不仅可以用于日期选择,还支持日期...

    LigerUI1.2.5文档和库

    2. **组件指南**:详尽列出LigerUI提供的所有组件,如按钮、表格、下拉框、对话框等,解释每个组件的用途、属性、方法和事件。 3. **API参考**:列出框架的核心函数和对象,提供详细的参数和返回值说明,便于开发者...

    jquery Liger UI 官方实例完整版

    2. **强大的表格**:Liger UI 的表格组件支持数据分页、排序、过滤、编辑等功能,可与后台数据源无缝集成,实现动态加载和实时更新。 3. **灵活的表单**:Liger UI 的表单组件可以自动绑定模型,支持各种验证规则,...

    jQuery ligerUI API

    - **表格(Grid)**:ligerUI的表格组件可以展示大量数据,并支持排序、分页、过滤、编辑等功能。通过配置列定义、数据源等,开发者可以自定义表格的行为和外观。 - **表单(Form)**:表单组件可以方便地绑定数据...

    LigerUI制作的简单页面

    其次,LigerUI的表格组件是处理大量数据的利器。它可以实现数据的分页、排序、过滤等功能,同时支持自定义列头、行样式和操作列。在这个简单的后台页面中,表格可能用于展示各种信息,如用户列表、订单记录等。...

    jQuery_LigerUI_V1.2.2

    1. 表格(Grid):jQuery_LigerUI的表格组件支持数据分页、排序、过滤、编辑等功能,可以方便地展示大量结构化数据。通过API,开发者可以定制列的显示样式,实现复杂的数据操作。 2. 表单(Form):LigerUI的表单...

    Jquery ligerUI一个小例子

    7. **表格(Grid)**:LigerUI的表格组件功能强大,可以实现数据的分页、排序、过滤、编辑等操作,并支持与服务器端进行数据交互。 在“Test”这个压缩包文件中,可能包含了使用LigerUI开发的一个小示例项目。你...

    jquery-ligerUi-1.2.2.api

    1. 表格(Grid):jQuery LigerUI的表格组件支持数据分页、排序、过滤等功能,且提供多种数据操作接口,如添加、删除、编辑记录,极大地提升了数据展示和管理的便捷性。 2. 下拉框(ComboBox):LigerUI的下拉框...

Global site tag (gtag.js) - Google Analytics