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 来禁止用户编辑特定列.

最终效果图:

WijGridEditMode

 

Demo 下载:

 

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