diff --git a/Readme.md b/Readme.md index 428e35e..8a6b437 100644 --- a/Readme.md +++ b/Readme.md @@ -1,11 +1,17 @@ [bbGrid](http://direct-fuel-injection.github.com/bbGrid/) ==================== -That's an extendable grid system (jqGrid like) developed on Backbone.js, Twitter Bootstrap and jQuery frameworks. + +[![Join the chat at https://gitter.im/direct-fuel-injection/bbGrid](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/direct-fuel-injection/bbGrid?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +That's an extendable grid system (jqGrid like) developed on Backbone.js, Bootstrap and jQuery frameworks. #### Requirements - Backbone.js > 1.0.0 -- Twitter Bootstrap v2.2.1 +- Bootstrap v3 - jQuery v1.8.3 +#### Install + +`bower install bbGrid --save` + Include bbGrid.js and bbGrid.css into your project. [Documentation and examples.](http://direct-fuel-injection.github.com/bbGrid/) diff --git a/bbGrid.css b/bbGrid.css index 5b63fb7..6aa820c 100644 --- a/bbGrid.css +++ b/bbGrid.css @@ -1,4 +1,4 @@ -/*! bbGrid.css 0.6.4 +/*! bbGrid.css 0.9.1 * * (c) 2012-2013 Minin Alexey, direct-fuel-injection. * bbGrid may be freely distributed under the MIT license. @@ -9,44 +9,60 @@ .bbGrid-grid td{ cursor: default; overflow: hidden; white-space:nowrap; line-height: 1; vertical-align: middle} .bbGrid-grid tr{height:2.4em;} .bbGrid-grid .bbGrid-grid-head{font-size: 12px; cursor: pointer} -.bbGrid-grid .bbGrid-grid-head th, .bbGrid-grid .bbGrid-grid-head td{overflow: hidden; white-space: normal; background-color: #F5F5F5} +.bbGrid-grid .bbGrid-grid-head th, .bbGrid-grid .bbGrid-grid-head td{box-sizing: content-box; overflow: hidden; white-space: normal; border-bottom: 0px; background-color: #f8f8f8} .bbGrid-grid .bbGrid-grid-head i{ float: right} -.bbGrid-grid .bbGrid-grid-head .bbGrid-filter-bar input,.bbGrid-grid .bbGrid-grid-head .bbGrid-filter-bar select{display: block;padding: 1px 6px;box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; margin: 0px; font-size: 12px; width:100%; height: 22px} +.bbGrid-grid .bbGrid-grid-head .bbGrid-filter-bar input,.bbGrid-grid .bbGrid-grid-head .bbGrid-filter-bar select{display: block;padding: 1px 6px;box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; margin: 0px; font-size: 12px; width:100%; height: 24px} .bbGrid-grid .bbGrid-grid-head .bbGrid-filter-bar select{height: 24px;padding:2px 2px;} .bbGrid-grid .bbGrid-actions-cell { padding: 2px 5px; text-align: center} .bbGrid-grid .bbGrid-subgrid-control { padding: 2px 5px; text-align: center} +.bbGrid-row .bbGrid-subgrid-control {padding: 5px; font-size: 12px} .bbGrid-grid .bbGrid-multiselect-control input{margin: 0} .bbGrid-container {width: auto} .bbGrid-container .bbGrid-loading{ margin: 3px 0 2px 40%;width: 20% } .bbGrid-container .bbGrid-loading .bbGrid-loading-progress{ width: 100%; line-height: 20px} .bbGrid-container .table{ margin: 0 } -.bbGrid-container .bbGrid-pager-container{height: 26px; width: 380px; left: 50%; margin-left:-190px; position: absolute} -.bbGrid-container .bbGrid-pager-container-norowslist{width: 200px; margin-left:-100px} -.bbGrid-container .bbGrid-grid-nav{ margin: 0; background-color: #F5F5F5; background-repeat: repeat-x; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #A2A2A2; border-image: none; border-radius: 4px 4px 4px 4px; border-style: solid; border-width: 1px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05); color: #333333; padding: 0 0 1px 1px; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; position: relative; height: 28px} +.bbGrid-container .bbGrid-pager-container{height: 26px; width: 410px; left: 50%; margin-left:-190px; margin-top: 2px; position: absolute} +.bbGrid-container .bbGrid-pager-container-norowslist{width: 205px; margin-left:-100px} +.bbGrid-container .bbGrid-grid-nav{ margin: 0; background-color: #f8f8f8; background-repeat: repeat-x; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #A2A2A2; border-image: none; border-radius: 4px 4px 4px 4px; border-style: solid; border-width: 1px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05); color: #333333; padding: 0 0 1px 1px; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; position: relative; height: 30px} .bbGrid-container .bbGrid-subgrid-row:hover{ background-color: transparent} -.bbGrid-container .bbGrid-pager{ margin: 2px 0 0; cursor: pointer} -.bbGrid-container .bbGrid-pager .nav{ margin-bottom: 0; padding-bottom: 0} -.bbGrid-container .bbGrid-pager i{ margin: 0} -.bbGrid-container .bbGrid-pager a{margin: 0 1px; padding: 4px; border: 1px solid #CCCCCC} +.bbGrid-container .bbGrid-pager {width: 220px; margin: 0; height: 24px;} +.bbGrid-container .bbGrid-pager .nav{ margin-bottom: 0; padding-bottom: 0; width: 220px} +.bbGrid-container .bbGrid-pager i{margin: 0; top: -1px;} +.bbGrid-container .bbGrid-pager a{margin: 0 1px; padding: 4px; border: 1px solid #CCCCCC; height: 24px; cursor: pointer; color: #000} .bbGrid-container .bbGrid-pager a:hover{background-color: #FAF2CC;} .bbGrid-container .bbGrid-pager a:active{box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);} -.bbGrid-container .bbGrid-pager li.active a{ background-color:#F5F5F5} +.bbGrid-container .bbGrid-pager li.active a{ background-color:#f8f8f8} .bbGrid-container .bbGrid-pager li.active a:active{box-shadow: none;} -.bbGrid-container .bbGrid-page-counter {font-size: 11px; padding: 2px 0px 0px 4px} -.bbGrid-container .bbGrid-page-counter-right {font-size: 11px; padding: 2px 2px 0px 4px} -.bbGrid-container .bbGrid-grid-nav .bbGrid-page-input{float: left; padding: 1px; margin: 0 0 0 1px; width: 30px; font-size: 11px;text-align: center } -.bbGrid-navBar-buttonsContainer {margin: 2px 0 0} +.bbGrid-container .bbGrid-page-counter {font-size: 11px; padding: 4px 0px 0px 4px} +.bbGrid-container .bbGrid-page-counter-right {font-size: 11px; padding: 4px 2px 0px 4px} +.bbGrid-container .bbGrid-grid-nav .bbGrid-page-input{float: left; padding: 1px; margin: 0 0 0 1px; width: 30px; font-size: 11px;text-align: center; height: 24px } +.bbGrid-grid-nav .bbGrid-navBar-buttonsContainer {margin: 3px 0px 0; padding-left: 2px} .bbGrid-navBar-buttonsContainer button{margin-right: 1px} -.bbGrid-container .bbGrid-grid-nav .bbGrid-pager-rowlist {width: 56px; margin-top: 2px; margin-left:2px; padding: 3px 2px; height: 24px; font-size: 11px} +.bbGrid-container .bbGrid-grid-nav .bbGrid-pager-rowlist {width: 56px; margin-left:2px; padding: 3px 2px; height: 24px; font-size: 11px} .bbGrid-pager-container .bbGrid-pager ul li {list-style:none;padding-left: 0;} -.bbGrid-container .bbGrid-pager-rowlist-label {line-height: 20px; font-size: 11px; margin-top:2px; padding: 2px 0px 0px 4px} -.bbGrid-grid tbody tr.bbGrid-row:hover td{background-color:#f5f5f5;} +.bbGrid-container .bbGrid-pager-rowlist-label {line-height: 20px; font-size: 11px; margin-top:2px; padding: 0px} +.bbGrid-grid tbody tr.bbGrid-row:hover td{background-color:#f8f8f8;} .bbGrid-grid tbody tr.success:hover td{background-color:#d0e9c6;} .bbGrid-grid tbody tr.error:hover td{background-color:#ebcccc;} .bbGrid-grid tbody tr.warning:hover td{background-color:#faf2cc;} .bbGrid-grid tbody tr.info:hover td{background-color:#c4e3f3;} .bbGrid-grid caption{font-size: 1.4em;font-weight: bold;line-height: 2em} -.bbGrid-search-bar {padding: 2px} -.bbGrid-search-bar input, .bbGrid-search-bar button{padding: 1px 6px;} +.bbGrid-search-bar {padding: 2px; max-width: 310px} +.bbGrid-search-bar input, .bbGrid-search-bar button{padding: 1px 6px; float: right!important} +.bbGrid-search-bar button{overflow: hidden; max-width: 80px} .bbGrid-search-bar input{ font-size: 12px} .bbGrid-search-bar li > a{font-size: 12px; padding-top: 1px; padding-bottom: 1px} +.bbGrid-rshandle-container {position: relative;} +.bbGrid-rshandle {position: absolute;width: 7px;cursor: ew-resize;margin-left: -3px;z-index: 2;} +.bbGrid-table-resizing {cursor: ew-resize;} +.bbGrid-table-resizing thead, .bbGrid-table-resizing thead > th, .bbGrid-table-resizing thead > th > a {cursor: ew-resize;} +.table-curved {border-collapse: separate;} +.table-curved {border: solid #ccc 1px;border-radius: 4px;border-left:0px;} +.table-curved td, .table-curved th {border-left: 1px solid #ccc;border-top: 1px solid #ccc;} +.table-curved th {border-top: none;} +.table-curved th:first-child {border-radius: 4px 0 0 0;} +.table-curved th:last-child {border-radius: 0 4px 0 0;} +.table-curved th:only-child{border-radius: 4px 4px 0 0;} +.table-curved tr:last-child td:first-child {border-radius: 0 0 0 4px;} +.table-curved tr:last-child td:last-child {border-radius: 0 0 4px 0;} +.table-curved thead tr:last-child td:first-child {border-radius: 0;} diff --git a/bbGrid.js b/bbGrid.js index 6e10f0e..54d7ccc 100644 --- a/bbGrid.js +++ b/bbGrid.js @@ -1,4 +1,4 @@ -// bbGrid.js 0.8.5 +// bbGrid.js 0.9.1 // (c) 2012-2013 Minin Alexey, direct-fuel-injection. // bbGrid may be freely distributed under the MIT license. @@ -18,6 +18,15 @@ this.lang = lang; } } + }, + parseWidth = function (node) { + return parseFloat(node.style.width.replace('%', '')); + }, + pointerX = function (e) { + if (e.type.indexOf('touch') === 0) { + return (e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]).pageX; + } + return e.pageX; }; bbGrid.Dict = { @@ -41,11 +50,11 @@ } }; - viewOptions = ['autofetch', 'buttons', 'actions', 'colModel', 'container', - 'enableSearch', 'multiselect', 'rows', 'rowList', 'selectedRows', + viewOptions = ['autofetch', 'buttons', 'actions', 'colModel', 'container', 'loadDynamic', + 'enableSearch', 'multiselect', 'rows', 'rowList', 'selectedRows', 'caption', 'subgrid', 'subgridControl', 'subgridAccordion', 'onRowClick', 'onRowDblClick', 'onReady', - 'onBeforeRender', 'onBeforeCollectionRequest', 'onRowExpanded', - 'onRowCollapsed', 'events', 'searchList']; + 'onBeforeRender', 'onBeforeCollectionRequest', 'onRowExpanded', 'escape', + 'onRowCollapsed', 'events', 'searchList', 'sortSequence', 'resizable', 'resizeFromBody']; bbGrid.RowView = function (options) { this.events = { @@ -69,11 +78,14 @@ disabled="disabled"<% } %><% if (isChecked) {%>checked="checked"<%}%>>\ <%} if (isContainSubgrid) {%>\ \ - \ + \ \ <%} _.each(values, function (row) {%>\ - class="bbGrid-actions-cell"<%}%>>\ - <%=row.value%>\ + class="<%=row.className%>"<% } %> contenteditable="<%=row.editable || false%>"\ + <% _.each(row.attributes, function (value, key) { %>\ + <%=key%>="<%=value%>" \ + <% }); %>>\ + <% if (isEscaped || row.escape) { %><%=_.escape(row.value)%><% } else { %><%=row.value%><% } %>\ \ <%})%>', null, templateSettings ), @@ -174,15 +186,19 @@ isSelected: this.selected || false, isChecked: isChecked, isDisabled: isDisabled, + isEscaped: this.view.escape, values: _.map(cols, function (col) { if (col.actions) { col.name = 'bbGrid-actions-cell'; + col.className = col.name; if (_.isFunction(col.actions)) { col.value = col.actions.call(self, self.model.id, self.model.attributes, self.view); } else { col.value = self.view.actions[col.actions].call(self, self.model.id, self.model.attributes, self.view); } } else { + col.attributes = _.omit(col, 'name', 'value', 'className', 'title', 'editable', 'width', 'index', 'escape', + 'hidden', 'sorttype', 'filter', 'filterType', 'sortOrder', 'filterColName', 'resizable', 'attributes', 'tooltip'); col.value = self.getPropByStr(self.model.attributes, col.name); } return col; @@ -192,7 +208,7 @@ this.selected = true; this.$el.addClass('warning'); } - this.$el.html(html); + this.$el.html(html).attr('data-cid', this.model.cid); return this; } }); @@ -212,32 +228,32 @@ _.extend(bbGrid.PagerView.prototype, Backbone.View.prototype, { tagName: 'div', - className: 'bbGrid-pager-container span offset', + className: 'bbGrid-pager-container span col-md-1 col-md-offset-1', template: _.template( - '
\ + '
\
    \ - class="active"<%}%>>\ - \ + class="disabled"<%}%>>\ + \ \ -
  • class="active"<%}%>>\ - \ +
  • class="disabled"<%}%>>\ + \
    • \
  • \
    <%=dict.page%>.
    \ - \ + \
    <%=dict.prep%> <%=cntpages%>
    \
    • \ - class="active"<%}%>>\ - \ + class="disabled"<%}%>>\ + \ \ - class="active"<%}%>>\ - \ + class="disabled"<%}%>>\ + \ \
\
\ <% if (rowlist) {%>\
<%=dict.rowsOnPage%>:
\ - \ <% _.each(rowlist, function (val) {%>\ \ <%})%>\ @@ -253,6 +269,7 @@ this.view.render(); }, onPageChanged: function (event) { + event.preventDefault(); this.view.trigger('pageChanged', event); }, initPager: function () { @@ -298,12 +315,17 @@ bbGrid.PagerView.extend = Backbone.View.extend; bbGrid.TheadView = function (options) { + var self = this; this.events = { 'click th': 'onSort', 'click input[type=checkbox]': 'onAllCheckbox' }; Backbone.View.apply(this, [options]); this.view = options.view; + _.bindAll(this, 'handleTrigger'); + $(window).on('resize.rshandle', (function() { + self.refreshHandles(); + })); }; _.extend(bbGrid.TheadView.prototype, Backbone.View.prototype, { @@ -311,13 +333,15 @@ className: 'bbGrid-grid-head', template: _.template( '<% if (isMultiselect) {%>\ - \ + \ <%} if (isContainSubgrid) {%>\ - \ + \ <%} _.each(cols, function (col) {%>\ - style="width:<%=col.width%>"<%}%>><%=col.title%>class="icon-chevron-up"<%} else \ - if (col.sortOrder === "desc" ) {%>class="icon-chevron-down"<% } %>/>\ + title="<%=col.tooltip%>" <% } %>\ + <% if (!col.resizable) {%> data-noresize <% } %>\ + <% if (col.width) {%>style="width:<%=col.width%>"<%}%>><%=col.title%>class="glyphicon glyphicon-chevron-up"<%} else \ + if (col.sortOrder === "desc" ) {%>class="glyphicon glyphicon-chevron-down"<% } %>/>\ <%})%>', null, templateSettings ), onAllCheckbox: function (event) { @@ -326,27 +350,127 @@ onSort: function (event) { this.view.trigger('sort', event); }, - render: function () { - var cols, theadHtml; + render: function (options) { + options || (options = {}); + var cols, theadHtml, grid = this.view; if (!this.$headHolder) { this.$headHolder = $('', {'class': 'bbGrid-grid-head-holder'}); this.$el.append(this.$headHolder); } - cols = _.filter(this.view.colModel, function (col) {return !col.hidden; }); - cols = _.map(cols, function (col) { col.title = col.title || col.name; return col; }); - this.view.colLength = cols.length + (this.view.multiselect ? 1 : 0) + (this.view.subgrid && this.view.subgridControl ? 1 : 0); + cols = _.filter(grid.colModel, function (col) {return !col.hidden; }); + this.cols = cols = _.map(cols, function (col) { + col.resizable = (col.resizable === undefined) ? grid.resizable : col.resizable; + col.title = col.title || col.name; + return col; + }); + this.isResizable = grid.resizable || _.chain(cols).pluck('resizable').compact().value().length > 0; + grid.colLength = cols.length + (grid.multiselect ? 1 : 0) + (grid.subgrid && grid.subgridControl ? 1 : 0); theadHtml = this.template({ - isMultiselect: this.view.multiselect, - isContainSubgrid: this.view.subgrid && this.view.subgridControl, + isMultiselect: grid.multiselect, + isContainSubgrid: grid.subgrid && grid.subgridControl, cols: cols }); this.$headHolder.html(theadHtml); - if (!this.view.$filterBar && this.view.enableFilter) { - this.view.filterBar = new this.view.entities.FilterView({ view: this.view }); - this.view.$filterBar = this.view.filterBar.render(); - this.$el.append(this.view.$filterBar); + if (!grid.$filterBar && grid.enableFilter) { + grid.filterBar = new grid.entities.FilterView({ view: grid }); + grid.$filterBar = grid.filterBar.render(); + this.$el.append(grid.$filterBar); + } + if (this.isResizable) { + this.$headers = this.$('.bbGrid-grid-head-holder th:visible'); + if (!options.silent) { + this.setHeadersWidthsInPerc(); + } + this.createHandles(); } return this.$el; + }, + setHeadersWidthsInPerc: function () { + // important! first calculate all widths, then -> set. + var self = this, calculatedArray = [], grid = this.view; + this.$headers.each(function (index, el) { + var $el = $(el); + calculatedArray.push({ + dom: $el[0], + width: $el.outerWidth() / grid.$grid.width() * 100, + index: index + }); + }); + _(calculatedArray).each(function (el) { + self.setWidth(el.dom, el.width, el.index); + }); + }, + createHandles: function () { + var _ref, self = this, grid = this.view; + if ((_ref = this.$handleContainer) != null) { + _ref.remove(); + } + grid.$grid.before((this.$handleContainer = $('
'))); + this.$headers.each(function (i, el) { + var $handle; + if (self.$headers.eq(i + 1).length === 0 || (self.$headers.eq(i).attr('data-noresize') != null)) { + return; + } + $handle = $("
"); + $handle.data('th', $(el)); + return $handle.appendTo(self.$handleContainer); + }); + this.$handleContainer.on('mousedown touchstart', '.bbGrid-rshandle', this.handleTrigger); + this.refreshHandles(); + }, + refreshHandles: function () { + var self = this, grid = this.view; + if (!this.isResizable) { + return; + } + this.$handleContainer.width(grid.$grid.width()).find('.bbGrid-rshandle').each(function(_, el) { + var $el = $(el); + if (!$el.data('th')) { + return $el; + } + return $el.css({ + top: grid.$grid.find('> caption').height(), + left: $el.data('th').outerWidth() + ($el.data('th').offset().left - self.$handleContainer.offset().left), + height: grid.resizeFromBody ? grid.$grid.height() : self.$el.height() + }); + }); + }, + handleTrigger: function (e) { + var $currentGrip, $leftColumn, $rightColumn, startPosition, widths, leftColumnIndex, + rightColumnIndex, self = this, grid = this.view; + e.preventDefault(); + startPosition = pointerX(e); + $currentGrip = $(e.currentTarget); + $leftColumn = $currentGrip.data('th'); + leftColumnIndex = this.$headers.index($leftColumn); + $rightColumn = this.$headers.eq(leftColumnIndex + 1); + rightColumnIndex = this.$headers.index($rightColumn); + widths = { + left: parseWidth($leftColumn[0]), + right: parseWidth($rightColumn[0]) + }; + grid.$grid.addClass('bbGrid-table-resizing'); + $(document).on('mousemove.rshandle touchmove.rshandle', function(e) { + var difference; + difference = (pointerX(e) - startPosition) / grid.$grid.width() * 100; + self.setWidth($rightColumn[0], widths.right - difference, rightColumnIndex); + self.setWidth($leftColumn[0], widths.left + difference, leftColumnIndex); + }); + $(document).one('mouseup touchend', function() { + $(document).off('mousemove.rshandle touchmove.rshandle'); + grid.$grid.removeClass('bbGrid-table-resizing'); + self.refreshHandles(); + }); + }, + setWidth: function (node, width, index) { + width = "" + width.toFixed(2) + "%"; + if (index >= 0) { + index = index + (this.view.multiselect ? -1 : 0) + (this.view.subgrid && this.view.subgridControl ? -1 : 0); + if (this.cols[index]) { + this.cols[index].width = width; + } + } + node.style.width = width; } }); @@ -363,12 +487,12 @@ render: function () { if (this.view.buttons) { var self = this, btn, btnHtml, $button; - this.view.$buttonsContainer = $('
', {'class': 'bbGrid-navBar-buttonsContainer btn-group span'}); + this.view.$buttonsContainer = $('
', {'class': 'bbGrid-navBar-buttonsContainer input-group-btn col-md-1'}); this.view.buttons = _.map(this.view.buttons, function (button) { if (!button) { return undefined; } - btn = _.template('', null, templateSettings); + btn = _.template('', null, templateSettings); btnHtml = button.html || btn({id: button.id, title: button.title}); $button = $(btnHtml).appendTo(self.view.$buttonsContainer); if (button.onClick) { @@ -406,12 +530,12 @@ tagName: 'div', className: 'bbGrid-search-bar pull-right', template: _.template( - '
\ - \ -
\ - \
    \ <% _.each(cols, function (col, index) {%>\ @@ -503,12 +627,12 @@ <%if (col.filter) {%>\ <<% if (col.filterType === "input") \ {%>input<%}else{%>select<%\ - }%> class="<%if (col.filterColName) {%><%=col.filterColName%><%}else{%><%=col.name %><%}%>" \ - name="filter" type="text" value="<%=filterOptions[col.name]%>">\ + }%> class="form-control" data-colname="<%if (col.filterColName) {%><%=col.filterColName%><%}else{%><%=col.name %><%}%>" \ + name="filter" type="text" <% if (filterOptions[col.name]) { %>value="<%=filterOptions[col.name].value%>"<% } %>>\ <% if (col.filterType !== "input") {%>\ \ <% _.each(options[col.name], function (option) {%>\ - \ <%})%>\ @@ -524,18 +648,23 @@ onFilter: function () { var text, self = this, collection; _.each($('*[name=filter]', this.$el), function (el) { - text = $.trim($(el).val()); + var type = el.tagName.toLowerCase(), + name = $(el).data('colname'); + text = (type === 'select') ? $(el).val() : $.trim($(el).val()); if (text) { - self.view.filterOptions[el.className] = text; + self.view.filterOptions[name] = { + value: text, + filterType: type + }; } else { - delete self.view.filterOptions[el.className]; + delete self.view.filterOptions[name]; } }); if (!this.view.loadDynamic) { - collection = new Backbone.Collection(this.view._collection.models); + collection = new this.view._collection.constructor(this.view._collection.models); this.view.setCollection(collection); if (_.keys(this.view.filterOptions).length) { - self.filter(collection, _.clone(this.view.filterOptions)); + self.filter(collection, $.extend(true, {}, this.view.filterOptions)); } } this.view.trigger('filter', {silent: !this.view.loadDynamic}); @@ -543,7 +672,8 @@ filter: function (collection, options) { var keys = _.keys(options), option, key = _.first(keys), - text = options[key]; + text = options[key] ? options[key].value : '', + filterType = options[key] ? options[key].filterType : ''; if (!keys.length) { return collection; } @@ -551,8 +681,12 @@ if (text.length > 0) { collection.reset(_.filter(collection.models, function (model) { option = model.get(key); - if (option) { - return ("" + option).toLowerCase().indexOf(text.toLowerCase()) >= 0; + if (option !== undefined) { + if (filterType === 'select') { + return ("" + option).toLowerCase() === text.toLowerCase(); + } else { + return ("" + option).toLowerCase().indexOf(text.toLowerCase()) >= 0; + } } else { return false; } @@ -626,8 +760,11 @@ }; _.extend(bbGrid.View.prototype, Backbone.View.prototype, { + escape: false, selectionEnabled: true, subgridControl: true, + resizable: false, + resizeFromBody: true, lang: bbGrid.lang, tagName: 'div', className: 'bbGrid-container', @@ -719,7 +856,7 @@ this.$el.css('width', this.width); } if (!this.$grid) { - this.$grid = $(''); + this.$grid = $('
    '); if (this.caption) { this.$grid.append(''); } @@ -734,7 +871,7 @@ this.navBar = new this.entities.NavView({view: this}); this.$navBar = this.navBar.render(); this.$grid.after(this.$navBar); - this.$loading = $('
    ' + this.dict.loading + '
    '); + this.$loading = $('
    ' + this.dict.loading + '
    '); this.$navBar.prepend(this.$loading); } if (!this.$searchBar && this.enableSearch) { @@ -865,7 +1002,7 @@ } }, setRowSelected: function (options) { - var event = {}, className; + var event = {}, className = ''; options || (options = {}); if (!this.selectionEnabled) { return false; @@ -893,7 +1030,7 @@ }); } if (View.$subgridContainer) { - $('td.bbGrid-subgrid-control i', View.$subgridContainer.prev()).removeClass('icon-minus'); + $('td.bbGrid-subgrid-control i', View.$subgridContainer.prev()).removeClass('glyphicon-minus'); View.$subgridContainer.remove(); delete View.$subgridContainer; if (View.expandedRowId === model.id && !options.isShown) { @@ -903,7 +1040,7 @@ return false; } } - $('td.bbGrid-subgrid-control i', $el).addClass('icon-minus'); + $('td.bbGrid-subgrid-control i', $el).addClass('glyphicon-minus'); colspan = this.multiselect ? 2 : 1; colspan = this.subgridControl ? colspan : colspan - 1; subgridRow = _.template('<% if (control) { %>', null, templateSettings); @@ -932,6 +1069,9 @@ addModelsHandler: function (model, collection, options) { var index = this.collection.indexOf(model); if ((index + 1) === this.collection.length) { + if (this.sortSequence && this.sortSequence.length) { + this.sortBy(this.sortSequence); + } this.renderPage(); } }, @@ -1031,7 +1171,7 @@ this.rsortBy(col); } } - this.thead.render(); + this.thead.render({silent: true}); this.renderPage({silent: !this.loadDynamic}); }, onDblClick: function (model, $el) { @@ -1041,7 +1181,7 @@ }, onPageChanged: function (event) { var $el = $(event.currentTarget), - className = $el.attr('class'), + className = ($el.attr('class')).split(' ')[0], page; switch (className) { case 'bbGrid-page-input': @@ -1091,4 +1231,4 @@ }); bbGrid.View.extend = Backbone.View.extend; -}).call(this); \ No newline at end of file +}).call(this); diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..dab4a05 --- /dev/null +++ b/bower.json @@ -0,0 +1,23 @@ +{ + "version": "1.0.0", + "name": "bbGrid", + "main": "bbGrid.js", + "homepage": "https://github.com/daton89/bbGrid", + "authors": [ + "daton " + ], + "description": "Grid system on Backbone.js and Bootstrap, sure jQuery :)", + "keywords": [ + "Backbone.js", + "Bootstrap", + "jQuery" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ] +} \ No newline at end of file
    ' + this.caption + '
    <% } %>