Question

我正在使用KendoUI网格，它很棒，但它在移动设备上反应不佳，所以我希望实现这个responsive data table idea。它基本上隐藏了标题，使所有单元格显示：阻止它们堆叠，然后使用td:before{content:"td header title"}在td的左侧创建一个虚假标题。

唯一的一点是，这将适用于许多不同的表格，包含未知的thead字段，所以我不能这样做

td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
etc

理想情况下，我会将标题列标题应用于TD，以便它呈现<td data-title="headerTitle">data</td>。然后在CSS中，我可以这样做：

td:before { content: attr(data-title); }

那会很完美，但我不确定这是可能的。也许别人有其他想法。

JS Fiddle Link

例如：<td data-title="name">Jane</td>

编辑：看起来我将使用jQuery解决方案：

function tableResizer() {
    var headerTitleArray = [];

    // create array of table header titles
    $('.k-grid-header-wrap th').each(function () {
        headerTitleArray.push($(this).attr('data-title'));
    });

    // append tables headers to each td
    $('.k-grid-content tr').each(function () {
        $(this).find('td').each(function (i) {
            if (typeof headerTitleArray[i] !== 'undefined') { // some headers don't have a title
                $(this).prepend('<span class="td-title">' + headerTitleArray[i] + '</span>');
            }
        });
    });
}

Answer 1

我认为您应该使用javascript来做到这一点，例如：

$("td").each(function() {
    $(this).prepend("<span class='before'>" + $(this).data('title') + "</span>");
});

并将课程before设为您的td:before ...

看到这个小提琴：http://jsfiddle.net/TpJyu/4/

将'data-title'应用于Kendo UI Grid TDs？

1 个答案: