这几天在使用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 Table不仅具备基本的表格功能,如排序、筛选、分页,还提供了丰富的扩展特性,如导出Excel功能。这个功能使得用户能够方便地将网页上的数据导出到Excel文件中,以便于进一步的数据分析或存储。 标题"...
- **表格(Grid)**:LigerUI的表格组件支持动态加载、分页、排序、过滤、自定义列模板等功能,方便展示和操作大量数据。 - **表单(Form)**:表单组件提供了丰富的验证规则和联动效果,能够快速构建交互性强的...
LigerUI是一个轻量级的前端框架,它以简洁、高效为设计原则,提供了一系列与后台技术无关的UI组件,如表格、表单、下拉菜单、对话框、按钮、树形结构等。这些组件具有良好的跨浏览器兼容性,支持主流的现代浏览器,...
ligerUI 教程API手册,方便查询
Grid是LigerUI中的一个核心组件,用于展示表格数据,支持多种交互功能和自定义样式。 首先,我们需要理解LigerUI的Grid组件。Grid允许你通过简单的配置就能创建具有分页、排序、过滤和编辑功能的表格。它的主要特性...
例如,在构建一个行政审批系统时,你可以利用Liger UI的表格组件展示大量的审批任务,使用表单组件创建和编辑审批单,通过对话框进行确认或取消操作,而下拉菜单则可用于快速选择审批状态。 总之,jQuery Liger UI...
其次,LigerUI的表单组件则用于数据的录入和编辑。它可以自动生成各种输入控件,如文本框、下拉列表、日期选择器等,同时提供验证功能,确保输入数据的准确性。在系统中,管理员可能需要添加、修改或删除工程项目的...
1. **组件丰富**:LigerUI包含了各种常见的前端组件,如表格、树形结构、下拉框、按钮、表单、对话框、面板、日期选择器等,满足开发者在构建页面时的各种需求。 2. **高度可定制化**:每个组件都提供了丰富的配置...
jQuery ligerUI是一款基于jQuery的前端开发框架,它提供了一系列丰富的UI组件,使得开发者能够快速构建具有专业界面的Web应用程序。在"jQuery ligerUI Demos 导航页、菜单栏"这个主题中,我们将深入探讨ligerUI如何...
这将为开发者提供一个直观了解LigerUI功能的平台,并且能够通过API文档深入理解各个组件的工作原理和使用方法。 描述中提到的"Source文件夹"可能包含了LigerUI的各种组件的源代码示例,这些示例通常包含了HTML、CSS...
LigerUI 包含了大量的组件,如表格、表单、对话框、下拉菜单等,大大简化了前端开发工作。本文将深入解析其中文 API,帮助开发者更好地理解和应用这个强大的工具。 1. **基础使用** - **引入文件**:在项目中使用 ...
5. **表格**:LigerUI的表格组件支持分页、排序、过滤、编辑等功能,同时具备良好的数据绑定能力,能够轻松处理大量数据,提高数据展示效率。 6. **日历组件**:LigerUI的日历组件不仅可以用于日期选择,还支持日期...
2. **组件指南**:详尽列出LigerUI提供的所有组件,如按钮、表格、下拉框、对话框等,解释每个组件的用途、属性、方法和事件。 3. **API参考**:列出框架的核心函数和对象,提供详细的参数和返回值说明,便于开发者...
2. **强大的表格**:Liger UI 的表格组件支持数据分页、排序、过滤、编辑等功能,可与后台数据源无缝集成,实现动态加载和实时更新。 3. **灵活的表单**:Liger UI 的表单组件可以自动绑定模型,支持各种验证规则,...
- **表格(Grid)**:ligerUI的表格组件可以展示大量数据,并支持排序、分页、过滤、编辑等功能。通过配置列定义、数据源等,开发者可以自定义表格的行为和外观。 - **表单(Form)**:表单组件可以方便地绑定数据...
其次,LigerUI的表格组件是处理大量数据的利器。它可以实现数据的分页、排序、过滤等功能,同时支持自定义列头、行样式和操作列。在这个简单的后台页面中,表格可能用于展示各种信息,如用户列表、订单记录等。...
1. 表格(Grid):jQuery_LigerUI的表格组件支持数据分页、排序、过滤、编辑等功能,可以方便地展示大量结构化数据。通过API,开发者可以定制列的显示样式,实现复杂的数据操作。 2. 表单(Form):LigerUI的表单...
7. **表格(Grid)**:LigerUI的表格组件功能强大,可以实现数据的分页、排序、过滤、编辑等操作,并支持与服务器端进行数据交互。 在“Test”这个压缩包文件中,可能包含了使用LigerUI开发的一个小示例项目。你...
1. 表格(Grid):jQuery LigerUI的表格组件支持数据分页、排序、过滤等功能,且提供多种数据操作接口,如添加、删除、编辑记录,极大地提升了数据展示和管理的便捷性。 2. 下拉框(ComboBox):LigerUI的下拉框...