我使用的是BackgridJs，它使用Backbonejs来用数据填充网格。
这就是我的代码现在的样子：
<!DOCTYPE html>
<html>
<head>
<title>Terminal</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../js/backgrid/lib/backgrid.css" />
<script src="../js/backgrid/assets/js/jquery.js"></script>
<script src="../js/backgrid/assets/js/underscore.js"></script>
<script src="../js/backgrid/assets/js/backbone.js"></script>
<script src="../js/backgrid/lib/backgrid.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<div class="btn-group">
<a class="btn btn-ledger dropdown-toggle" data-toggle="dropdown" href="#">
Ledger
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">With Margin</a></li>
<li><a tabindex="-1" href="#">Without Margin</a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-company-code dropdown-toggle" id = "company_code" data-toggle="dropdown" href="#">
Company Code
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">DHA</a></li>
<li><a tabindex="-1" href="#">HAC</a></li>
<li><a tabindex="-1" href="#">DHA</a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-cost-centre dropdown-toggle" data-toggle="dropdown" href="#">
Cost centre
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">ALL</a></li>
<li><a tabindex="-1" href="#">NSE-EQ</a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-type dropdown-toggle" data-toggle="dropdown" href="#">
Type
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">CLNT</a></li>
<li><a tabindex="-1" href="#">GENL</a></li>
<li><a tabindex="-1" href="#">MARG</a></li>
</ul>
</div>
<button type="submit" id = "submit" class="btn btn-success">
<i class="icon-circle-arrow-right icon-large"></i> Submit
</button>
<div id="example-1-result" class="backgrid-container"></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../static/js/bootstrap.min.js"></script>
<script>
var Territory = Backbone.Model.extend({});
var Territories = Backbone.Collection.extend({
model: Territory
//url: "examples/territories.json"
});
//var territories = new Territories();
var territory1 = new Territory({ name: "How Bizarre", pop: 20 });
var territory2 = new Territory({ name: "How ", pop: 21 });
var territories = new Territories([territory1,territory2]);
var columns = [{
name: "id", // The key of the model attribute
label: "ID", // The name to display in the header
editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
// Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
cell: Backgrid.IntegerCell.extend({
orderSeparator: ''
})
}, {
name: "name",
label: "Name",
// 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: "pop",
label: "Population",
cell: "integer" // An integer cell is a number cell that displays humanized integers
}, {
name: "percentage",
label: "% of World Population",
cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}, {
name: "date",
label: "Date",
cell: "date",
}, {
name: "url",
label: "URL",
cell: "uri" // Renders the value in an HTML anchor element
}];
// Initialize a new Grid instance
var refreshgrid = function(){
var grid = new Backgrid.Grid({
columns: columns,
collection: territories
});
// Render the grid and attach the root to your HTML document
$("#example-1-result").append(grid.render().$el);
}
// Fetch some countries from the url
//territories.fetch({reset: true});
$(".dropdown-menu li").click(function(){
$(this).closest('.btn-group').children('a').text($(this).text())
});
$('#submit').on('click', function(event) {
url = '/ledger/data'
company_code = $("#company_code").text();
// event.preventDefault(); // To prevent following the link (optional)
$.post( url, { name: "John", time: "2pm" },function(data){
ledgerData = JSON.parse(data);
refreshgrid();
});
//$.post(url,function(response){
// alert(response);
//});
});
</script>
</body>
</html>
当我在Post请求中获得JSON数据时，我不知道如何在refreshgrid（）调用期间将其提供给网格。
在大多数Backbonej示例中，url都在模型中，但对我来说，每次提交后url都会不断变化。那么，我该如何获取数据并将其输入到网格中呢？
默认情况下，Backbone.js使用application/json的Accept标头发出RESTful请求。
如果在集合上设置url属性，那么获取数据就像调用fetch 一样简单
请在此处阅读有关Collection.url属性的更多信息。
var CandiesCollection = Backbone.Collection.extend({url: "/candies"});
var c = new CandiesCollection;
c.fetch();
// GET /candies (Accept: application/json, text/javascript, */*; q=0.01)
更多Backbone为您做神奇工作的例子！
当您保存新型号（或使用
collection.create()）时，Backbone.js将自动发出POST请求同样，当您对现有模型调用
model.save()时，它将自动发出PUT请求。CCD_ 10将发出CCD_ 11请求。
除此之外，更新/刷新也完全一样。