Question

在jqgrid分组概念中，我试图在每个分组行下复制网格的主标题。目的是如果我们有一个冗长的表，为了知道列名是什么，我们必须向上滚动到表的顶部。此外，对列进行排序也是如此。这似乎很乏味。

你可以看到我在这里尝试的是什么[https://jsfiddle.net/8L6xmwcc/2/]。我用事件处理程序克隆了主标题，并将其插入网格中的每个分组项目下。

问题是当我使用这个新创建的标题对列进行排序时，会发生排序，但这个新标题会从表中消失。是否可以保留它并始终从这个新创建的标题中进行排序？

此外，如果单击新创建的标题中的多选复选框，则会选择表下的所有行。但是我想丢弃那个事件我该怎么办呢？请帮帮我。

loadComplete:function(){

   var grouped_header = $(".fa-plus-square-o").parents("tr[id^='grid1ghead']");

   $(".fa-plus-square-o").click(function(){
      if(!grouped_header.next().hasClass("ui-jqgrid-labels"))
      {
         var cloned_header = $(".ui-jqgrid-labels").clone(true);      
         cloned_header.insertAfter(grouped_header)          ;
      }
   });
},

Answer 1

在您的情况下，问题是每次单击排序标题时，表的内容将重新加载，并再次调用loadComplete。这会再次呈现该表并有效地删除您的自定义标题。

您需要做的是（除了重新初始化您已经执行过的点击处理程序之外）是将标题重新附加到之前单击的部分。此外，在克隆时，请确保仅添加：第一个选择器，或者将多个实例复制到克隆中。

这可以通过loadComplete部分中的以下代码来实现：

    loadComplete:function(){
        console.log("loaded ....");
        /// add header to sections that are open
        $("tr[id^='grid1ghead']").each(function(){
          if($(this).next().css("display")!="none" && !$(this).next().hasClass("ui-jqgrid-labels")){
             var cloned_header = $(".ui-jqgrid-labels:first").clone(true);      
             $(this).after(cloned_header)    
          }
        })

        $(".fa-plus-square-o").click(function(){
          console.log("clicked it.");
          var grouped_header = $(this).parents("tr[id^='grid1ghead']");
          if(!grouped_header.next().hasClass("ui-jqgrid-labels"))
          {
             var cloned_header = $(".ui-jqgrid-labels:first").clone(true);      
             cloned_header.insertAfter(grouped_header)          ;
          }
        });

    },

供参考，您的更新小提琴 - https://jsfiddle.net/8L6xmwcc/4/

如何在jqgrid中插入自定义行以及如何在排序列中保留它们？

1 个答案: