Загрузка значка при загрузке данных в backgrid.js

Question

привет, у меня есть некоторые тяжелые данные. когда моя сетка загружает данные, она ничего не показывает, и вдруг она показывает целые данные. Я не понимаю, как я могу поместить значок загрузки на экран?

если возможно, предоставьте скрипку. сейчас я мой код это: -

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

Это немного поздно, чтобы ответить на этот вопрос для ОП. Но я хотел бы предоставить один для всех, кто сталкивается с этой нитью.

//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, поэтому прошу прощения, если мой синтаксис неправильный.