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

Question

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

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

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

此外，如果我在新创建的 header 中单击多选复选框，它会选择 table 下的所有行。但是我想放弃那个事件我该怎么做呢？请帮我解决这个问题。

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

你的问题是每次点击排序 header 时，table 的内容会重新加载并再次调用 loadComplete。这将再次呈现 table 并有效地删除您的自定义 headers.

您需要做的（除了 re-initializing 您已经执行的点击处理程序之外）是 re-append header 之前点击打开的部分。此外，当您克隆时，请确保仅添加 :first 选择器，否则多个实例将被复制到您的克隆中。

这可以通过 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)          ;
          }
        });

    },

作为参考，您更新的 fiddle - https://jsfiddle.net/8L6xmwcc/4/

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

How to insert custom rows in jqgrid and how to retain them on sorting columns?

jquery

jqgrid

free-jqgrid