请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

断天涯大虾
社区贡献组   /  发表于:2016-10-19 10:57  /   查看:3394  /  回复:0
本帖最后由 断天涯大虾 于 2016-10-19 11:02 编辑

对于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.             // save changes
  3.             flex.setCellData(row, 'date', inputDate.value);
  4.             flex.setCellData(row, 'country', $("#theCountry").val());
  5.             flex.setCellData(row, 'population', inputPopulation.value);

  6.             // done editing
  7.             cancelRow(row);

  8.             //Get the updated values in collection view.
  9.             var cv = flex.collectionView;
  10.         }
复制代码
点击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与数百位开发精英即时交流,还可参加每周的视频公开课,快速上手。
   
关于葡萄城:全球最大的控件提供商,世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商,为超过75%的全球财富500强企业提供服务。

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部