在backgrid.js中加载数据时的加载图标

Question

hi我有一些重数据。当我的网格加载数据时，它什么也不显示，突然它显示了整个数据。。我不明白我怎么能把加载图标放在屏幕上？

如果可能的话，请提供一把小提琴。现在我的代码是：-

var Territory = Backbone.Model.extend({});
var PageableTerritories = Backbone.PageableCollection.extend({
  model: Territory,
  url: urlvariable,
  state: {
    pageSize: 15
  },
  mode: "client" // page entirely on the client side
});
 var TitledUriCell = Backgrid.TitledUriCell = Backgrid.UriCell.extend({
  /** @property */
  className: "titled-uri-cell",
  render: function() {
    this.$el.empty();
    var formattedValue = this.formatter.fromRaw(this.model.get(this.column.get("name")));
    var measureVal = this.formatter.fromRaw(this.model.attributes.MeasureCategory);
    this.$el.append($("<a href='/inpatient_detail/" + formattedValue + "''> Delete</a>" 
   ).text(formattedValue));
    this.delegateEvents();
    return this;
  }
 });

var pageableTerritories = new PageableTerritories();
var columns = [{
    // name is a required parameter, but you don't really want one on a select all column
    name: "PatientId",
    // Backgrid.Extension.SelectRowCell lets you select individual rows
    cell: "select-row",
    // Backgrid.Extension.SelectAllHeaderCell lets you select all the row on a page
    headerCell: "select-all",
  },{
  name: "FirstName",
  label: "First Name",
  editable: false,
  // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
  cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
}, {
  name: "LastName",
  label: "Last Name",
  editable: false,
  cell: "string" // An integer cell is a number cell that displays humanized integers
}, {
  name: "PatientId",
  label: "Patient Id",
  editable: false,
  cell: "titledUri" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}, {
  name: "RoomNumber",
  label: "Room Number",
  editable: false,
  cell: "string" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}, {
  name: "AdmissionDate",
  label: "Admission Date",
  editable: false,
  cell: "date" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}, {
  name: "DischargeDate",
  label: "Discharge Date",
  editable: false,
  cell: "date" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}, {
  name: "MeasureCategory",
  label: "MeasureCategory",
  editable: false,
  cell: "string" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}];
// Set up a grid to use the pageable collection
var pageableGrid = new Backgrid.Grid({
  columns: columns,
  collection: pageableTerritories
});
// var selectedModels = grid.getSelectedModels();
// backgriCollections.remove(selectedModels);


// Render the grid
$("#grid").empty();
var $example2 = $("#grid");
$example2.append(pageableGrid.render().$el)
// Initialize the paginator
var paginator = new Backgrid.Extension.Paginator({
  collection: pageableTerritories
});
// Render the paginator
$example2.append(paginator.render().$el);
// Initialize a client-side filter to filter on the client
// mode pageable collection's cache.
var filter = new Backgrid.Extension.ClientSideFilter({
  collection: pageableTerritories.fullCollection,
  placeholder: "Search in Grid on First Name",
  fields: ['FirstName']
});
// Render the filter
 $example2.prepend(filter.render().$el);

// Add some space to the filter and move it to the right
filter.$el.css({float: "right", margin: "20px"});
// Fetch some data
pageableTerritories.fetch({reset: true});
$example2.append( '<div class = "newb"><table><tr><%= button_tag "Add a Patient",:class=>"btn btn-primary"%><%= form_tag("/PatientManagement/CurrentInpatient2", method: "post",:id=>"testform") do %><%= text_field_tag "patientIdsDel",nil,:type=>"hidden" %><%= text_field_tag "hospitalId",current_user.hospital.name,:type=>"hidden"%><%= text_field_tag "processType","inpatient",:type=>"hidden"%><%= submit_tag "Delete Selected",:id=>"2",:onclick => "return del()",:class=>"btn btn-primary"%><%end%>&nbsp;&nbsp;<%= form_tag("/PatientManagement/CurrentInpatient2", method: "post") do %><%= text_field_tag "patientIds",nil,:type=>"hidden" %><%= text_field_tag "hospitalId",current_user.hospital.name,:type=>"hidden"%><%= text_field_tag "processType","inpatient",:type=>"hidden"%><%= submit_tag 'Export Selected',:onclick => "return ex()",:class=>"btn btn-primary" %><%end%></tr></table></div>' );
pageableTerritories.on("backgrid:selected", function (model, selected) {
    var size = Object.size(arr);
    var abc=pageableTerritories.state.totalRecords;
  if(selected==true){
    arr[model.attributes.PatientId] =  "'"+model.attributes.MeasureCategory+"'";    
    size=size+1
  }
  else if(selected==false){
    delete arr[model.attributes.PatientId];
    size=size-1
  }

$("#aa").empty();
$("#aa").append("<div style = 'float:left;margin-top: -21px;margin-left: 50px; '><b>"+size+" Selected out of " + abc+ " Records Found </b></div>");

// $example2.append('<h1>hello i am here</h1>');
});
}

Answer 1

现在回答OP的问题有点晚了。但我想为其他遇到这个线程的人提供一个。

//Instantiate your grid with empty collection
myGrid = new Backgrid.Grid({
    columns: myColumns
    collection: new Backgrid.Collection() //Add an empty collection
    emptyText: "No data to display" //Make sure this is defined
});
myGrid.render();
myGrid.$el.find("td").html("<img src='my-loading-gif.gif' />");
//At this point, the grid should be rendered with a single tr
//and a single td spanning that tr. And the td should contain
//your loading .gif nice and centered.
//Now set the grid with the proper collection and fetch it.
myGrid.collection = myCollection
myCollection.fetch({success: function(){
    myGrid.render(); //This should remove the loading .gif and show your collection
}});

我对jsFiddle并没有真正的经验。但尝试一下，它应该会起作用。注意：我习惯于在CoffeeScript中工作，所以如果我的语法错误，我很抱歉。