使用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;
}

Updated Fiddle

<强>更新

是的，当我说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属性。 Fiddle

Answer 2

我扔了一个jQuery-每个函数最后似乎都在做伎俩，尝试将它添加到你的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
});