开发动态编辑的表格
Ext JS在Ext.grid.plugin包下提供了允许编辑表格的插件功能，该包下提供了如下3个与表格编辑有关的类。
- Ø Ext.grid.plugin.Editing：为表格增加编辑功能的基类。
- Ø Ext.grid.plugin.RowEditing：为表格行增加编辑功能的插件类。
- Ø Ext.grid.plugin.CellEditing：为单元格增加编辑功能的插件类。
当使用Ext.grid.plugin.RowEditing、Ext.grid.plugin.CellEditing为表格增加编辑时，可以指定如下4种常见的事件处理函数。
- Ø beforeedit：在编辑之前触发的事件处理函数。
- Ø canceledit：取消编辑时触发的事件处理函数。
- Ø edit：编辑完成时触发的事件处理函数。
- Ø validateedit：指定编辑完成之后，值被保存到Store之前触发该事件处理函数。如果该事件处理函数返回false，将可以取消编辑。
为该表格增加动态编辑功能，需要完成如下两步：
使用Ext.grid.Panel定义表格时，可通过plugins选项为表格单击单元格编辑插件或行编辑插件。
使用Ext.grid.Panel定义表格，并且使用fields选项定义表格列时，为需要编辑的单元格通过editor选项指定单元格编辑器。
如下示例开发了一个允许异步、动态编辑表格数据的页面。
程序清单：codes\06\6.8\Ext.grid\Ext.grid.Panel_edit.html
<body>
<script type="text/javascript">
Ext.onReady(function(){
Ext.define('Book', {
extend: 'Ext.data.Model',
fields: [
{name: 'id' , type: 'int'},
{name: 'name', type: 'string'},
{name: 'author', type: 'string'},
{name: 'price', type: 'float'},
]
});
// 创建一个Ext.data.Store对象
var bookStore = Ext.create('Ext.data.Store',
{
// 指定使用Book Model管理记录
model: 'Book',
// 使用proxy指定加载远程数据
proxy:
{
type: 'ajax',
url: 'getAllBooks',// 向该URL发送Ajax请求
reader: { // 使用Ext.data.reader.Json读取服务器数据
type: 'json',
root: 'data' // 直接读取服务器响应的data数据
},
},
autoLoad:true// 自动加载服务器数据
});
var grid = Ext.create('Ext.grid.Panel', {
title: '查看服务器端图书',
width: 550, // 指定表单宽度
renderTo: Ext.getBody(),
// 定义该表格包含的所有数据列
columns: [
{ text: '图书ID', dataIndex: 'id' , flex: 1 }, // 第1个数据列
// 第2个数据列
{ text: '书名', dataIndex: 'name' , flex: 1,
editor: {xtype: 'textfield', allowPattern: false}},
// 第3个数据列
{ text: '作者', dataIndex: 'author', flex: 1,
editor: {xtype: 'textfield', allowPattern: false}},
// 第4个数据列
{ text: '价格', dataIndex: 'price' , flex: 1,
editor: {xtype: 'numberfield', allowPattern: false}},
],
selType: 'rowmodel', // 指定选择模式：行选择模式
plugins:
[
// 增加表格行编辑插件
{
ptype: 'rowediting',
clicksToEdit: 1
}
],
store: bookStore
});
// 当表格编辑完成后，触发该事件处理函数
grid.on('edit', function(editor, e)
{
Ext.Ajax.request({
url: 'updateBook', // 向此处发送Ajax请求
method: 'POST',
params: { // 指定请求参数
id: e.newValues.id,
name: e.newValues.name,
author: e.newValues.author,
price: e.newValues.price,
}, // 指定服务器响应完成的回调函数
success: function(response){
alert(Ext.JSON.decode(response.responseText).tip);
e.record.commit();
}
});
});
});
</script>
</body>
上面的第一段粗体字代码通过fields选项配置了该表格的所有表格列，配置各表格列时通过editor选项指定了各单元格的编辑器；接下来第二段粗体字代码通过plugins选项为表格增加了表格行编辑的功能；第三段代码为表格的编辑事件增加了事件处理函数，但表格编辑完成后，将会通过Ajax请求动态地修改底层数据。
当前台页面的记录修改完成后，该页面会向updateBook发送请求，该Servlet的代码如下。
程序清单：codes\06\6.8\Ext.grid\WEB-INF\src\org\crazyit\exts\web\UpdateBookServlet.java
@WebServlet(urlPatterns="/updateBook")
public class UpdateBookServlet extends HttpServlet
{
public void service(HttpServletRequest request ,
HttpServletResponse response)
throws IOException , ServletException
{
request.setCharacterEncoding("utf-8");
// 获取请求参数
String id = request.getParameter("id");
String name = request.getParameter("name");
String author = request.getParameter("author");
String price = request.getParameter("price");
Map<String , Object> result = new HashMap<>();
boolean rvtVal = new BookService().updateBook(
Integer.parseInt(id) , name , author ,
Double.parseDouble(price));
result.put("tip" , rvtVal ? "修改成功！" : "修改失败！");
// 准备输出服务器响应
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
// 将Map包装成JSONObject后输出
out.print(new JSONObject(result));
}
}
上面的Servlet调用了业务逻辑组件BookService的updateBook()方法更新图书，这样即可动态地以Ajax方式修改底层数据。
在浏览器中浏览该页面，并单击任意行就会进入“行编辑”状态，效果如图6.79所示。
图6.79 编辑行
本文节选自
《疯狂Ajax讲义（第3版）》
李刚 编著
电子工业出版社出版
相关推荐
在Bootstrap中，表格（Table）是常见的数据展示组件，而“bootstrap插件_table可编辑表格_demo”则是Bootstrap表格功能的一个扩展，它允许用户直接在表格内进行编辑，提供了更加交互式的用户体验。 Bootstrap表格的...
在教学演示中，动态编辑表格可以帮助学生直观地理解数据操作。 总的来说，TLAB中的可编辑表格是MATLAB开发中提高数据交互性的重要工具，它允许用户在图形界面中直接处理数据，简化了数据操作流程，提高了工作效率。...
2. **JavaScript与JS库**: JavaScript用于增加表格的动态功能，如AJAX（异步JavaScript和XML）开发，使表格能够从服务器获取或发送数据而无需刷新页面。在这里，JavaScript可能被用来处理用户输入，如监听键盘事件...
以上就是一个简单的原生JavaScript可编辑表格实现动态添加和删除行的示例。在实际应用中，可能还需要处理更多细节，如数据验证、表格排序和过滤等。记住，JavaScript是一种强大的工具，能够帮助我们实现丰富的交互式...
动态表格是网页设计中常见的需求，特别是在处理大量结构化数据时。本教程将重点讲解如何使用AngularJS来实现动态表格的功能。 AngularJS的核心概念之一是数据绑定，它允许开发者在视图（View）和模型（Model）之间...
在Android开发中，创建动态表格效果是常见的需求，特别是在展示数据或者进行用户交互时。本教程将探讨如何利用Android的自定义View或者现有的布局控件，如LinearLayout、TableLayout、GridLayout等，来实现一个可...
"jquery可编辑表格插件"就是基于jQuery的一种工具，旨在为网页中的表格提供动态编辑功能，使得用户可以直接在表格中进行数据的增删改查，极大地提升了交互性和用户体验。这种插件在数据展示和管理场景中尤其实用，...
在本文中，我们将详细解析如何使用Vue.js框架封装一个可编辑的表格插件。该插件允许用户在表格中进行单元格编辑，并能对表头进行任意合并，从而提供了强大的表格数据处理功能。 首先，我们需要了解该插件的基本结构...
JavaScript（js）作为客户端脚本语言，使得我们能够实现表格的动态交互功能，如动态添加行、行编辑以及行数据修改。下面我们将深入探讨这些知识点。 ### 1. 动态添加行 在HTML中，`<table>`元素用于创建表格，但...
在IT行业中，尤其是在网页开发领域，可编辑表格的实现是一个常见的需求。"可编辑表格js代码" 提供了一种高效且灵活的解决方案，允许用户直接在网页上对表格数据进行编辑，极大地提升了交互性和用户体验。下面我们将...
它可以处理大量数据，支持排序、过滤、搜索等功能，并且用户可以直接在浏览器中编辑表格内容。此外，它还提供了各种API和事件，使得开发者可以自定义功能，如数据验证、单元格格式化等。 2. **ASP.NET**: ASP.NET是...
Bootstrap编辑表格插件是基于此框架开发的一种交互性工具，它为网页中的表格提供了可编辑的功能，允许用户直接在表格中进行数据的增删改查操作。这在数据管理和展示时特别有用，尤其是对于需要实时更新信息的应用...
此外，对于可编辑表格，我们还需要考虑数据验证、错误提示、格式化等功能，这些可以通过添加额外的jQuery代码来实现。例如，可以使用`change`事件来实时验证输入，并通过`addClass()`和`removeClass()`改变单元格的...
在实际应用中，使用可编辑表格的前端开发需要注意以下几点： 1. **数据同步**：确保用户在表格内的编辑能实时反映到后台数据库，通常通过AJAX异步请求实现。 2. **错误处理**：当用户输入无效数据时，需要有明确的...
在IT领域，尤其是在Web开发中，可编辑表格是一种常见的需求，它允许用户直接在网页上的表格内修改数据，提供了一种交互性强的数据管理方式。原生JavaScript制作的可编辑表格无需依赖外部库，如jQuery或Angular等，...
【标题】"原创-javascript服务器交互型可编辑表格"是一个关于使用JavaScript实现与服务器进行交互的动态、可编辑表格的技术分享。在这个项目中，开发者利用JavaScript的灵活性和强大的功能，创建了一个用户可以直接...
标题中的“可写的动态表格”指的是在网页上能够实时编辑的表格组件，它允许用户不仅查看数据，还能直接在表格中进行添加、修改和删除等...学习和掌握动态表格的创建和操作，对于提升Web开发技能和用户体验至关重要。
3. 可编辑表格的设计与实现，包括监听用户交互、切换编辑状态和实时保存数据。 4. 代码注释和文档编写，以提高代码的可读性和可维护性。 通过学习和理解这个实现，开发者可以增强其在动态网页开发中的技能，尤其是...
综上所述，"纯js和html可编辑的table（表格）"项目结合了HTML的结构、JavaScript的交互性以及CSS的美化，实现了用户可以直接在网页上编辑表格的功能。这不仅可以提高用户体验，也简化了数据输入和管理的流程。通过...