Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 10th, 2012  |  syntax: None  |  size: 6.51 KB  |  hits: 20  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. // JavaScript MVC 3.0.5
  2. // jQuery 1.6
  3. // jqGrid 4.0
  4.  
  5. steal.plugins('jquery/controller/subscribe', 'jquery/view/ejs')
  6.         .views('grid.ejs').then(function($) {
  7.        
  8. /**
  9.  * A grid component that uses data from a local source (i.e. array) as opposed to
  10.  * fetching it remotely.
  11.  *
  12.  * The idea was to let some other part of the application fetch the data and
  13.  * then give it to this widget to update the grid, instead of having the grid
  14.  * handle making remote calls to the server (to fetch data, sort, page, etc).
  15.  */
  16. $.Controller.extend('MyApp.Widgets.LocalGrid',
  17. {
  18.         defaults: {
  19.                 // the column model
  20.                 colModel: null, // a column model must be provided
  21.                 // the default view template
  22.                 grid: '//myapp/controllers/widgets/grid/views/grid.ejs',
  23.                 // a CSS class to apply to the <table> element
  24.                 gridClass: "",
  25.                 altRowClass: "",
  26.                 // the ID for the grid
  27.                 gridId: 'myapp_grid',
  28.                 // the ID for the pager component
  29.                 pagerId: 'myapp_grid_pager',
  30.                 // callback for when a sort operation occurs, is given 3 params:
  31.                 // - column name
  32.                 // - column index
  33.                 // - sort order ('asc', 'desc')
  34.                 onSort: $.noop,
  35.                 // callback for when a paging operation occurs, is given 2 params:
  36.                 // - pager (see jqGrid 'onpaging' docs)
  37.                 // - page: the page number being asked for
  38.                 onPage: $.noop,
  39.                 // provide the object to use as "this" when invoking callbacks
  40.                 callbackScope: null
  41.         }
  42. },
  43. {
  44.         init: function(el) {
  45.                 this.ignoreSortEvent = false;
  46.                 this.update();
  47.         },
  48.        
  49.         update: function(options) {
  50.                 this._super(options || {});
  51.                 this.draw();
  52.         },
  53.        
  54.         draw: function() {
  55.                 // render the view
  56.                 this.element.html(this.options.grid, {options: this.options});
  57.                
  58.                 // add the jqGrid
  59.                 this.gridEl = this.element.find('#' + this.options.gridId);
  60.                 this._createGrid(this.gridEl);
  61.         },
  62.        
  63.         /**
  64.          * Add a jqGrid to the given element
  65.          *
  66.          * @param {HtmlElement} el
  67.          */
  68.          _createGrid: function(el) {
  69.                 var self = this,
  70.                         sortCallback = this.options.onSort,
  71.                         pageCallback = this.options.onPage,
  72.                         scope = this.options.callbackScope;
  73.                        
  74.                 /* a timeout function is used so the grid width will be calculated properly by jqGrid */
  75.                 setTimeout(function() {
  76.                         el.jqGrid({
  77.                                 altRows: true,
  78.                                 altClass: self.options.altRowClass,
  79.                                 datatype: 'local',
  80.                                 colModel: self.options.colModel,
  81.                                 rowNum: 20,
  82.                                 recordText: "Show {0} - {1} of {2}",
  83.                                 pager: '#' + self.options.pagerId,
  84.                                 viewrecords: true,
  85.                                 gridview: true,
  86.                                 height: '100%',
  87.                                 autowidth: true,
  88.                                 onSortCol: function(index, iCol, sortorder) {
  89.                                         if (self.ignoreSortEvent) {
  90.                                                 return "stop";
  91.                                         }
  92.                                         return sortCallback.apply(scope, arguments);
  93.                                 },
  94.                                 onPaging: function(type) {
  95.                                         // only handler 'user' paging (e.g. when a user types in a page number).
  96.                                         // the paging buttons are handled by a custom click event handler (see code further down)
  97.                                         var requestedPage = $('.ui-pg-input').val() || '',
  98.                                                 last = el.jqGrid('getGridParam', 'lastpage') || 1,
  99.                                                 isNumber = requestedPage.match(/^\d+$/),
  100.                                                 cp = self.currentPage || 1;
  101.                                                
  102.                                         if (!isNumber || last <= 1) {
  103.                                                 return false;
  104.                                         }
  105.                                        
  106.                                         requestedPage = parseInt(requestedPage, 10);
  107.                                        
  108.                                         if (requestedPage === cp || requestedPage < 1 || requestedPage > last) {
  109.                                                 return false;
  110.                                         }
  111.                                        
  112.                                         return pageCallback.call(scope, this.id, requestedPage);
  113.                                 }
  114.                         });
  115.                        
  116.                         // instead of having "Showing 3 901 - 3 919 of 3919"
  117.                         // setting the separator to a comma gives us: Showing 3,901 - 3,919 of 3,919
  118.                         $.jqgrid.formatter.integer.thousandsSeparator = ',';
  119.                        
  120.                         /*
  121.                          * instead of using the 'onPaging' event handler for the grid (it's used for one case)
  122.                          * we unbind the click event handlers that jqgrid configures and we define our own.
  123.                          * This is done b/c the jqgrid click handler references a "ts.p.page" to determine whiche
  124.                          * page to go to, however, it doesn't work properly (meaning it will say the current page
  125.                          * is 1 even though the user is looking at page 2).
  126.                          */
  127.                          $('#first, #prev, #next, #last').unbind('click').bind('click', function(e) {
  128.                                 var cp = self.currentPage || 1,
  129.                                         last = el.jqGrid('getGridParam', 'lastpage') || 1,
  130.                                         requestedPage = -1,
  131.                                         selclick = false,
  132.                                         fp = true,
  133.                                         pp = true,
  134.                                         np = true,
  135.                                         lp = true;
  136.                                        
  137.                                 if (last === 0 || last === 1) {
  138.                                         fp = pp = np = lp = false;
  139.                                 }
  140.                                 else if (last > 1 && cp >= 1) {
  141.                                         if (cp === 1) {
  142.                                                 fp = pp = false;
  143.                                         }
  144.                                         else if (cp > 1 && cp < last) {
  145.                                         }
  146.                                         else if (cp === last) {
  147.                                                 np = lp = false;
  148.                                         }
  149.                                 }
  150.                                 else if (last > 1 && cp === 0) {
  151.                                         np = lp = false;
  152.                                         cp = last - 1;
  153.                                 }
  154.                                
  155.                                 if (this.id === 'first' && fp) { requestedPage = 1; selclick = true; }
  156.                                 if (this.id === 'prev' && pp) { requestedPage = (cp - 1); selclick = true; }
  157.                                 if (this.id === 'next' && np) { requestedPage = (cp + 1); selclick = true; }
  158.                                 if (this.id === 'last' && lp) { requestedPage = last; selclick = true; }
  159.                                
  160.                                 if (selclick) {
  161.                                         return pageCallback.call(scope, this.id, requestedPage);
  162.                                 }
  163.                         });
  164.                 }, 30);
  165.         },
  166.        
  167.         /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  168.          *
  169.          * API Methods
  170.          *
  171.          * These methods ar emeant to be invoked by users/clients of this code.
  172.          *
  173.          * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  174.          */
  175.        
  176.         /**
  177.          * Set the data for the grid.
  178.          *
  179.          * @param {Object} data the data for the grid, this should contain the following properties:
  180.          *      - rows: array of objects, one per row
  181.          *      - page: the page number of this dataset (1-based, so page 1,2,3. Not page, 0,1,2).
  182.          *      - total: the total number of pages available
  183.          *  - records: the number of records available
  184.          *      - sidx: the name of the column to sort
  185.          *      - sord: the sort order, either 'asc' or 'desc'
  186.          */
  187.          setData: function(data) {
  188.                 this.currentPage = data.page;
  189.                 var self = this,
  190.                         reader = {
  191.                                 root: function(obj) { return data.rows; },
  192.                                 page: function(obj) { return data.page; },
  193.                                 total: function(obj) { return data.total; },
  194.                                 records: function(obj) { return data.records; },
  195.                                 repeatItems: false
  196.                         };
  197.                        
  198.                 this.gridel.jqGrid('setGridParam', {
  199.                         data: data.rows,
  200.                         localReader: reader,
  201.                         sortname: String(data.sidx),
  202.                         sortorder: data.sord,
  203.                         page: data.page
  204.                 }).trigger('reloadGrid');
  205.                
  206.                 // update the sort icons in the columns
  207.                 setTimeout(function() {
  208.                         self.updateSortIcons(data.sidx, data.sord);
  209.                 }, 50);
  210.         },
  211.        
  212.         updateSortIcons: function(columnName, sortorder) {
  213.                 this.ignoreSortEvent = true;
  214.                 this.gridEl.sortGrid(String(columnName), false, sortorder);
  215.                 this.ignoreSortEvent = false;
  216.         },
  217.        
  218.         redraw: function() {
  219.                 this.gridEl.trigger('reloadGrid');
  220.         }
  221. })
  222.  
  223. });
create a new version of this paste RAW Paste Data