Question

我正在使用knockout js网格，我用同样的方式演示了这个例子。http://jsfiddle.net/rniemeyer/QSRBR/。

如何根据值更改单元格颜色

var initialData = [
    { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
    { name: "Speedy Coyote", sales: 89, price: 190.00 },
    { name: "Furious Lizard", sales: 152, price: 25.00 },
    { name: "Indifferent Monkey", sales: 1, price: 99.95 },
    { name: "Brooding Dragon", sales: 0, price: 6350 },
    { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
    { name: "Optimistic Snail", sales: 420, price: 1.50 }
];

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

    this.addItem = function() {
        this.items.push({ name: "New item", sales: 0, price: 100 });
    };

    this.sortByName = function() {
        this.items.sort(function(a, b) {
            return a.name < b.name ? -1 : 1;
        });
    };

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

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

ko.applyBindings(new PagedGridModel(initialData));


<div class='liveExample'> 

    <div data-bind='simpleGrid: gridViewModel'> </div>

    <button data-bind='click: addItem'>
        Add item
    </button>

    <button data-bind='click: sortByName'>
        Sort by name
    </button>

    <button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
        Jump to first page
    </button>

</div>

我想根据“座位”更改单元格颜色算一下“如果座位数大于100卖的颜色应该是”绿色“
需要将click事件添加到网格行

我可以在这个实现中做这些事吗？

Answer 1

我看到它的方式， gridViewModel 绑定处理程序仅作为教程提供，并不打算用作功能齐全的网格插件，这可能是他们没有打扰的原因为css，style和click处理程序添加绑定。

然而，您仍然可以自己添加缺少的处理程序（在knockout.simpleGrid.3.0.js中更改第51行）：

<td data-bind=\"text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText], click: typeof click == 'function' ? click : function(){}, style: typeof style == 'function' ? style($parent) : {} \"></td>\

然后按如下方式使用：

this.gridViewModel = new ko.simpleGrid.viewModel({
    data: this.items,
    columns: [
        { headerText: "Item Name", rowText: "name", click: function() { alert('clicked'); } },
        { headerText: "Sales Count", rowText: "sales", style: function(item) { if (item.sales>100) return { color: 'green' } } },
        { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
    ],
    pageSize: 4
});

根据行值敲除js数据网格格式

1 个答案: