当前位置:首页 > java知识学习_java技术文章 > 正文

editorgridpanel可编辑表格编辑操作

浏览444+

一、可编辑的editorgridpanel简介

表格的应用在管理系统的前端界面中经常会用到,Extjs在表格这方面的使用和功能范围还是非常强大的,今天我们就来讲一下editorgridpanel的应用。

editorgridpanel实际上是一个可以用来编辑的表格组件儿,就是可以在表格上单击然后编辑表格中内容,修改数据提交到后台完成对数据的增删改查,该表格既可以修改某一个单元格的数据又能够修改其中一行的数据还能够编辑连续多行的数据一起提交到数据库由后台数据库统一做增删操作。

这种同时可以修改多条数据的功能无疑减轻了后台服务器的压力,可以在效率上实现很高增删改的效率,极大地提升了用户体验,是很多前端开发人员比较喜欢的利器。

editorgridpanel继承了GridPanel类,它是GridPanel的实现的子类,也具备其父类相应的一些特性,GridPanel本身的功能也是很强大的,具有其它的框架所不具备的一些对列的数据进行排序、移动、拖拽、隐藏等一系列的功能,在这里我们就不多介绍GridPanel的功能了,我们主要介绍可编辑的editorgridpanel的编辑功能。

二、表格编辑代码案例讲解

1)editorgridpanel表格编辑思路

首先我们讲一下表格数据编辑的思路,我们在前端页面在修改数据的时候,无非就是对某一个单元格中的数据进行修改,又或者是对表格中整行数据全部修改(修改一行和修改多行的方式是一样的),一般实现方式有以下两种情况。

第一种就是我们在修改单元格的数据的时候,修改完数据就会触发afteredit事件函数,该事件方法中使用ajax一部更新技术将修改的数据以json格式传到后台由Java后端操作数据库进行修改操作。

第二种方式就是我们在前台修改完表格中的数据之后先不要后台传,而是保存在前端界面中,当用户手动点击修改按钮或者是提交按钮之后再请求到后台,后端程序写一个统一的数据修改的方法操作数据库做修改操作。

2)编辑单个单元格数据修改的代码案例

editorgridpanel创建方式跟gridpanel方式不尽相同,只不过是在配置参数上增加了一些可编辑的配置选项而已。

我们首先完成的是修改某一个单元格中的数据的案例操作,在下面的代码中,我们首先会定义一组用来展现在表格中的一组数据,然后用new Ext.grid.EditorGridPanel的语法创建EditorGridPanel。

单个单元格编辑的代码详细

上图的代码中可以看出editorgridpanel中首先定义的是表格第一行的表头的名称,有name和title之类的,然后通过width控制每一个单元格的列宽,Dataindex属性就是用来展示我们准备好的那一组数据,这些属性跟gridpanel的一模一样,我们就不用再过多的做此解释。

我们主要介绍的是可以对单元格进行编辑的editor属性,只要在某一列中加了editor属性后就可以对该列进行编辑,editor属性参数后面可以跟一个editor实例,这个editor实例就是单元格的编辑内容

editor详细参数一览

3)编辑表格整行数据修改的代码案例

上面我们讲了修改表格中的某一个单元格数据的代码案例,其实editorgridpanel默认的也是只能修改某个单元格,但是如果我们想要直接修改整行的数据,那就要看我们接下来的案例了。

其实修改整行数据也还是比较简单的,只需要在配置参数里面添加一个叫SM的属性就可以了,具体属性设置方法详见下图。

添加了sm属性的表格案例

上图中加上了SM属性之后,就是相当于给这个表格增加了一个标识,可以完全选中一行的标识,这样就可以使用extjs的代码获取到表格的整行对象加以修改,详见下图代码:

editorgridpanel中修改整行表格的代码

 

相关文章推荐

ExtJS梦想之旅(八)–GridPanel和EditorGridPanel的使用

可编辑的EditorGridPanel

EditorGridPanel的一些属性,配置项,方法的实例.自适应窗体大小

Ext.grid.EditorGridPanel使用方法

EditorGridPanel的一些属性,配置项,方法的实例.自适应窗体大小

EXT可编辑Grid(EditorGridPanel )实现增删改

FormPanel,EditorGridPanel的赋值和传参、数据的保存删除

UI-grid 表格内容可编辑

EXTJS4 gridpanel中动态的显示/隐藏某个列

GridPanel合并表头