add option sortColNumberInSeparateSpan to allow different span for st…

…yling
6pac · Mar 8, 2018 · d2d122a · d2d122a
1 parent 7d7d2c1
commit d2d122a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git a/slick.grid.css b/slick.grid.css
@@ -68,7 +68,6 @@ classes should alter those!
   height: 5px;
   margin-left: 4px;
   margin-top: 0;
-  padding-left: 1px;
   line-height: 20px;
   float: left;
   font-family: Arial;

diff --git a/slick.grid.js b/slick.grid.js
@@ -94,6 +94,7 @@ if (typeof Slick === "undefined") {
       multiColumnSort: false,
       numberedMultiColumnSort: false,
       tristateMultiColumnSort: false,
+      sortColNumberInSeparateSpan: false,
       defaultFormatter: defaultFormatter,
       forceSyncScrolling: false,
       addNewRowCssClass: "new-row",
@@ -151,7 +152,6 @@ if (typeof Slick === "undefined") {
     var headerColumnWidthDiff = 0, headerColumnHeightDiff = 0, // border+padding
         cellWidthDiff = 0, cellHeightDiff = 0, jQueryNewWidthBehaviour = false;
     var absoluteColumnMinWidth;
-    var sortIndicatorCssClass = "slick-sort-indicator";
 
     var tabbingDirection = 1;
     var activePosX;
@@ -327,8 +327,6 @@ if (typeof Slick === "undefined") {
         }
       }
 
-      if (options.numberedMultiColumnSort) { sortIndicatorCssClass = "slick-sort-indicator-numbered"; }
-
       $focusSink2 = $focusSink.clone().appendTo($container);
 
       if (!options.explicitInitialization) {
@@ -748,7 +746,9 @@ if (typeof Slick === "undefined") {
 
         if (m.sortable) {
           header.addClass("slick-header-sortable");
-          header.append("<span class='" + sortIndicatorCssClass + "' />");
+          header.append("<span class='slick-sort-indicator" 
+            + (options.numberedMultiColumnSort && !options.sortColNumberInSeparateSpan ? " slick-sort-indicator-numbered" : "" ) + "' />");
+          if (options.numberedMultiColumnSort && options.sortColNumberInSeparateSpan) { header.append("<span class='slick-sort-indicator-numbered' />"); }
         }
 
         trigger(self.onHeaderCellRendered, {
@@ -1369,23 +1369,29 @@ if (typeof Slick === "undefined") {
       sortColumns = cols;
       var numberCols = options.numberedMultiColumnSort && sortColumns.length > 1;
       var headerColumnEls = $headers.children();
-      var sortIndicatorEl = headerColumnEls
-          .removeClass("slick-header-column-sorted")
-          .find("." + sortIndicatorCssClass)
-              .removeClass("slick-sort-indicator-asc slick-sort-indicator-desc");
-      sortIndicatorEl.text('');
+      headerColumnEls
+        .removeClass("slick-header-column-sorted")
+        .find(".slick-sort-indicator")
+          .removeClass("slick-sort-indicator-asc slick-sort-indicator-desc");
+      headerColumnEls
+        .find(".slick-sort-indicator-numbered")
+          .text('');
 
       $.each(sortColumns, function(i, col) {
         if (col.sortAsc == null) {
           col.sortAsc = true;
         }
         var columnIndex = getColumnIndex(col.columnId);
         if (columnIndex != null) {
-          sortIndicatorEl = headerColumnEls.eq(columnIndex)
-              .addClass("slick-header-column-sorted")
-              .find("." + sortIndicatorCssClass)
-                  .addClass(col.sortAsc ? "slick-sort-indicator-asc" : "slick-sort-indicator-desc");
-          if (numberCols) { sortIndicatorEl.text(i+1); }
+          headerColumnEls.eq(columnIndex)
+            .addClass("slick-header-column-sorted")
+              .find(".slick-sort-indicator")
+                .addClass(col.sortAsc ? "slick-sort-indicator-asc" : "slick-sort-indicator-desc");
+          if (numberCols) { 
+            headerColumnEls.eq(columnIndex)
+              .find(".slick-sort-indicator-numbered")
+                .text(i+1); 
+          }
         }
       });
     }