Kaynağa Gözat

[spark] Add absolute positioning to table header extender

This correctly positions the cloned header in the result tables when scrolling (absolute instead of fixed).
Johan Ahlen 10 yıl önce
ebeveyn
işleme
21932c9

+ 6 - 3
apps/spark/src/spark/templates/editor_components.mako

@@ -869,7 +869,8 @@ from django.utils.translation import ugettext as _
         $(el).jHueTableExtender({
           fixedHeader: true,
           includeNavigator: false,
-          parentId: snippet.id()
+          parentId: 'snippet_' + snippet.id(),
+          clonedContainerPosition: "absolute"
         });
       },
       "aoColumnDefs": [
@@ -895,7 +896,8 @@ from django.utils.translation import ugettext as _
     $(el).jHueTableExtender({
       fixedHeader: true,
       includeNavigator: false,
-      parentId: snippet.id()
+      parentId: 'snippet_' + snippet.id(),
+      clonedContainerPosition: "absolute"
     });
     $(".dataTables_filter").hide();
     var dataTableEl = $(el).parents(".dataTables_wrapper");
@@ -1187,7 +1189,8 @@ from django.utils.translation import ugettext as _
         _el.jHueTableExtender({
           fixedHeader: true,
           includeNavigator: false,
-          parentId: snippet.id()
+          parentId: 'snippet_' + snippet.id(),
+          clonedContainerPosition: "absolute"
         });
       });
     });

+ 8 - 2
desktop/core/src/desktop/static/desktop/js/jquery.tableextender.js

@@ -191,8 +191,14 @@
     var clonedTableContainer = $("<div>").width($(plugin.element).outerWidth());
     clonedTable.appendTo(clonedTableContainer);
 
-    var clonedTableVisibleContainer = $("<div>").attr("id", $(plugin.element).attr("id") + "jHueTableExtenderClonedContainer").addClass("jHueTableExtenderClonedContainer").width($(plugin.element).parent().width()).css("overflow-x", "hidden").css("top", ($(plugin.element).parent().offset().top - $(window).scrollTop()) + "px");
-    clonedTableVisibleContainer.css("position", "fixed");
+    var topPosition;
+    if (plugin.options.clonedContainerPosition == 'absolute') {
+      topPosition = $(plugin.element).parent().position().top - $(window).scrollTop();
+    } else {
+      topPosition = $(plugin.element).parent().offset().top - $(window).scrollTop();
+    }
+    var clonedTableVisibleContainer = $("<div>").attr("id", $(plugin.element).attr("id") + "jHueTableExtenderClonedContainer").addClass("jHueTableExtenderClonedContainer").width($(plugin.element).parent().width()).css("overflow-x", "hidden").css("top", topPosition + "px");
+    clonedTableVisibleContainer.css("position", plugin.options.clonedContainerPosition || "fixed");
 
     clonedTableContainer.appendTo(clonedTableVisibleContainer);
     clonedTableVisibleContainer.prependTo($(plugin.element).parent());