使用jQuery清空具有相同數據的行的以下單元格

Question

我有一個簡單的小提琴： http : //jsfiddle.net/anilca/kbfssbd4/

var dataArr = [
    { DayNum: 0, Day: "Sunday", Group: "A" },
    { DayNum: 1, Day: "Sunday", Group: "B" },
    { DayNum: 2, Day: "Sunday", Group: "C" },
    { DayNum: 3, Day: "Monday", Group: "B" },
    { DayNum: 4, Day: "Monday", Group: "A" },
    { DayNum: 5, Day: "Tuesday", Group: "C" },
    { DayNum: 6, Day: "Tuesday", Group: "B" }
];
var grid = $("#grid").kendoGrid({
    dataSource: {
        data: dataArr,
        sort: [
            { field: "DayNum", dir: "asc" },
            { field: "Group", dir: "asc" }
        ],
        schema: {
            model: {
                fields: {
                    DayNum: { type: "number" },
                    Day: { type: "string" },
                    Group: { type: "string" }
                }
            }
        }
    },
    selectable: true,          
    columns: [
        {
            field: "Day",
            title: "Day"
        },
        {
            field: "Group",
            title: "Group"
        }
    ]
}).data("kendoGrid");

我想在適當的一天的首次出現后，為該行的“天”列顯示空單元格。 我的意思是我的目標是在不操作數據的情況下獲得以下屏幕截圖：

我認為有可能在構建kendo網格之后使用jquery來做到這一點。 但是我不知道該怎么做。

提前致謝，

Answer 1

我會使用schema.parse方法。 此方法可以處理數據，但不會更改數據，這很好。 而且不需要jQuery：

parse: function(data) {
    var lastDay = "";

    for (var i = 0; i < data.length; i++) {
        if (lastDay == "" || data[i].Day != lastDay) {
            lastDay = data[i].Day;
        }
        else {
            data[i].Day = "";
        }
    }

    return data;
}

更新小提琴 。

更新：

是的，當我說parse 不會更改數據時，我錯了。 實際上，它發生了變化。 您可以做的是創建虛擬屬性並對其進行操作：

parse: function(data) {
    var lastDay = "";

    for (var i = 0; i < data.length; i++) {
        if (lastDay == "" || data[i].Day != lastDay) {
            lastDay = data[i].Day;
            data[i].DayText = data[i].Day;
        }
        else {
            data[i].DayText = "";
        }
    }

    return data;
}

看到我這次正在使用（並創建） DayText 。 您的第一列定義更改為：

{
    field: "DayText",
    title: "Day"
}

因此，它保持Day屬性不變。 小提琴 。

Answer 2

我在最后添加了一個jQuery-each函數，似乎可以解決問題，請嘗試將其添加到javascript的底部：

var day = "";  // holds latest day value

// for each row...
$('tr').each(function(){
    var thisDay = $(this).find('td:first').html();  // grab the text from the first column
    if (thisDay == day)  // if its the same as last time
    {
        $(this).find('td:first').html('');  // hide it
    }
    day = thisDay;  // hold onto this day
});