轻松实现extjs下表格数据删除操作 (extjs 删除表格的数据库)
轻松实现Ext下表格数据删除操作
Ext是一款流行的前端JavaScript框架，它提供了丰富的UI组件和数据处理功能。在工程项目中，表格数据的展示和操作是比较常见的需求。而删除表格数据，是一个更为常见的操作。本文将介绍如何在Ext中轻松地实现表格数据的删除操作。
之一步：创建数据源
在Ext中，数据源（store）是管理表格数据的核心对象。在进行表格数据删除操作之前，我们需要先创建一个数据源，并设置好数据模型（model）和数据代理（proxy）。
数据模型定义了数据源中的数据结构，包括每一列的名称、类型和验证规则等。在本文的例子中，我们以文章数据为例，数据模型定义如下：
“`
Ext.define(‘ArticleModel’, {
extend: ‘Ext.data.Model’,
fields: [{
name: ‘id’,
type: ‘int’
}, {
name: ‘title’,
type: ‘string’
},{
name: ‘content’,
type: ‘string’
},{
name: ‘createTime’,
type: ‘date’,
dateFormat: ‘Y-m-d H:i:s’
}]
});
“`
数据代理（proxy）用于与后台服务器交互，从而实现数据的读取、添加、修改和删除等操作。在本文中，我们以RESTful API作为数据接口，数据代理的定义如下：
“`
Ext.define(‘ArticleStore’, {
extend: ‘Ext.data.Store’,
model: ‘ArticleModel’,
proxy: {
type: ‘rest’,
url: ‘/api/articles’,
reader: {
type: ‘json’,
rootProperty: ‘data’
},
writer: {
type: ‘json’,
writeAllFields: true
},
api: {
create: ‘/api/articles’,
read: ‘/api/articles’,
update: ‘/api/articles/{id}’,
destroy: ‘/api/articles/{id}’
}
},
autoLoad: true
});
“`
以上代码中，我们定义了一个RESTful API的数据代理，通过该代理可以访问后台服务器的文章数据接口。其中，“read”、“create”、“update”和“destroy”对应于RESTful API的四种操作。同时，我们也开启了数据自动加载的功能，这样在页面打开时，表格的数据就会自动加载。
第二步：创建表格视图
在数据源创建好之后，我们需要在页面中创建一个表格视图，以展示、编辑和删除数据。
表格视图（grid）是Ext中最常见的UI组件之一，它可以创建一个类似Excel的数据展示界面，并提供各种交互功能。在本文中，我们以一个基本的表格视图为例，代码如下：
“`
Ext.create(‘Ext.grid.Panel’, {
title: ‘文章列表’,
store: ‘ArticleStore’,
selModel: ‘rowmodel’,
plugins: ‘gridfilters’,
columns: [{
xtype: ‘rownumberer’
}, {
text: ‘标题’,
dataIndex: ‘title’,
filter: ‘string’,
flex: 1
}, {
text: ‘内容’,
dataIndex: ‘content’,
filter: ‘string’,
flex: 2
}, {
text: ‘创建时间’,
dataIndex: ‘createTime’,
filter: ‘date’,
format: ‘Y-m-d H:i:s’,
flex: 1
}, {
xtype: ‘actioncolumn’,
text: ‘操作’,
items: [{
iconCls: ‘x-fa fa-edit’,
tooltip: ‘编辑’,
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert(“编辑文章：” + rec.get(‘title’));
}
}, {
iconCls: ‘x-fa fa-trash’,
tooltip: ‘删除’,
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
grid.getStore().remove(rec);
}
}]
}],
dockedItems: [{
xtype: ‘toolbar’,
dock: ‘top’,
items: [{
text: ‘添加文章’,
iconCls: ‘x-fa fa-plus’,
handler: function() {
alert(“添加文章”);
}
}]
}],
renderTo: Ext.getBody()
});
“`
以上代码中，我们创建了一个简单的表格视图，用于展示文章数据，并提供编辑和删除操作。表格的列定义了每一列的名称、数据索引和筛选器等；同时，我们还创建了一个“操作”列，用于显示“编辑”和“删除”按钮。在删除按钮的处理函数中，我们直接从数据源中移除被选中的记录，这样就实现了数据的删除操作。
第三步：添加确认提示
当用户执行删除操作时，通常需要提示用户确认该操作。为了实现这个功能，我们可以添加一个确认对话框，如下所示：
“`
items: [{
iconCls: ‘x-fa fa-trash’,
tooltip: ‘删除’,
handler: function(grid, rowIndex, colIndex) {
Ext.Msg.confirm(‘确认’, ‘你确定要删除该文章吗？’, function(btn) {
if (btn == ‘yes’) {
var rec = grid.getStore().getAt(rowIndex);
grid.getStore().remove(rec);
}
});
}
}]
“`
通过Ext.Msg.confirm()函数，我们弹出了一个确认对话框，并等待用户选择“是”或“否”。如果用户选择“是”，则执行删除操作；否则不执行任何操作。
第四步：实现后台数据删除
到目前为止，我们已经完成了在前端页面中实现Ext表格数据的删除操作。但是，真正的数据删除还需要在后台服务器进行处理。
为了达到这个目的，我们需要在后台服务器中编写相应的数据处理接口。例如，在Node.js服务器中，我们可以使用Express框架，编写一个删除文章数据的API接口，如下所示：
“`
app.delete(‘/api/articles/:id’, function (req, res, next) {
var id = req.params.id;
db.query(‘DELETE FROM articles WHERE id = ?’, [id], function (err, result) {
if (err) {
res.status(500).send({error: err});
} else {
res.status(200).send({data: result});
}
});
});
“`
以上代码中，我们定义了一个DELETE请求，用于删除指定ID的文章数据。在请求处理函数中，我们首先获取请求中的ID参数，然后将该ID对应的文章数据从数据库中删除。如果删除操作成功，则返回200状态码；否则返回500状态码和错误信息。
实现后台数据删除之后，我们就可以在表格中删除数据，并且这些删除操作也会被同步到后台服务器中。
结论
本文介绍了如何在Ext中轻松实现表格数据的删除操作。我们首先创建了一个数据源，用于管理文章数据；然后创建了一个表格视图，用于展示和操作文章数据；我们添加了确认提示和后台数据删除，实现了完整的数据删除流程。
当然，这只是一个简单的例子，实际的表格删除操作可能还涉及到分页、多选和批量删除等复杂场景。但是，通过本文的介绍，读者可以基本掌握Ext的表格数据删除操作，并在实际应用中加以运用。
