Skip to content

Commit 84b65f6

Browse files
rdworthrdworth
committed
Moved resize refresh code to grid refresh. Adjusted some borders, worked on some column alignment (still not perfect, depends on head and body borders matchin), fixed alignment of resize handles.
1 parent 249ebfc commit 84b65f6

File tree

3 files changed

+76
-23
lines changed

3 files changed

+76
-23
lines changed

‎grid-markup/grid.css

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,54 @@ Functional
2222
/*
2323
Presentational
2424
*/
25+
.ui-grid .ui-grid-head {
26+
border-left-width: 0;
27+
border-right-width: 0;
28+
border-bottom-width: 0;
29+
}
30+
.ui-grid .ui-grid-head tr {
31+
border-left-width: 0;
32+
border-right-width: 0;
33+
}
34+
.ui-grid .ui-grid-head td {
35+
border-left-width: 0;
36+
}
37+
.ui-grid .ui-grid-body {
38+
border-top-width: 0;
39+
border-bottom-width: 0;
40+
}
2541
.ui-grid .ui-grid-body tr {
2642
height: 2em;
43+
border-left-width: 0;
44+
border-right-width: 0;
45+
}
46+
.ui-grid .ui-grid-body td {
47+
border-left-width: 0;
2748
}
2849
.ui-grid th, .ui-grid td {
2950
padding: 0.2em 0.4em;
3051
}
52+
.ui-grid .ui-grid-foot {
53+
border-top-width: 0;
54+
}
55+
3156
.ui-grid tr.ui-state-default,
3257
.ui-grid td.ui-state-default {
3358
background: none;
3459
}
60+
61+
.ui-grid-resizable .ui-resizable-se {
62+
width: 17px;
63+
height: 17px;
64+
bottom: -5px;
65+
right: -2px;
66+
}
67+
.ui-grid-resizable .ui-resizable-s {
68+
width: auto;
69+
bottom: -7px;
70+
right: 16px;
71+
}
72+
.ui-grid-resizable .ui-resizable-e {
73+
height: auto;
74+
bottom: 10px;
75+
}

‎grid-markup/grid.html

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,25 +17,23 @@
1717
<script src="grid.js"></script>
1818
<script>
1919
$(function() {
20-
$.fn.themeswitcher && $('<div/>').css({
20+
$.fn.themeswitcher && $( "<div></div>" ).css({
2121
position: "absolute",
2222
right: 10,
2323
top: 10
24-
}).appendTo(document.body).themeswitcher();
24+
}).appendTo( document.body ).themeswitcher();
2525

2626
$( "#dataTable1" ).grid();
27-
$( "#dataTable2" ).grid().grid("widget").resizable({
28-
resize: function() {
29-
$(this).find(".ui-grid-body-table").grid("refresh");
30-
}
31-
}).height(300).find(".ui-grid-foot").height(20);
32-
$( "#dataTable2" ).grid( "refresh" );
27+
$( "#dataTable2" ).grid()
28+
.grid("widget").height(300).resizable()
29+
$( "#dataTable2" ).grid("refresh");
30+
$( "#dataTable2" ).grid("refresh");
3331
});
3432
</script>
3533
</head>
3634
<body>
3735

38-
<div style="width: 450px;">
36+
<div style="width: 45em;">
3937
<table id="dataTable1">
4038
<thead>
4139
<tr>

‎grid-markup/grid.js

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ $.widget( "ui.grid", {
77
options: {},
88
_create: function() {
99

10-
var totalWidth = 0,
11-
colWidths = this.element.find("td:eq(0)").parent("tr").children().map(function() {
10+
var _this = this,
11+
totalWidth = 0,
12+
colWidths = this.element.find( "td:eq(0)" ).parent( "tr" ).children().map(function() {
1213
var width = $(this).outerWidth();
1314
totalWidth += width
1415
return width;
@@ -36,45 +37,49 @@ $.widget( "ui.grid", {
3637
.appendTo( uiGridBody );
3738

3839
// Move table CAPTION to grid head
39-
uiGridBodyTable.find("caption")
40+
uiGridBodyTable.find( "caption" )
4041
.prependTo( uiGridHeadTable );
4142

4243
// Create COLGROUP and COLs if missing
4344
if ( !uiGridBodyTable.find("colgroup").length ) {
4445
// TODO: Consider adding support for existing COL elements not inside COLGROUP
4546
// TODO: ... in the meantime, remove any that might exist
46-
uiGridBodyTable.find("col").remove();
47-
var colgroup = $("<colgroup></colgroup>").insertBefore( uiGridBodyTable.find("thead") );
48-
uiGridBodyTable.find("tr:eq(0)").children().each(function(i) {
49-
colgroup.append("<col>");
47+
uiGridBodyTable.find( "col" ).remove();
48+
var colgroup = $( "<colgroup></colgroup>" ).insertBefore( uiGridBodyTable.find("thead") );
49+
uiGridBodyTable.find( "tr:eq(0)" ).children().each(function(i) {
50+
colgroup.append( "<col>" );
5051
});
5152
}
5253

5354
// Auto-size columns based on relative widths of pre-grid table column widths
54-
uiGridBody.find("colgroup").children().each(function(i) {
55-
$(this).css("width", ( colWidths[i] / totalWidth * 100 ) + '%' );
55+
uiGridBody.find( "colgroup" ).children().each(function(i) {
56+
$(this).css( "width", ( colWidths[i] / totalWidth * 100 ) + '%' );
5657
});
5758

5859
// Copy table COLGROUP to grid head
59-
uiGridBodyTable.find("colgroup")
60+
uiGridBodyTable.find( "colgroup" )
6061
.clone()
6162
.appendTo( uiGridHeadTable );
6263

6364
// Move table THEAD to grid head for fixed column headers
64-
uiGridBodyTable.find("thead")
65+
uiGridBodyTable.find( "thead" )
6566
.appendTo( uiGridHeadTable );
6667

6768
// Give head rows a clickable state
68-
uiGridHeadTable.find("tr").addClass("ui-state-default");
69+
uiGridHeadTable.find( "tr" ).addClass( "ui-state-default" );
6970

7071
// Give head cells a clickable state
7172
this._hoverable( uiGridHeadTable.find("th").addClass("ui-state-default") );
7273

7374
// Give body rows a clickable state
74-
uiGridBodyTable.find("tr").addClass("ui-state-default");
75+
uiGridBodyTable.find( "tr" ).addClass( "ui-state-default" );
7576

7677
// Give body cells a clickable state
77-
uiGridBodyTable.find("td").addClass("ui-state-default");
78+
uiGridBodyTable.find( "td" ).addClass( "ui-state-default" );
79+
80+
uiGrid.bind( "resize", function() {
81+
_this.refresh();
82+
});
7883

7984
this.refresh();
8085

@@ -89,6 +94,15 @@ $.widget( "ui.grid", {
8994
headHeight = this.uiGridHead.height(),
9095
footHeight = this.uiGridFoot.height();
9196

97+
if ( this.uiGrid.is(":ui-resizable") ) {
98+
this.uiGrid.addClass( "ui-grid-resizable" );
99+
if ( footHeight < 16) {
100+
footHeight = this.uiGridFoot.height( 16 );
101+
}
102+
} else {
103+
this.uiGrid.removeClass( "ui-grid-resizable" );
104+
}
105+
92106
// Adjust body height to fill
93107
this.uiGridBody.height( gridHeight - headHeight - footHeight );
94108

0 commit comments

Comments
 (0)