更改列名敲除 simplegrid

Question

我能够将数据绑定到剔除简单网格，但是否可以动态更改列名。列的名称将是用户在文本框中输入的内容。所以这是我的视图模型

var initialData = [{
name: "Well-Travelled Kitten",
sales: 352,
price: 75.95,
whatever: 10
 }, {
    name: "Speedy Coyote",
sales: 89,
price: 190.00,
whatever: 100
}, ];

function viewModel() {
var self = this;
self.queryResult = ko.observableArray();
this.update = function (data) {
    //this is an ajax call and return dateset back
    $.each(initialData, function (index, item) {
        self.queryResult.push(item);
    });


};

  self.gridViewModel = new ko.simpleGrid.viewModel({
   data: self.queryResult,
    columns: [
        { headerText: "Name", rowText: "name" },
        { headerText: "Sales ", rowText: "sales" },
        { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
    ],
    pageSize: 4
});


 }

var PagedGridModel = function (items) {
    this.items = ko.observableArray(items);

    this.jumpToFirstPage = function () {
     this.gridViewModel.currentPageIndex(0);
};

};

  ko.applyBindings(new viewModel());

见小提琴here

现在只是为了演示，是否可以将列名设置为“Well-Travelled Kitten” 而不是当前硬编码的列“名称”？

在我的现实生活场景中，用户将在文本框中输入一些文本，当我们加载网格时，列名将更改为在文本框中输入的内容。我怎样才能做到这一点？

Answer 1

是的，您可以将列名设置为视图模型中的可观察对象。更新后的小提琴：http://jsfiddle.net/DoctorMick/FB6LA/37/。主要变化有：

function viewModel() {
    var self = this;
    self.NameTitle = ko.observable("Some title");
    self.queryResult = ko.observableArray();
    this.update = function (data) {
        self.NameTitle(initialData[0].name); 
        //YOUR EXISTING CODE...
    }

    self.gridViewModel = new ko.simpleGrid.viewModel({
       data: self.queryResult,
        columns: [
            { headerText: self.NameTitle, rowText: "name" },
            { headerText: "Sales ", rowText: "sales" },
            { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
        ],
        pageSize: 4
    });
}