Ver Fonte

[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 há 10 anos atrás
pai
commit
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());