Core: Add .jsgrid-cell and .jsgrid-header-cell classes to simplify st…

…yling

css/jsgrid.css

@@ -38,12 +38,12 @@
     border-spacing: 0;
 }
 
-.jsgrid-table td {
+.jsgrid-cell {
     padding: 0.5em 0.5em;
 }
 
-.jsgrid-table td,
-.jsgrid-table th {
+.jsgrid-сell,
+.jsgrid-header-cell {
     box-sizing: border-box;
 }
 
@@ -65,7 +65,7 @@
     text-align: right;
 }
 
-.jsgrid-header-row > th {
+.jsgrid-header-cell {
     padding: .5em .5em;
 }
 
@@ -89,11 +89,11 @@
 }
 
 
-.jsgrid-selected-row td {
+.jsgrid-selected-row .jsgrid-cell {
     cursor: pointer;
 }
 
-.jsgrid-nodata-row td {
+.jsgrid-nodata-row .jsgrid-cell {
     padding: .5em 0;
     text-align: center;
 }

css/theme.css

@@ -1,25 +1,31 @@
 .jsgrid-grid-header,
 .jsgrid-grid-body,
-.jsgrid-header-row > th,
-.jsgrid-filter-row > td,
-.jsgrid-insert-row > td,
-.jsgrid-edit-row > td {
+.jsgrid-header-row > .jsgrid-header-cell,
+.jsgrid-filter-row > .jsgrid-cell,
+.jsgrid-insert-row > .jsgrid-cell,
+.jsgrid-edit-row > .jsgrid-cell {
     border: 1px solid #e9e9e9;
 }
 
-.jsgrid-header-row > th {
+.jsgrid-header-row > .jsgrid-header-cell {
     border-top: 0;
 }
 
-.jsgrid-header-row > th, .jsgrid-filter-row > td, .jsgrid-insert-row > td {
+.jsgrid-header-row > .jsgrid-header-cell,
+.jsgrid-filter-row > .jsgrid-cell,
+.jsgrid-insert-row > .jsgrid-cell {
     border-bottom: 0;
 }
 
-.jsgrid-header-row > th:first-child, .jsgrid-filter-row > td:first-child, .jsgrid-insert-row > td:first-child {
+.jsgrid-header-row > .jsgrid-header-cell:first-child,
+.jsgrid-filter-row > .jsgrid-cell:first-child,
+.jsgrid-insert-row > .jsgrid-cell:first-child {
     border-left: none;
 }
 
-.jsgrid-header-row > th:last-child, .jsgrid-filter-row > td:last-child, .jsgrid-insert-row > td:last-child {
+.jsgrid-header-row > .jsgrid-header-cell:last-child,
+.jsgrid-filter-row > .jsgrid-cell:last-child,
+.jsgrid-insert-row > .jsgrid-cell:last-child {
     border-right: none;
 }
 
@@ -82,52 +88,53 @@
     border-top: none;
 }
 
-.jsgrid-grid-body td {
+.jsgrid-cell {
     border: #f3f3f3 1px solid;
 }
 
-.jsgrid-grid-body tr:first-child td {
+.jsgrid-grid-body .jsgrid-row:first-child .jsgrid-cell,
+.jsgrid-grid-body .jsgrid-alt-row:first-child .jsgrid-cell {
     border-top: none;
 }
 
-.jsgrid-grid-body tr td:first-child {
+.jsgrid-grid-body .jsgrid-cell:first-child {
     border-left: none;
 }
 
-.jsgrid-grid-body tr td:last-child {
+.jsgrid-grid-body .jsgrid-cell:last-child {
     border-right: none;
 }
 
-.jsgrid-row > td {
+.jsgrid-row > .jsgrid-cell {
     background: #fff;
 }
 
-.jsgrid-alt-row > td {
+.jsgrid-alt-row > .jsgrid-cell {
     background: #fcfcfc;
 }
 
-.jsgrid-header-row > th {
+.jsgrid-header-row > .jsgrid-header-cell {
     background: #f9f9f9;
 }
 
-.jsgrid-filter-row > td {
+.jsgrid-filter-row > .jsgrid-cell {
     background: #fcfcfc;
 }
 
-.jsgrid-insert-row > td {
+.jsgrid-insert-row > .jsgrid-cell {
     background: #e3ffe5;
 }
 
-.jsgrid-edit-row > td {
+.jsgrid-edit-row > .jsgrid-cell {
     background: #fdffe3;
 }
 
-.jsgrid-selected-row > td {
+.jsgrid-selected-row > .jsgrid-cell {
     background: #c4e2ff;
     border-color: #c4e2ff;
 }
 
-.jsgrid-nodata-row td {
+.jsgrid-nodata-row > .jsgrid-cell {
     background: #fff;
 }
 

src/jsgrid.core.js

@@ -90,6 +90,7 @@
         heading: true,
         headerRowRenderer: null,
         headerRowClass: "jsgrid-header-row",
+        headerCellClass: "jsgrid-header-cell",
 
         filtering: false,
         filterRowRenderer: null,
@@ -110,6 +111,7 @@
         selectedRowClass: "jsgrid-selected-row",
         oddRowClass: "jsgrid-row",
         evenRowClass: "jsgrid-alt-row",
+        cellClass: "jsgrid-cell",
 
         sorting: false,
         sortableClass: "jsgrid-header-sortable",
@@ -455,7 +457,7 @@
             var $result = $("<tr>").addClass(this.headerRowClass);
 
             this._eachField(function(field, index) {
-                var $th = this._prepareCell("<th>", field, "headercss")
+                var $th = this._prepareCell("<th>", field, "headercss", this.headerCellClass)
                     .append(this.renderTemplate(field.headerTemplate, field))
                     .appendTo($result);
 
@@ -470,8 +472,9 @@
             return $result;
         },
 
-        _prepareCell: function(cell, field, cssprop) {
+        _prepareCell: function(cell, field, cssprop, cellClass) {
             return $(cell).css("width", field.width)
+                .addClass(cellClass || this.cellClass)
                 .addClass((cssprop && field[cssprop]) || field.css)
                 .addClass(field.align ? ("jsgrid-align-" + field.align) : "");
         },

tests/jsgrid.tests.js

@@ -555,6 +555,7 @@ $(function() {
 
         equal(grid._filterRow.find(".filter-class").length, 1, "filtercss class is attached");
         equal(grid._filterRow.find(".filter-input").length, 1, "filter control rendered");
+        equal(grid._filterRow.find("." + this.gridClass).length, 1, "cell class is attached");
         ok(grid._filterRow.find(".filter-class").hasClass("jsgrid-align-right"), "align class is attached");
         ok(grid.fields[0].filterControl.is("input[type=text]"), "filter control saved in field");
     });
@@ -924,12 +925,14 @@ $(function() {
         grid.option("data", this.testData);
 
         equal(grid._headerRow.text(), "title", "header rendered");
+        equal(grid._headerRow.find("." + grid.headerCellClass).length, 1, "header cell class is attached");
         equal(grid._headerRow.find(".header-class").length, 1, "headercss class is attached");
         ok(grid._headerRow.find(".header-class").hasClass("jsgrid-align-right"), "align class is attached");
 
         $secondRow = grid._content.find("." + grid.evenRowClass);
         equal($secondRow.text(), "test2", "item rendered");
         equal($secondRow.find(".cell-class").length, 1, "css class added to cell");
+        equal($secondRow.find("." + grid.cellClass).length, 1, "cell class is attached");
         ok($secondRow.find(".cell-class").hasClass("jsgrid-align-right"), "align class added to cell");
     });
 
@@ -1012,6 +1015,7 @@ $(function() {
 
         equal(grid._insertRow.find(".insert-class").length, 1, "insertcss class is attached");
         equal(grid._insertRow.find(".insert-input").length, 1, "insert control rendered");
+        equal(grid._insertRow.find("." + grid.cellClass).length, 1, "cell class is attached");
         ok(grid._insertRow.find(".insert-class").hasClass("jsgrid-align-right"), "align class is attached");
         ok(grid.fields[0].insertControl.is("input[type=text]"), "insert control saved in field");
     });
@@ -1158,6 +1162,7 @@ $(function() {
         equal($editRow.length, 1, "edit row rendered");
         equal($editRow.find(".edit-class").length, 1, "editcss class is attached");
         equal($editRow.find(".edit-input").length, 1, "edit control rendered");
+        equal($editRow.find("." + grid.cellClass).length, 1, "cell class is attached");
         ok($editRow.find(".edit-class").hasClass("jsgrid-align-right"), "align class is attached");
 
         ok(grid.fields[0].editControl.is("input[type=text]"), "edit control saved in field");