Slickgrid - 一鍵複選框？

Question

當我在Slickgrid中創建一個複選框列（通過使用格式器/編輯器）時，我注意到需要兩次點擊才能與之交互（一個用於聚焦單元格，另一個用於與複選框交互）。 （這是非常有意義的）

但是，我已經注意到，我能夠與複選框選擇器插件（用於選擇多行）進行交互，只需點擊一下即可。有什麼辦法可以讓我所有的複選框都以這種方式行事嗎？

Answer 1

我用onBeforeEditCell事件來達到這一目的我布爾場「can_transmit」

基本上捕捉你想要的列編輯單擊單元格，自行更改，然後返回false停止單元格編輯事件。

grid.onBeforeEditCell.subscribe(function(row, cell) {     
      if (grid.getColumns()[cell.cell].id == 'can_transmit') { 
       if (data[cell.row].can_transmit) { 
        data[cell.row].can_transmit = false; 
       } 
       else { 
        data[cell.row].can_transmit = true; 
       } 
       grid.updateRow(cell.row); 
       grid.invalidate(); 
       return false; 
      } 

這適用於我。但是，如果您使用DataView功能（例如過濾），則需要做其他工作來更新數據視圖。 我還沒有想出如何做到這一點......

Answer 2

註冊「onClick」事件的處理程序，並在那裏對數據進行更改。 見http://mleibman.github.com/SlickGrid/examples/example7-events.html

grid.onClick.subscribe(function(e, args) { 
    var checkbox = $(e.target); 
    // do stuff 
}); 

Answer 3

我設法通過調用

setTimeout(function(){ $("theCheckBox").click(); },0); 

在我CheckBoxCellEditor功能，並調用Slick.GlobalEditorLock.commitCurrentEdit（）來得到一個單一的點擊編輯，而hackishly工作與數據視圖;當CheckBoxCellEditor創建複選框被點擊（通過setTimeout）。

問題是單擊CheckBoxCellFormatter複選框，然後該事件產生CheckBoxCellEditor代碼，該代碼將替換複選框。如果您只是在該選擇器上調用jquery的.click（），那麼您將再次觸發CheckBoxCellEditor事件，因爲slickgrid尚未解除首先綁定您的處理程序。 setTimeout在處理程序被移除後觸發點擊（我擔心計時問題，但我無法在任何瀏覽器中生成任何內容）。

對不起，我不能提供任何示例代碼，我的代碼是具體實現作爲一個通用的解決方案是有用的。

Answer 4

我發現解決它的唯一方法是編輯slick.checkboxselectcolumn.js插件。我喜歡這個訂閱方法，但它並沒有給我任何收音機按鈕的聽衆。

因此，我所做的編輯功能handleClick（即參數） & handleHeaderClick（即參數）。 我添加了函數調用，並在我的js文件中，我只是做了我想要的東西。

function handleClick(e, args) { 
    if (_grid.getColumns()[args.cell].id === _options.columnId && $(e.target).is(":checkbox")) { 
     ...... 
     //my custom line 
     callCustonCheckboxListener(); 
     ...... 
    } 
} 

---

function handleHeaderClick(e, args) { 
    if (args.column.id == _options.columnId && $(e.target).is(":checkbox")) { 
     ... 
     var isETargetChecked = $(e.target).is(":checked"); 
     if (isETargetChecked) { 
      ... 
      callCustonHeaderToggler(isETargetChecked); 
     } else { 
      ... 
      callCustonHeaderToggler(isETargetChecked); 
     } 
     ... 
    } 
} 

代碼

pastebin.com/22snHdrw

搜索我的評論用戶名

Answer 5

獲得進一步的讀者我通過對矯正格柵數據本身就解決了這個問題點擊事件。將布爾值設置爲相反，然後格式化程序將顯示點擊或未點擊的複選框。

grid.onClick.subscribe (function (e, args) 
{ 
    if ($(e.target).is(':checkbox') && options['editable']) 
    { 
     var column = args.grid.getColumns()[args.cell]; 

     if (column['editable'] == false || column['autoEdit'] == false) 
      return; 

     data[args.row][column.field] = !data[args.row][column.field]; 
    } 
}); 

function CheckboxFormatter (row, cell, value, columnDef, dataContext) 
{ 
    if (value) 
     return '<input type="checkbox" name="" value="'+ value +'" checked />'; 
    else 
     return '<input type="checkbox" name="" value="' + value + '" />'; 
} 

希望它有幫助。

Answer 6

我這樣做的方式非常簡單。

1. 第一步是您必須禁用您的複選框的編輯器處理程序。 在我的項目中，它看起來像這樣。我有一個slickgridhelper.js註冊插件並與他們一起工作。

   function attachPluginsToColumns(columns) { 
       $.each(columns, function (index, column) { 
        if (column.mandatory) { 
         column.validator = requiredFieldValidator; 
        } 
        if (column.editable) { 
         if (column.type == "text" && column.autocomplete) { 
          column.editor = Slick.Editors.Auto; 
         } 
         else if (column.type == "checkbox") { 
          //Editor has been diasbled. 
          //column.editor = Slick.Editors.Checkbox; 
          column.formatter = Slick.Formatters.Checkmark; 
         } 
        } 
       });  
   

2. 下一步是在您正在開發的自定義js頁面中註冊一個onClick事件處理程序。

grid.onClick.subscribe(function (e, args) { 
 

 
     var row = args.grid.getData().getItems()[args.row]; 
 
     var column = args.grid.getColumns()[args.cell]; 
 

 
     if (column.editable && column.type == "checkbox") { 
 
      row[column.field] = !row[column.field]; 
 
      refreshGrid(grid); 
 
     } 
 
    });

現在只需一次點擊是足以改變你的複選框的值，並堅持它。