+ datagrid: {
+ /*
+ * The init function returns HTML markup for the datagrid per the options provided. Each consumer
+ * of the datagrid must first call init and then provide the datasource for the grid.
+ * id: this is the id of the table
+ * options: {
+ * searchable: true/false,
+ * pagination: turned off for now,
+ * flexibleRowsPerPage: turned off
+ * }
+ * classes : String containing bootstrap related classes. For ex: "table-striped table-condensed"
+ * The classes "table", "table-bordered" and "datagrid" will be added by default
+ */
+ init: function(id, options, classes) {
+ var $fuelGridContainerDiv = $(document.createElement("div"));
+ $fuelGridContainerDiv.addClass("fuelux");
+ $table = $(document.createElement("table"));
+ $table.attr("id", id);
+ $table.addClass("table table-bordered datagrid");
+ $table.addClass(classes);
+ // create datagrid header
+ $thead = $(document.createElement("thead"));
+ $headertr = $(document.createElement("tr"));
+ $headerth = $(document.createElement("th"));
+ // create datagrid footer
+ $tfoot = $(document.createElement("tfoot"));
+ $footertr = $(document.createElement("tr"));
+ $footerth = $(document.createElement("th"));
+ if(options.searchable == true) {
+ $headerth.append(one.lib.dashlet.datagrid._searchable());
+ }
+ if(options.flexibleRowsPerPage == true) {
+ $footerth.append(one.lib.dashlet.datagrid._rowsPerPage(options.popout));
+ }
+ if(options.pagination == true) {
+ $footerth.append(one.lib.dashlet.datagrid._pagination());
+ }
+ $headertr.append($headerth);
+ $thead.append($headertr);
+ $footertr.append($footerth);
+ $tfoot.append($footertr);
+ $table.append($thead).append($tfoot);
+ $fuelGridContainerDiv.append($table);
+ return $fuelGridContainerDiv;
+ },
+ _searchable: function() {
+ var searchHTML = "<div class='datagrid-header-left'><div class='input-append search datagrid-search'> <input type='text' class='input-medium' placeholder='Search'><button type='button' class='btn'><i class='icon-search'></i></button></div></div>";
+ return searchHTML;
+ },
+ _pagination: function() {
+ var html = '<div class="datagrid-footer-right" style="display:none;"><div class="grid-pager"><button type="button" class="btn grid-prevpage"><i class="icon-chevron-left"></i></button><span>Page</span> <div style="display:inline-block;"><input type="text" name="pagenumber" style="width:25px;margin-bottom:-10px;vertical-align:middle;margin-right:5px;"></div><span>of <span class="grid-pages"></span></span><button type="button" class="btn grid-nextpage"><i class="icon-chevron-right"></i></button></div></div>';
+ return html;
+ },
+ _rowsPerPage: function(popout) {
+ if(popout) {
+ var html = '<div class="datagrid-footer-left" style="display:none;"><div class="grid-controls"><span><span class="grid-start"></span>-<span class="grid-end"></span> of <span class="grid-count"></span></span><div class="select grid-pagesize" data-resize="auto" style="visibility:hidden;"><button type="button" data-toggle="dropdown" class="btn dropdown-toggle"><span class="dropdown-label"></span><span class="caret"></span></button><ul class="dropdown-menu"><li data-value="10" data-selected="true"><a href="#">5</a></li><li data-value="10"><a href="#">10</a></li><li data-value="20"><a href="#">20</a></li><li data-value="50"><a href="#">50</a></li><li data-value="100"><a href="#">100</a></li></ul></div><span style="display:none;">Per Page</span></div></div>';
+ } else {
+ var html = '<div class="datagrid-footer-left" style="display:none;"><div class="grid-controls"><span><span class="grid-start"></span>-<span class="grid-end"></span> of <span class="grid-count"></span></span><div class="select grid-pagesize" data-resize="auto" style="visibility:hidden;"><button type="button" data-toggle="dropdown" class="btn dropdown-toggle"><span class="dropdown-label"></span><span class="caret"></span></button><ul class="dropdown-menu"><li data-value="5" data-selected="true"><a href="#">5</a></li><li data-value="10"><a href="#">10</a></li><li data-value="20"><a href="#">20</a></li><li data-value="50"><a href="#">50</a></li><li data-value="100"><a href="#">100</a></li></ul></div><span style="display:none;">Per Page</span></div></div>';
+ }
+ return html;
+ }
+ },