jqgrid - 用于组标题的复选框以多选组项目 [英] jqgrid - checkbox for Group header to multiselect group items

问题描述

目前我正在使用jqgrid绑定数据。我有两个问题：
1）当Multiselect为true时，我们在标题行中有一个复选框，它可以选择所有行，不管分组如何。

我是什么试图实现的是在组头的级别上有一个复选框。因此，每个组都会有一个多选复选框，当选中该复选框时，只会检查该特定组中的所有行，而将其余组保留原样。

如果组标题中的复选框选项不可用，我们可以将组标题设置为可点击，以便我们可以检查该组中的所有行？
我在点击这里，但他们不使用jqgrid。

我的下一个问题是can我们在jqgrid的列中嵌入.gif，.jpg图像作为数据的一部分？

由于我是新用户，所以我很抱歉无法添加快照。

谢谢

解决方案

Demo是 JSFIDDLE DEMO

由于@ david建议，通过组头的groupText属性添加复选框HTML。如果父级jqgrid表的 id 为点击/更改 事件写入处理程序。

> grid ，组标题行 tr 与 class =gridghead_0嵌套组头 class 将遵循 gridghead_1至gridghead_n 。

  $（table tbody）。on （change，input [type = checkbox]，function（e）{
 var currentCB = $（this）; 
 var grid = jQuery（'＃grid'）; 
 var isChecked = this.checked; 
 if（currentCB.is（。groupHeader））{//如果选中了组头，检查所有子复选框
 var checkboxes = currentCB.closest（'tr '）.nextUntil（'tr.gridghead_0'）。find（'.cbox [type =checkbox]'）; 
 checkboxes.each（function（）{
 if（！this.checked | |！isChecked）
 grid.setSelection（$（this）.closest（'tr'）。attr（'id'），true）; 
}）; 
} else {//当子复选框被选中时
 var allCbs = currentCB.closest（'tr'）。prevAll（tr.gridghead_0：first）。nextUntil（'tr.gridghead_0'）。 。andSelf（）找到（ '[类型= 复选框]'）; 
 var allSlaves = allCbs.filter（'。cbox'）; 
 var headerCB = allCbs.filter（。groupHeader）; 
 var allChecked =！isChecked？ false：allSlaves.filter（：checked）。length === allSlaves.length; 
 headerCB.prop（checked，allChecked）; 
} 
}）; 
  




1. 'multiselect'和'grouping'的设置/选项
   
   

     ... 
    multiselect：true，
   分组：true，
    groupingView：{
    groupField：[ 'name']，
    groupText：['< input type =checkboxclass =groupHeader/> < b取代; {0}< / b>']，
    groupColumnShow：[false]，
   }，
    ... 
      select-all 时，检查组标题复选框


$ b

onSelectAll：function（rowIds，allChecked）{
$（input.groupHeader）。attr（'checked'，allChecked）;
}，

Currently I am using jqgrid to bind data. I have 2 questions: 1) When Multiselect is true, we have a checkbox in the header row which selects all rows irrespective of grouping.

What i am trying to achieve is to have a checkbox at the level of the group header. So each group will have a multiselect checkbox which when checked only checks all the rows in that particular group leaving the remaining groups as it is.

If the checkbox option at the group header is not possible can we have the group header clickable so that we can check all the rows in that group? I found a similar question asked at click here but they are not using jqgrid.

2) My next question is can we embed .gif,.jpg images as part of the data in the columns in jqgrid?

As I am a new user I'm sorry I wasnt able to add snapshots.

Thanks

解决方案

Demo is JSFIDDLE DEMO

As @david suggested, added the checkbox HTML via the groupText property for group header. And write handler for checkbox click/change event.

If parent jqgrid table's id is grid, group header row tr is with class ="gridghead_0", and the nested group headers' class will follow gridghead_1 to gridghead_n.

1. checkbox click/change handler (JS DOM Ready function)

   $("table tbody").on("change", "input[type=checkbox]", function (e) {        
       var currentCB = $(this);
       var grid = jQuery('#grid');
       var isChecked = this.checked;
       if (currentCB.is(".groupHeader")) { //if group header is checked, to check all child checkboxes                     
           var checkboxes = currentCB.closest('tr').nextUntil('tr.gridghead_0').find('.cbox[type="checkbox"]');
           checkboxes.each(function(){
               if (!this.checked || !isChecked)                   
                   grid.setSelection($(this).closest('tr').attr('id'), true); 
           });
       } else {  //when child checkbox is checked
           var allCbs = currentCB.closest('tr').prevAll("tr.gridghead_0:first").nextUntil('tr.gridghead_0').andSelf().find('[type="checkbox"]');
           var allSlaves = allCbs.filter('.cbox');
           var headerCB = allCbs.filter(".groupHeader");
           var allChecked = !isChecked ? false : allSlaves.filter(":checked").length === allSlaves.length;
           headerCB.prop("checked", allChecked);
       }
   }); 
   

2. settings/options for 'multiselect' and 'grouping'

   ...
   multiselect: true,
   grouping:true,
   groupingView : {
       groupField : ['name'],
       groupText : ['<input type="checkbox" class="groupHeader"/> <b>  {0}  </b>'],
       groupColumnShow : [false],
   },
   ...
   

3. when select-all is checked, to check group header checkbox

   onSelectAll: function(rowIds, allChecked) {
       $("input.groupHeader").attr('checked', allChecked);
   },
   

这篇关于jqgrid - 用于组标题的复选框以多选组项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！