使用 jquery 清空具有相同数据的行的以下单元格

Question

我有这个简单的 fiddle： 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-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
});

使用 jquery 清空具有相同数据的行的以下单元格

Emptying the following cell of row having the same data using jquery

javascript

jquery

kendo-ui

kendo-grid