Permalink
Browse files

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

…yling
1 parent 24b9c1c commit 303ca261e1c4262bdd53ca1c4bdbf12afb8c355b @tabalinas committed Jul 1, 2016
Showing with 43 additions and 28 deletions.
  1. +6 −6 css/jsgrid.css
  2. +27 −20 css/theme.css
  3. +5 −2 src/jsgrid.core.js
  4. +5 −0 tests/jsgrid.tests.js
View
@@ -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;
}
View
@@ -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;
}
View
@@ -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) : "");
},
@@ -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");

0 comments on commit 303ca26

Please sign in to comment.