jqGrid Multiselect上的prettyCheckable

我有一个带有多选复选框的jqGrid表，我已经使用CSS和prettyCheckable进行了自定义。

要自定义我的表的所有复选框，我设置.prettyCheckable()如下：

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

但这不起作用。 只有第一个复选框具有样式。

所以我试着将函数.prettyCheckable()插入到.prettyCheckable() loadComplete中，并按照Oleg #here的建议，为添加了检查类。

这是我的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工作方式进行相同的分析后，我创建了演示 ，演示了这种集成的一个例子。 结果如下图所示

要理解代码，应该理解prettyCheckable转换单元格的原始HTML片段

在更复杂的结构

我发现不好看， prettyCheckable总是创建空元素，这会增加列的高度。 所以我添加了隐藏所有元素的代码。

接下来的问题是， prettyCheckable使用带有可选类"checked" 元素用于chechbox，并在每次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设置（请参阅答案 ）来增加列标题的高度

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