Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Initial commit.

  • Loading branch information...
commit efed1594f89b9f574184c8cfa73fbace294c9c56 0 parents
@antscode antscode authored
0  COMMITMESSAGE
No changes.
85 assets/datatablegrouper.css
@@ -0,0 +1,85 @@
+/* The group cell */
+.yui-skin-sam .yui-dt .group
+{
+ border-top: 1px solid #CBCBCB;
+ border-bottom: 1px solid #7f7f7f;
+ font-weight: bold;
+ background-image: url(http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/sprite.png);
+ background-position: 0px -1300px;
+ position: absolute;
+ margin-top: -24px; /* Makes the group appear above the first row. Set to the height of the group. */
+ color: black;
+ cursor: default;
+}
+
+/* Group inner style */
+.yui-skin-sam .yui-dt .group .liner
+{
+ padding: 4px 10px;
+ border-right: 1px solid #CBCBCB;
+}
+
+/* Selected group */
+.yui-skin-sam .yui-dt .group-selected
+{
+ background-image: none;
+ background-color: #426FD9;
+ color: White;
+}
+
+/* Make the group headers scroll with the other rows */
+.yui-dt-scrollable .yui-dt-bd {
+ //position:relative;
+}
+
+/* The first group in the data table */
+.yui-skin-sam .yui-dt .group-first
+{
+ border-top: 1px solid #7f7f7f;
+}
+
+/* The first row in the group */
+.yui-skin-sam .yui-dt .group-first-row td
+{
+ padding-top: 24px; /* Room for the header to appear above the first row. Set to the height of the group. */
+}
+
+/* The group when collapsed */
+.yui-skin-sam .yui-dt .group-collapsed
+{
+ margin-top: 0px; /* Makes the group cover up the first row in the group. */
+}
+
+/* The first rown in the group when collapsed */
+.yui-skin-sam .yui-dt .group-first-row-collapsed td
+{
+ padding-top: 0px; /* Makes the group cover up the first row in the group. */
+}
+
+/* Base styles for the group icon */
+.yui-skin-sam .yui-dt .group .icon
+{
+ width: 18px;
+ height: 15px;
+ position: absolute;
+}
+
+/* The label within the group */
+.yui-skin-sam .yui-dt .group .label
+{
+ margin-left: 25px;
+}
+
+/* The group icon when expanded */
+.yui-skin-sam .yui-dt .group-expanded .icon
+{
+ background-image: url(dt-group-arrow-down.png);
+ background-repeat: no-repeat;
+}
+
+/* The group icon when collapsed */
+.yui-skin-sam .yui-dt .group-collapsed .icon
+{
+ background-image: url(dt-group-arrow-up.png);
+ background-repeat: no-repeat;
+}
BIN  assets/dt-group-arrow-down.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  assets/dt-group-arrow-up.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 data.js
@@ -0,0 +1,22 @@
+data = {
+ addresses: [
+ { name:"John A. Smith", address:"1236 Some Street", city:"Melbourne", state:"Victoria", amount:5, active:"yes", colors:["red"], last_login:"4/19/2007"},
+ { name: "John D. Smith", address: "1623 Some Street", city: "Melbourne", state: "Victoria", amount: 5, active: "yes", colors: ["red"], last_login: "4/19/2007" },
+ { name: "Bob C. Uncle", address: "9996 Random Road", city: "Melbourne", state: "Victoria", amount: 0, active: "maybe", colors: ["green"], last_login: "1/23/2004" },
+ { name: "Bob F. Uncle", address: "9899 Random Road", city: "Melbourne", state: "Victoria", amount: 0, active: "maybe", colors: ["green"], last_login: "1/23/2004" },
+ { name: "John G. Smith", address: "1723 Some Street", city: "Melbourne", state: "Victoria", amount: 5, active: "yes", colors: ["red"], last_login: "4/19/2007" },
+ { name: "Bob I. Uncle", address: "9909 Random Road", city: "Sydney", state: "New South Wales", amount: 0, active: "maybe", colors: ["green"], last_login: "1/23/2004" },
+ { name: "John J. Smith", address: "1623 Some Street", city: "Sydney", state: "New South Wales", amount: 5, active: "yes", colors: ["red"], last_login: "4/19/2007" },
+ { name: "Bob L. Uncle", address: "9989 Random Road", city: "Sydney", state: "New South Wales", amount: 0, active: "maybe", colors: ["green"], last_login: "1/23/2004" },
+ { name: "John M. Smith", address: "1293 Some Street", city: "Perth", state: "Western Australia", amount: 5, active: "yes", colors: ["red"], last_login: "4/19/2007" },
+ { name: "Bob O. Uncle", address: "9959 Random Road", city: "Perth", state: "Western Australia", amount: 0, active: "maybe", colors: ["green"], last_login: "1/23/2004" },
+ { name: "John P. Smith", address: "6123 Some Street", city: "Brisbane", state: "Queensland", amount: 5, active: "yes", colors: ["red"], last_login: "4/19/2007" },
+ { name: "Bob R. Uncle", address: "9989 Random Road", city: "Brisbane", state: "Queensland", amount: 0, active: "maybe", colors: ["green"], last_login: "1/23/2004" },
+ { name: "Joan B. Jones", address: "3271 Another Ave", city: "Brisbane", state: "Queensland", amount: 3, active: "no", colors: ["red", "blue"], last_login: "2/15/2006" },
+ { name: "Joan E. Jones", address: "3217 Another Ave", city: "Brisbane", state: "Queensland", amount: 3, active: "no", colors: ["red", "blue"], last_login: "2/15/2006" },
+ {name:"Joan H. Jones", address:"3241 Another Ave", city:"Darwin", state:"Nortern Territory", amount:3, active:"no", colors:["red","blue"], last_login:"2/15/2006"},
+ { name: "Joan K. Jones", address: "3721 Another Ave", city: "Darwin", state: "Nortern Territory", amount: 3, active: "no", colors: ["red", "blue"], last_login: "2/15/2006" },
+ {name:"Joan N. Jones", address:"3621 Another Ave", city:"Hobart", state:"Tasmania", amount:3, active:"no", colors:["red","blue"], last_login:"2/15/2006"},
+ { name: "Joan Q. Jones", address: "3281 Another Ave", city: "Hobart", state: "Tasmania", amount: 3, active: "no", colors: ["red", "blue"], last_login: "2/15/2006" }
+ ]
+};
309 datatablegrouper.js
@@ -0,0 +1,309 @@
+/**
+* Adds grouping functionality to a YUI DataTable.
+* http://datatablegrouper.codeplex.com
+*
+* Copyright (c) 2009 Anthony Super
+* http://antscode.blogspot.com
+*
+* @class DataTableGrouper
+* @contructor
+* @param groupBy {string} The data field to group by.
+*/
+var DataTableGrouper = function(groupBy) {
+ var dom = YAHOO.util.Dom,
+ event = YAHOO.util.Event;
+
+ /**
+ * A reference to the current class instance.
+ * @property _this
+ * @type {Object}
+ * @private
+ */
+ var _this = this;
+
+ /**
+ * The YUI data table associated with this object.
+ * @property dataTable
+ * @type {Object}
+ * @private
+ */
+ this.dataTable = null;
+
+ /**
+ * The current group name. Used to determine when a new group starts when rowFormatter is called.
+ * @property currentGroupName
+ * @type {String}
+ * @private
+ */
+ this.currentGroupName = null;
+
+ /**
+ * The groups found in the current data set.
+ * @property groups
+ * @type {Array}
+ * @private
+ */
+ this.groups = [];
+
+ /**
+ * A flag to reset the group array. Set each time a new data set is passed.
+ * @property resetGroups
+ * @type {Boolean}
+ * @private
+ */
+ this.resetGroups = true;
+
+ /**
+ * Event handler for group click.
+ * @property groupClickEvent
+ * @type {Event}
+ */
+ this.onGroupClick = new YAHOO.util.CustomEvent("onGroupClick", this);
+
+ /**
+ * The currently selected group
+ * @property groupClickEvent
+ * @type {Event}
+ */
+ this.selectedGroup = null;
+
+ /**
+ * Initialises the grouper.
+ * @method init
+ * @param parent {Object} The YUI DataTable to apply the grouping to.
+ */
+ this.init = function(dataTable) {
+ this.dataTable = dataTable;
+
+ // Initialise the groups
+ this.initGroups(); /* Not required but prevents flickering */
+
+ // Re-initialise the groups when data is changed
+ dataTable.subscribe("sortedByChange", function() { _this.initGroups() }); /* Not required but prevents flickering */
+ dataTable.subscribe("renderEvent", function() { _this.initGroups() });
+
+ // Update group widths when columns are resized
+ dataTable.subscribe("columnSetWidthEvent", function() { _this.resizeGroups() });
+
+ // Unselect any group when a row is clicked
+ dataTable.subscribe("rowClickEvent", function() { _this.unselectGroup() });
+ }
+
+ /**
+ * A YUI DataTable custom row formatter. The row formatter must be applied to the DataTable
+ * via the formatRow configuration property.
+ * @method rowFormatter
+ * @param tr {Object} To row to be formatted.
+ * @param record {Object} To current data record.
+ */
+ this.rowFormatter = function(tr, record) {
+ if (this.resetGroups) {
+ this.groups = [];
+ this.currentGroupName = null;
+ this.resetGroups = false;
+ }
+
+ var groupName = record.getData(groupBy);
+
+ if (groupName != this.currentGroupName) {
+ this.groups.push({ name: groupName, row: tr, group: null });
+ dom.addClass(tr, "group-first-row");
+ }
+
+ this.currentGroupName = groupName;
+ return true;
+ };
+
+ /**
+ * Initialises the groups for the current data set.
+ * @method initGroups
+ * @private
+ */
+ this.initGroups = function() {
+ if (!this.resetGroups) {
+ // Insert each group in the array
+ for (var i = 0; i < this.groups.length; i++) {
+ this.groups[i].group = this.insertGroup(this.groups[i].name, this.groups[i].row);
+ }
+
+ this.resetGroups = true;
+ }
+ }
+
+ /**
+ * Updates the width of all groups to match the data table.
+ * @method resizeGroups
+ * @private
+ */
+ this.resizeGroups = function() {
+ // Insert each group in the array
+ for (var i = 0; i < this.groups.length; i++) {
+ this.setGroupWidth(this.groups[i].group, this.groups[i].row);
+ }
+ }
+
+ /**
+ * Sets the width of a group to the parent row width.
+ * @method resizeGroups
+ * @param group {Object} To group to set width to.
+ * @param row {Object} To row to get width from.
+ * @private
+ */
+ this.setGroupWidth = function(group, row) {
+ group.style.width = dom.getRegion(row).width + "px";
+ }
+
+ /**
+ * Inserts a group before the specified row.
+ * @method insertGroup
+ * @param name {String} The name of the group.
+ * @param beforeRow {Object} To row to insert the group.
+ * @private
+ */
+ this.insertGroup = function(name, row) {
+ var group = document.createElement("div");
+ var icon = document.createElement("div");
+
+ // Row is expanded by default
+ group.className = "group group-expanded";
+
+ if (dom.hasClass(row, "yui-dt-first")) {
+ // If this is the first row in the table, transfer the class to the group
+ dom.removeClass(row, "yui-dt-first");
+ dom.addClass(group, "group-first");
+ }
+
+ // Add a liner as per standard YUI cells
+ var liner = document.createElement("div");
+ liner.className = "liner";
+
+ // Add icon
+ icon.className = "icon";
+ liner.appendChild(icon);
+
+ // Add label
+ var label = document.createElement("div");
+ label.innerHTML = name;
+ label.className = "label";
+ liner.appendChild(label);
+ group.appendChild(liner);
+
+ // Set the width of the group
+ this.setGroupWidth(group, row);
+
+ // Insert the group
+ var cell = row.cells[0];
+ dom.insertBefore(group, cell.childNodes[0]);
+
+ // Attach visibility toggle to icon click
+ event.addListener(icon, "click", function(e) { _this.toggleVisibility(e) });
+
+ // Attach group click event handler
+ event.addListener(group, "click", function(e) { _this.handleGroupClick(e) });
+
+ return group;
+ }
+
+ /**
+ * Handles the group click event.
+ * @method handleGroupClick
+ * @param e {Event} The event fired from clicking the group.
+ * @private
+ */
+ this.handleGroupClick = function(e) {
+ var group = dom.getAncestorByClassName(event.getTarget(e), "group");
+
+ // Fire the onGroupClick event
+ this.onGroupClick.fire(group);
+
+ // Stop the event to prevent the row from being selected
+ event.stopEvent(e);
+ return false;
+ }
+
+ /**
+ * Handles the group select event.
+ * @method onEventSelectGroup
+ * @param type {String} The type of event fired.
+ * @param e {Object} The selected group.
+ * @private
+ */
+ this.onEventSelectGroup = function(type, group) {
+ this.selectGroup(group);
+ }
+
+ /**
+ * Selects a group.
+ * @method selectGroup
+ */
+ this.selectGroup = function(group) {
+ // Unselect any previous group
+ this.unselectGroup();
+
+ // Select the new group
+ dom.addClass(group, "group-selected");
+ this.selectedGroup = group;
+
+ // Unselect all rows in the data table
+ var selectedRows = this.dataTable.getSelectedTrEls();
+
+ for (var i = 0; i < selectedRows.length; i++) {
+ this.dataTable.unselectRow(selectedRows[i]);
+ }
+ }
+
+ /**
+ * Unselects any selected group.
+ * @method unselectGroup
+ */
+ this.unselectGroup = function() {
+ if (this.selectedGroup) {
+ dom.removeClass(this.selectedGroup, "group-selected");
+ }
+ }
+
+ /**
+ * Toggles the visibility of the group specified in the event.
+ * @method toggleVisibility
+ * @param e {Event} The event fired from clicking the group.
+ * @private
+ */
+ this.toggleVisibility = function(e) {
+ var group = dom.getAncestorByClassName(event.getTarget(e), "group");
+ var row = dom.getAncestorByTagName(group, "tr");
+ var visibleState;
+
+ // Change the class of the group
+ if (dom.hasClass(group, "group-expanded")) {
+ visibleState = false;
+ dom.replaceClass(group, "group-expanded", "group-collapsed");
+ }
+ else {
+ visibleState = true;
+ dom.replaceClass(group, "group-collapsed", "group-expanded");
+ }
+
+ // Change the class of the first row
+ if (!visibleState) {
+ dom.replaceClass(row, "group-first-row", "group-first-row-collapsed");
+ }
+ else {
+ dom.replaceClass(row, "group-first-row-collapsed", "group-first-row");
+ }
+
+ // Hide all subsequent rows in the group
+ row = dom.getNextSibling(row);
+
+ while (row && !dom.hasClass(row, "group-first-row") &&
+ !dom.hasClass(row, "group-first-row-collapsed")) {
+ if (visibleState) {
+ row.style.display = "table-row";
+ }
+ else {
+ row.style.display = "none";
+ }
+
+ row = dom.getNextSibling(row);
+ }
+ }
+}
58 example.htm
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>YUI Data Table Grouper Example</title>
+ <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
+ <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css" />
+ <link rel="stylesheet" type="text/css" href="assets/datatablegrouper.css" />
+ <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
+ <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script>
+ <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
+ <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"></script>
+ <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable.js"></script>
+ <script type="text/javascript" src="data.js"></script>
+ <script type="text/javascript" src="datatablegrouper.js"></script>
+</head>
+<body class="yui-skin-sam">
+<div id="dtContainer"></div>
+<script type="text/javascript">
+
+ // Define the columns for the data table
+ // Note that you should not include the column you want to group by
+ var myColumnDefs = [
+ { key: "city", label: "City", sortable: true, resizeable: true, width: 200 },
+ { key: "name", label: "Name", sortable: true, resizeable: true, width: 150 }
+ ];
+
+ // Initialise the data source
+ // Ensure that you also include the field to group by in the responseSchema
+ var myDataSource = new YAHOO.util.DataSource(data.addresses); // See data.js
+ myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
+ myDataSource.responseSchema = {
+ fields: ["state", "city", "name"]
+ };
+
+ // Create a DataTableGrouper, passing the name of the field to group by
+ var myGrouper = new DataTableGrouper("state");
+
+ // Create a YUI DataTable based on the supplied columns & data source
+ var myDataTable = new YAHOO.widget.DataTable("dtContainer",
+ myColumnDefs, myDataSource,
+ {
+ // The following row formatter must be specified in order for the grouping
+ // to occur.
+ formatRow: function(el, record) { return myGrouper.rowFormatter(el, record) }
+ });
+
+ // Demonstrate row selection
+ myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);
+
+ // Demonstrate group selection
+ myGrouper.onGroupClick.subscribe(myGrouper.onEventSelectGroup);
+
+ // Initialise the DataTableGrouper
+ myGrouper.init(myDataTable);
+
+</script>
+</body>
+</html>
61 modified_example.htm
@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>YUI Data Table Grouper Example</title>
+ <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
+ <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css" />
+ <link rel="stylesheet" type="text/css" href="assets/datatablegrouper.css" />
+ <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
+ <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script>
+ <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
+ <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"></script>
+ <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable.js"></script>
+ <script type="text/javascript" src="data.js"></script>
+ <script type="text/javascript" src="datatablegrouper.js"></script>
+</head>
+<body class="yui-skin-sam">
+<div id="dtContainer"></div>
+<script type="text/javascript">
+
+ // Define the columns for the data table
+ // Note that you should not include the column you want to group by
+ var myColumnDefs = [
+ { key: "city", label: "City", sortable: true, resizeable: true, width: 200, editor:new YAHOO.widget.TextboxCellEditor({disableBtns:false})},
+ { key: "name", label: "Name", sortable: true, resizeable: true, width: 150 }
+ ];
+
+ // Initialise the data source
+ // Ensure that you also include the field to group by in the responseSchema
+ var myDataSource = new YAHOO.util.DataSource(data.addresses); // See data.js
+ myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
+ myDataSource.responseSchema = {
+ fields: ["state", "city", "name"]
+ };
+
+ // Create a DataTableGrouper, passing the name of the field to group by
+ var myGrouper = new DataTableGrouper("state");
+
+ // Create a YUI DataTable based on the supplied columns & data source
+ var myDataTable = new YAHOO.widget.DataTable("dtContainer",
+ myColumnDefs, myDataSource,
+ {
+ // The following row formatter must be specified in order for the grouping
+ // to occur.
+ formatRow: function(el, record) { return myGrouper.rowFormatter(el, record) }
+ });
+
+ // cell editing
+ myDataTable.subscribe("cellClickEvent", myDataTable.onEventShowCellEditor);
+
+ // Demonstrate row selection
+ myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);
+
+ // Demonstrate group selection
+ myGrouper.onGroupClick.subscribe(myGrouper.onEventSelectGroup);
+
+ // Initialise the DataTableGrouper
+ myGrouper.init(myDataTable);
+
+</script>
+</body>
+</html>

0 comments on commit efed159

Please sign in to comment.
Something went wrong with that request. Please try again.