jqGrid Multiselect prettyCheckable

Question

我有一個jqGrid表與多選複選框，我用CSS和prettyCheckable自定義。

定製我的表我設置.prettyCheckable()如下的所有複選框：

jQuery(document).ready(function($){ 
    $("input[type=checkbox]").change(function() { 
     $(this).triggerHandler("click"); 
    }).prettyCheckable(); 
}); 

但這不起作用。只有第一個複選框具有該樣式。

所以我試圖接入功能.prettyCheckable()到loadComplete的jqGrid的，以及由奧列格#here建議，通過增加檢查類<a>。

這是我的jqGrid設置：

$(document).ready(function() { 
    $('#searchForm').ajaxForm(function() { 
     var _data = $('#searchForm').serialize(); 
     $('#ResultsTable').jqGrid().setGridParam({ 
      url: '${searchUrl}' + _data, 
      loadComplete: function() { 
       $(this).find("input.cbox").prettyCheckable(); 
      } 
     }).trigger("reloadGrid") 
     return true; 
    }); 
    jsonTable('ResultsTable', 'ResultsPager', '${searchUrl}', 'searchForm', 
     {id: 'code'}, 
     ['Code', 'Description', 'CF'], 
     [{name: 'code', index: 'code', width: 55}, 
     {name: 'description', index: 'description', width: 90}, 
     {name: 'CF', index: 'CF', width: 80}, 
     function(id) { 
      var selRows = $(this).jqGrid('getGridParam', 'selarrrow'); 
      $('#edit').toggle(selRows.length == 1); 
      $('#delete').toggle(selRows.length > 0); 
      $('#editForm #code').val(selRows); 
      $('#deleteForm #code').val(selRows); 
      //$("#jqg_" + $.jgrid.jqID(this.id + "_" + id)).next("a").toggleClass('checked'); 
     }, 
     function(aSel, selected) { 
      $('#edit').toggle(false); 
      $('#delete').toggle(selected); 
      if (selected) { 
       $('#editForm #code').val(selRows); 
       $('#deleteForm #code').val(selRows); 
      } 
     }, 
     true 
    )  
}); 

也與此不工作，我怎麼能解決這個問題？

我創建了一個小的演示在這裏：jsfiddle.net/LStvX/1
任何幫助表示讚賞，謝謝！

Answer 1

首先我發現其他插件在jqGrid中的整合有趣。我之前沒有使用過prettyCheckable。在對prettyCheckable如何工作的方式進行相同的分析之後，我創建了the demo，它們演示了這種集成的一個示例。結果看起來像下面的圖片

理解代碼應該明白，prettyCheckable在更復雜的結構

轉換細胞的原始HTML片段與多選複選框

我覺得不好，prettyCheckable總是創建空的<label>元素，它增加了列的高度。所以我添加了隱藏所有<label>元素的代碼。

接下來的問題是，prettyCheckable使用可選類"checked"<a>元素chechboxes並通知原複選框每change事件（這是初始化prettyCheckable後隱藏），但jqGrid的等待click事件的行或複選框上對change事件沒有反應。

我現在跳過一些不那麼有趣的技術細節。演示的代碼的最重要的部分可以在下面找到

$("#list").jqGrid({ 
    ... 
    multiselect: true, 
    multiselectWidth: 28, 
    onSelectAll: function (aRowids, status) { 
     var i, l = aRowids.length, $a, 
      selector = "#jqg_" + $.jgrid.jqID(this.id) + "_"; 

     for (i = 0; i < l; i++) { 
      $a = $(selector + $.jgrid.jqID(aRowids[i])).next("a"); 
      if (status) { 
       $a.addClass("checked"); 
      } else { 
       $a.removeClass("checked"); 
      } 
     } 
    }, 
    beforeSelectRow: function (rowid, e) { 
     if (e.target.nodeName.toUpperCase() === "A" && 
       $(e.target).prev("input").hasClass("cbox")) { 
      $(e.target).prev("input").click(); 
     } 
     return true; 
    }, 
    onSelectRow: function (rowid, state) { 
     var $a = $("#jqg_" + $.jgrid.jqID(this.id + "_" + rowid)).next("a"); 
     if (state) { 
      $a.addClass("checked"); 
     } else { 
      $a.removeClass("checked"); 
     } 
    }, 
    loadComplete: function() { 
     var $checkboxes = $(this).find("input.cbox"); 
     $checkboxes.prettyCheckable(); 
     $checkboxes.siblings("label").hide(); 
    } 
}); 
$("#cb_" + $.jgrid.jqID($grid[0].id)).change(function() { 
    $(this).triggerHandler("click"); 
}).prettyCheckable(); 
$("#cb_" + $.jgrid.jqID($grid[0].id)).siblings("label").hide(); 

我用額外的CSS設置（見the answer）增加列標題的高度

th.ui-th-column div { 
    white-space: normal !important; 
    height: auto !important; 
}