IT工程師數位筆記本

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 下載：

更多關于 HTML5 Wijmo 特性請參考：http://wijmo.gcpowertools.com.cn/