prettyCheckable on jqGrid不工作 [英] prettyCheckable on jqGrid doesn't work

问题描述

我有一个具有多选复选框的 jqGrid 表（将表转换为网格）。
要自定义复选框样式，我使用 prettyCheckable ，生成标签和用于复选框输入的锚点（href）和div容器（隐藏和覆盖的标签和a）。我的问题是，当我检查标签不工作，而是当我检查输入的工作。

 < div class =clearfix prettycheckbox labelright blueid =aui_11140> 
< input role =checkboxid =rsclass =cbxtype =checkboxstyle =display：none;> 
< label for =rsclass =checkedid =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}）。 return true; 
}）; 
 jsonTable（'ResultsTable'，'ResultsPager'，'$ {searchUrl}'，'searchForm'，
 {id：'code'}，
 ['Code'，'Description'，'CF']，
 [{name：'code'，index：'code'，width：55}，
 {name：'description' ：'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'）。 
}，
函数（aSel，selected）{
 $（'＃edit'）。 
 $（'＃delete'）。toggle（selected）; 
 if（selected）{
 $（'＃editForm #code'）。val（selRows）; 
 $（'＃deleteForm #code'）。val（selRows）; 
} 
}，
 true 
）
}）; 
  

为什么这不起作用？

ps。我编辑了 prettyCheckable.js 并删除了< a> ，因此不会生成。我把 .prettycheckbox a {} 重命名为 .prettycheckbox label {} 。

解决方案

插件 prettyCheckable 使用类似

的代码

  input.prop（'checked'，true）.change（）; 
  

将状态的更改转发到复选框。另一方面，jqGrid包含点击事件句柄（参见

你可以做的是触发在更改事件的情况下，单击事件。

例如，网格与 id =list。然后，用于选择所有项的复选框的 id 将是 cb_list （cb_附加网格id）。因此，您可以使用像

这样的代码：

  $（＃cb_list）。 
  

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

  $（＃cb_list）。change（function（）{
 $（this）.triggerHandler（click）; 
}）。prettyCheckable（）; 
  

这应该可以解决您的问题。

I have a jqGrid table (that converts a table to grid) with multi-select checkboxes. To customize the checkbox style I used prettyCheckable, that generates a label and an anchor (href) and div container for checkbox input (that is hidden and covered by label and a). My issue is that when i check the label doesn't work, instead when i check the input works.

<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>

setting prettyCheckable for inputs :

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

And this is my jqGrid settings:

$(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
    )      
});

Why this doesn't work?

ps. i have edited the prettyCheckable.js and removed the <a> therefore is not generated. And i renamed the css from .prettycheckbox a {} to .prettycheckbox label {}.

解决方案

The plugin prettyCheckable uses code like

input.prop('checked', true).change();

to forward the changes of the state to the checkbox. On the other side jqGrid contains click event handle only (see the line).

What you can do is triggering of click event in case of change event.

For example, let us you have grid with id="list". Then the id of the checkbox to select all items will be cb_list ("cb_" appended with the grid id). So you use probably the code like

$("#cb_list").prettyCheckable();

I suggest that you change the code to the following

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

It should fix your problem.

这篇关于prettyCheckable on jqGrid不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！