Wijmo5 FlexGrid教程（5）- 实现编辑InlineEdit功能

对于FlexGrid，可以直接在单元格内进行编辑。

但另外还有一种编辑方式，即在一行添加按钮，统一的编辑和提交数据。

本文就来介绍，给FlexGrid添加编辑按钮列，并通过编辑按钮设置编辑。

在上一篇(四)自定义Editor中，通过我们介绍了如何自定义Editor，主要使用的就是itemFormatter功能。

在本文中，我们依然要使用这个itemFormatter功能设置编辑列。

步骤创建buttons列

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

1. columns: [
   
2.                { header: 'ID', name: "id", binding: 'id', width: '*' },
   
3.                { header: 'Date', name: "date", binding: 'date', width: '*' },
   
4.                { header: 'Country', name: "country", binding: 'country', format: 'n0', width: '*' },
   
5.                { header: 'Population', name: "population", binding: 'population', width: '*' },
   
6.                { header: 'Buttons', binding: "buttons", name: "buttons", width: '*' }],

复制代码

初始化

通过itemFormatter初始化显示按钮。

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

1. html = '<div>' + '  ' +
   
2.             '<button class="btn btn-default btn-sm" onclick="editRow(' + r + ')">' +
   
3.                       '<span class="glyphicon glyphicon-pencil"></span> Edit' +
   
4.                     '</button>' +
   
5.                   '</div>';

复制代码

逻辑判断

在本文里，设置了editIndex，用来记录单元格的编辑状态情况。

当点击Edit按钮后，会调用editRow方法，改变editIndex，并且本行的单元格进入编辑状态。

代码参考：

1. function editRow(row) {
   
2.             editIndex = row;
   
3.             flex.invalidate();
   
4.         }

复制代码

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

代码参考：

1. html = '<div>' +
   
2.             '  ' +
   
3.            '<button class="btn btn-primary btn-sm" onclick="commitRow(' + r + ')">' +
   
4.            '<span class="glyphicon glyphicon-ok"></span> OK' +
   
5.             '</button>' +
   
6.             '  ' +
   
7.             '<button class="btn btn-warning btn-sm" onclick="cancelRow(' + r + ')">' +
   
8.                        '<span class="glyphicon glyphicon-ban-circle"></span> Cancel' +
   
9.                    '</button>' +
   
10.             '</div>';

复制代码

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

1. function commitRow(row) {
   
2. 
   
3.             // save changes
   
4.             flex.setCellData(row, 'date', inputDate.value);
   
5.             flex.setCellData(row, 'country', $("#theCountry").val());
   
6.             flex.setCellData(row, 'population', inputPopulation.value);
   
7. 
   
8.             // done editing
   
9.             cancelRow(row);
   
10. 
    
11.             //Get the updated values in collection view.
    
12.             var cv = flex.collectionView;
    
13.         }

复制代码

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

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

复制代码

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

免费试用
FlexGrid 包含在全能控件套包 ComponentOne Studio Enterprise 中。下载试用，请点击：
http://www.gcpowertools.com.cn/products/download.aspx?pid=2

了解更多详情，请访问官网：
http://www.gcpowertools.com.cn/products/componentone_studio_winform_flexgrid.htm

欢迎加入ComponentOne 官方QQ交流群：415971774，与数百位开发精英即时交流，还可参加每周的视频公开课，快速上手。