Country  china

Wijmo5 FlexGrid教程(5)- 实现编辑InlineEdit功能

 

对于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感兴趣,可以到如下链接下载:

http://www.gcpowertools.com.cn/products/download.aspx?pid=54

 

更多资源:

Wijmo中文官网:http://wijmo.gcpowertools.com.cn/

Wijmo5在线示例:http://wijmo.gcpowertools.com.cn/products/wijmo-5/

Wijmo5产品文档:http://wijmo.gcpowertools.com.cn/5/docs/

如果依然有问题,可以到我们的官方产品论坛发帖咨询:http://gcdn.gcpowertools.com.cn/showforum-140.html

 

请参考Wijmo5技术文章汇总

 《wijmo5 flexgrid基础教程》系列文章

 

 

转载声明:
欢迎将本站文章进行转载、演绎或用于商业目的,转载时请注明以下信息
文章转自:葡萄城控件产品博客,http://blog.gcpowertools.com.cn
原文地址:http://blog.gcpowertools.com.cn/post/wijmo5_flexgrid_InlineEdit.aspx

不允许评论