对于flexgrid，可以直接在单元格内进行编辑。
但另外还有一种编辑方式，即在一行添加按钮，统一的编辑和提交数据。
本文就来介绍，给flexgrid添加编辑按钮列，并通过编辑按钮设置编辑。
在上一篇(四)自定义Editor中，通过我们介绍了如何自定义Editor，主要使用的就是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 = '<div>' +
' ' +
'<button class="btn btn-default btn-sm" onclick="editRow(' + r + ')">' +
'<span class="glyphicon glyphicon-pencil"></span> Edit' +
'</button>' +
'</div>';
逻辑判断
在本文里，设置了editIndex，用来记录单元格的编辑状态情况。
当点击Edit按钮后，会调用editRow方法，改变editIndex，并且本行的单元格进入编辑状态。
代码参考：
function editRow(row) {
editIndex = row;
flex.invalidate();
}
点击按钮后，通过改变innerHTML，改变本列按钮的显示，本列按钮显示成commit和cancel。
代码参考：
html = '<div>' +
' ' +
'<button class="btn btn-primary btn-sm" onclick="commitRow(' + r + ')">' +
'<span class="glyphicon glyphicon-ok"></span> OK' +
'</button>' +
' ' +
'<button class="btn btn-warning btn-sm" onclick="cancelRow(' + r + ')">' +
'<span class="glyphicon glyphicon-ban-circle"></span> Cancel' +
'</button>' +
'</div>';
点击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取消提交数据。
本文的源代码请参考：
flexgrid_inlineEdit.zip (95.45 kb)
如果你对Wijmo5感兴趣，可以到如下链接下载：
更多资源：
Wijmo中文官网：/developer/wijmojs
Wijmo5在线示例：/developer/wijmojscore
Wijmo5产品文档：/developer/wijmojscore
如果依然有问题，可以到我们的官方产品论坛发帖咨询：http://gcdn.grapecity.com.cn/showforum-140.html
请参考Wijmo5技术文章汇总
《wijmo5 flexgrid基础教程》系列文章
