jqGrid上的prettyCheckable不起作用

时间:2013-06-17 09:41:20

标签: jquery html css checkbox jqgrid

我有一个带有多选复选框的 jqGrid 表(将表转换为网格)。 要自定义我使用 prettyCheckable 的复选框样式,它会为复选框输入生成标签和锚点(href)和div容器(隐藏并由标签和a覆盖)。我的问题是,当我检查标签不起作用时,相反,当我检查输入工作。

Label checked

Input checked

<div class="clearfix prettycheckbox labelright  blue " id="aui_11140">
    <input role="checkbox" id="rs" class="cbx" type="checkbox" style="display: none;">
    <label for="rs" class="checked" id="aui_11139">
    </label>
</div>

为输入设置prettyCheckable:

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

这是我的jqGrid设置:

$(document).ready(function() {
     $('#searchForm').ajaxForm(function() {
        var _data = $('#searchForm').serialize();
        $('#ResultsTable').jqGrid().setGridParam({url: '${searchUrl}' + _data}).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);
        },
        function(aSel, selected) {
            $('#edit').toggle(false);
            $('#delete').toggle(selected);
            if (selected) {
                $('#editForm #code').val(selRows);
                $('#deleteForm #code').val(selRows);
            }
        },
        true
    )      
});

为什么这不起作用?

PS。我编辑了 prettyCheckable.js 并删除了<a>因此未生成。我将css从.prettycheckbox a {}重命名为.prettycheckbox label {}

1 个答案:

答案 0 :(得分:1)

插件prettyCheckable使用类似

的代码
input.prop('checked', true).change();

将状态的更改转发到复选框。另一方面,jqGrid仅包含click事件句柄(请参阅the line)。

如果发生click事件,您可以做的是触发change事件。

例如,让我们为id="list"添加网格。然后,选中所有项目的id复选框将为cb_list(“cb_”附加网格ID)。所以你可能使用像

这样的代码
$("#cb_list").prettyCheckable();

我建议您将代码更改为以下

$("#cb_list").change(function() {
    $(this).triggerHandler("click");
}).prettyCheckable();

应该解决你的问题。