Wijmo5 Flexgrid基础教程:InlineEdit

liuian 2025-02-03 13:59 35 浏览

Wijmo Enterprise下载>

对于flexgrid，可以直接在单元格内进行编辑。但另外还有一种编辑方式，即在一行添加按钮，统一的编辑和提交数据。本文主要介绍给flexgrid添加编辑按钮列，并通过编辑按钮设置编辑。

在上一篇自定义编辑器中，我们介绍了如何自定义编辑器，主要使用的就是itemFormatter功能。在本文中，我们依然要使用这个itemFormatter功能设置编辑列。

创建buttons列

在flexgrid的columns中创建列，用来添加按钮，代码参考：

columns: [
{ header: 'ID', name: "id", binding: 'id', width: '*' },
{ header: 'Date', name: "date", binding: 'date', width: '*' },
{ header: 'Country', name: "country", binding: 'country', format: 'n0', width: '*' },
{ header: 'Population', name: "population", binding: 'population', width: '*' },
{ header: 'Buttons', binding: "buttons", name: "buttons", width: '*' }],

初始化

通过itemFormatter初始化显示按钮。设置单元格元素的innerHTML，让单元格显示按钮，使用JS代码拼了HTML的字符串，代码参考：

html = '' +
' ' +
'
';

逻辑判断

在本文里，设置了editIndex，用来记录单元格的编辑状态情况。当点击Edit按钮后，会调用editRow方法，改变editIndex，并且本行的单元格进入编辑状态。代码参考：

function editRow(row) {
editIndex = row;
flex.invalidate;
}

点击按钮后，通过改变innerHTML，改变本列按钮的显示，本列按钮显示成commit和cancel。代码参考：

html = '' +
' ' +
'
';

点击commit按钮会提交数据，代码参考：

function commitRow(row) {

// save changes
flex.setCellData(row, 'date', inputDate.value);
flex.setCellData(row, 'country', $("#theCountry").val);
flex.setCellData(row, 'population', inputPopulation.value);

// done editing
cancelRow(row);

//Get the updated values in collection view.
var cv = flex.collectionView;
}

点击cancel按钮，会取消修改，代码参考：

function cancelRow(row) {
editIndex = -1;
flex.invalidate;
}

至此，就完成了InlineEdit的编辑。根据本文中的示例，可以通过Edit按钮进行整行编辑，并且修改后，通过commit提交数据，通过cancel取消提交数据。

PS: 关于ComponentOne，这些产品你可以关注>>

葡萄城经典UI产品新年大促，惊喜折扣礼品送不停！

本站文章除注明转载外，均为本站原创或翻译

display:inline-flex

上一篇：5、谈谈你对BFC的理解?（如何理解bfc）
下一篇：超详细带你从入门开始，开发一个超实用的浏览器插件

Wijmo5 Flexgrid基础教程:InlineEdit

创建buttons列

初始化

逻辑判断

PS: 关于ComponentOne，这些产品你可以关注>>

葡萄城经典UI产品新年大促，惊喜折扣礼品送不停！

相关推荐

飞牛OS入门安装遇到问题，如何解决?

C++ std::vector 简介

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

如何在 iPhone 和 Android 上恢复已删除的抖音消息

大模型手册: 保姆级用CherryStudio知识库

Boost高性能并发无锁队列指南:boost::lockfree::queue

西门子博途中如何输入读取和编辑date and time变量

我的Excel打开后是一堆乱码，如何解决?

用什么工具在Win中查看8G大的log文件?

威联通NAS安装阿里云盘WebDAV服务并添加到Infuse