0

我正在使用淘汰赛 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>

  1. 如果座位数大于 100，我想根据“座位数”更改单元格颜色 销售颜色应为“绿色”

  2. 需要将点击事件添加到网格行

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

4

1 回答 1

1

在我看来，gridViewModel绑定处理程序仅作为教程提供，并不打算用作功能齐全的网格插件，这可能是他们不费心为css,style和click处理程序添加绑定的原因。

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

<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
});
于 2014-01-26T23:08:04.900 回答