Преглед изворни кода

HUE-3795 [editor] Scroll lock a row to enable comparison with other rows

Enrico Berti пре 9 година
родитељ
комит
ceb9a55

+ 7 - 0
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -1009,6 +1009,13 @@ div.box {
   background-color: #DBE8F1!important;
 }
 
+.table tr.locked, .table tr.locked td {
+  background-color: #fcf8e3!important;
+}
+
+div.locked {
+  border-bottom: 1px solid #f0c36d;
+}
 
 .nounderline:hover {
   text-decoration: none;

+ 39 - 3
desktop/core/src/desktop/static/desktop/js/jquery.tableextender.js

@@ -24,6 +24,7 @@
     defaults = {
       fixedHeader: false,
       fixedFirstColumn: false,
+      lockSelectedRow: true,
       firstColumnTooltip: false,
       classToRemove: 'resultTable',
       hintElement: null,
@@ -168,6 +169,16 @@
       drawFirstColumn(_this);
     }
 
+    $(document).on('click', '.dataTables_wrapper > table tbody tr', function () {
+      $('.dataTables_wrapper > .jHueTableExtenderClonedContainerColumn table tbody tr.selected').removeClass('selected');
+      if ($(this).hasClass('selected')) {
+        $(this).removeClass('selected');
+      } else {
+        $('.dataTables_wrapper > table tbody tr.selected').removeClass('selected');
+        $(this).addClass('selected');
+        $('.dataTables_wrapper > .jHueTableExtenderClonedContainerColumn table tbody tr:eq('+($(this).index())+')').addClass('selected');
+      }
+    });
   };
 
   function s4() {
@@ -181,6 +192,28 @@
     return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
   }
 
+  function drawLockedRow(plugin, rowNo) {
+    var $pluginElement = $(plugin.element);
+    var $header = $("#" + $pluginElement.attr("id") + "jHueTableExtenderClonedContainer");
+    var $headerCounter = $("#" + $pluginElement.attr("id") + "jHueTableExtenderClonedContainerCell");
+    var $clone = $pluginElement.find('tbody tr:eq('+ rowNo +')').clone();
+    $clone.addClass('locked');
+    $header.addClass('locked');
+    $headerCounter.addClass('locked');
+    $clone.appendTo($header.find('tbody'));
+    var $newTr = $('<tr>');
+    $newTr.addClass('locked').html('<td class="pointer">' + (rowNo+1) + '</td>').appendTo($headerCounter.find('tbody'));
+    $newTr.find('td').on('click', function(){
+      var idx = $(this).parent().index();
+      $header.find('tbody tr:eq('+ idx +')').remove();
+      $(this).parent().remove();
+      if ($header.find('tbody tr').length == 0){
+        $header.removeClass('locked');
+        $headerCounter.removeClass('locked');
+      }
+    });
+  }
+
   function drawFirstColumn(plugin) {
     var $pluginElement = $(plugin.element);
     if (!$pluginElement.attr("id") && plugin.options.parentId) {
@@ -199,7 +232,7 @@
     $("#" + $pluginElement.attr("id") + "jHueTableExtenderClonedContainerCell").remove();
     var clonedCell = $(plugin.element).clone();
     clonedCell.css("margin-bottom", "0").css("table-layout", "fixed");
-    clonedCell.removeAttr("id").removeClass(plugin.options.classToRemove).find("tbody").remove();
+    clonedCell.removeAttr("id").removeClass(plugin.options.classToRemove).find("tbody").empty();
     clonedCell.find("thead>tr th:not(:eq(0))").remove();
     clonedCell.find("thead>tr th:eq(0)").width(originalTh.width()).css("background-color", "#FFFFFF");
     clonedCell.find("thead>tr th:eq(0)").click(function () {
@@ -208,7 +241,7 @@
       $(this).attr("class", originalTh.attr("class"));
     });
 
-    var clonedCellContainer = $("<div>").css("background-color", "#FFFFFF").width(originalTh.outerWidth()).height(originalTh.outerHeight());
+    var clonedCellContainer = $("<div>").css("background-color", "#FFFFFF").width(originalTh.outerWidth());
     clonedCell.appendTo(clonedCellContainer);
 
     var clonedCellVisibleContainer = $("<div>").attr("id", $(plugin.element).attr("id") + "jHueTableExtenderClonedContainerCell").addClass("jHueTableExtenderClonedContainerCell").width(originalTh.outerWidth()).css("overflow", "hidden").css("top", topPosition + "px");
@@ -223,6 +256,9 @@
     clonedTable.find("thead>tr th:not(:eq(0))").remove();
     clonedTable.find("tbody>tr").each(function () {
       $(this).find("td:not(:eq(0))").remove();
+      $(this).find('td').addClass('pointer').on('click', function(){
+        drawLockedRow(plugin, $(this).parent().index());
+      });
     });
     clonedTable.find("thead>tr th:eq(0)").width(originalTh.width()).css("background-color", "#FFFFFF");
 
@@ -296,7 +332,7 @@
     $("#" + $pluginElement.attr("id") + "jHueTableExtenderClonedContainer").remove();
     var clonedTable = $pluginElement.clone();
     clonedTable.css("margin-bottom", "0").css("table-layout", "fixed");
-    clonedTable.removeAttr("id").removeClass(plugin.options.classToRemove).find("tbody").remove();
+    clonedTable.removeAttr("id").removeClass(plugin.options.classToRemove).find("tbody").empty();
     $pluginElement.find("thead>tr th").each(function (i) {
       var originalTh = $(this);
       clonedTable.find("thead>tr th:eq(" + i + ")").width(originalTh.width()).css("background-color", "#FFFFFF").click(function () {

+ 0 - 11
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -3205,17 +3205,6 @@ ${ hueIcons.symbols() }
         }
       });
 
-      $(document).on('click', '.dataTables_wrapper > table tbody tr', function () {
-        $('.dataTables_wrapper > .jHueTableExtenderClonedContainerColumn table tbody tr.selected').removeClass('selected');
-        if ($(this).hasClass('selected')) {
-          $(this).removeClass('selected');
-        } else {
-          $('.dataTables_wrapper > table tbody tr.selected').removeClass('selected');
-          $(this).addClass('selected');
-          $('.dataTables_wrapper > .jHueTableExtenderClonedContainerColumn table tbody tr:eq('+($(this).index())+')').addClass('selected');
-        }
-      });
-
       function resizeToggleResultSettings (snippet) {
         var _dtElement;
         if (snippet.showGrid()) {