HTML5 Wijmo：控制 Wijmo Grid 插件的编辑模式

Wijmo jQuery 插件经常应用于在财务类网站中创建平滑和良好用户体验的交互表格。WijGrid 插件用于显示、排序、分组和编辑数据。今天我们来分享下如何控件WijGrid插件的编辑模式。在本篇博客汇总我们将会实现通过以下方式来是 WijGrid 进入编辑状态：单击双击特定列<img title="WijGridEditMode" style="display: inline" alt="WijGridEditMode" src="http://www.grapecity.com.cn/image.ashx?picture=WijGridEditMode_thumb.gif" width="600" height="500">

发布于 2014/04/30 00:00

WijmoJS

Wijmo jQuery 插件经常应用于在财务类网站中创建平滑和良好用户体验的交互表格。WijGrid 插件用于显示、排序、分组和编辑数据。今天我们来分享下如何控件WijGrid插件的编辑模式。

在本篇博客汇总我们将会实现通过以下方式来是 WijGrid 进入编辑状态：

单击
双击
特定列

我们可以通过设置 allowEditing 属性允许 WijGrid 编辑。默认情况下 WijGrid 通过点击“F2”或双击进入编辑状态。

通过单击使单元格进入编辑状态，我们需要捕获 currentCellChanged 事件，并且通过代码来使单元格进入编辑状态。代码如下:

   currentCellChanged: function (e, args) {
            if ($(e.target).wijgrid('option', 'isLoaded')) {
                selectedEditMode = $("#editMode").wijcombobox("option", "selectedValue");
                //if Editing mode is single click then start editing
                if (selectedEditMode == 'Single Click') {
                   window.setTimeout(function () {
                   $(e.target).wijgrid('beginEdit');
                   }, 100);
             }
         }
     }

可以通过设置列的 readOnly 属性为 true 来禁止用户编辑特定列.

最终效果图：

Demo 下载：

WijGrid - Editing Modes.htm

更多关于 HTML5 Wijmo 特性请参考：/developer/wijmojs

WijmoJS | 下载试用

WijmoJS 是一款基于 HTML5 的前端开发工具包，由 80 多种灵活、高效、跨平台、零依赖的 JavaScript UI 组件构成，如表格（Grid）、图表（Chart）、数据分析（Olap）、导航（Navigation）和金融图表等，完美兼容原生 JavaScript，以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架，可助力企业以最快的速度开发并构建出一套成熟的 Web 应用程序。

为顺利推进您的产品选型，推荐如下方式，加速产品评估进度：