jqGrid Multiselect上的prettyCheckable

Question

我有一个 jqGrid 表，其中包含我使用CSS和prettyCheckable自定义的多选复选框。

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

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

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

所以我尝试将函数.prettyCheckable()插入到 jqGrid 的loadComplete中，并按 Oleg #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使用带有可选类<a>的{​​{1}}元素作为chechbox并通知原始复选框（在初始化后隐藏"checked"）per {{ 1}} event，但是jqGrid在行或复选框上等待prettyCheckable事件，并且对change事件没有反应。

我现在跳过一些不那么有趣的技术细节。您在下面找到的演示代码中最重要的部分

click

我使用了其他CSS设置（请参阅the answer）来增加列标题的高度

change