Форматирование сетки данных Knockout js в соответствии со значениями строки

Я использую нокаутную сетку js, как показано в этом примере. /.

Как я могу изменить цвет ячейки в соответствии со значением,

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. нужно добавить событие клика в строки сетки

Могу ли я сделать эти вещи в этой реализации?


knockout.js knockout-3.0
person ExCode    schedule 26.01.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

На мой взгляд, обработчик привязки 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
});
person haim770    schedule 26.01.2014