0

我正在使用 KendoUI Grid，它很棒，但它在移动设备上响应不佳，所以我正在寻找实现这个响应式数据表的想法。它基本上隐藏了标题，使所有单元格显示：阻止它们堆叠，然后在 td 的左侧创建一个人造标题td:before{content:"td header title"}。

唯一的事情是，这将适用于许多具有未知主题字段的不同表，所以我不能这样做

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小提琴链接

前任：<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>');
            }
        });
    });
}
4

1 回答 1

2

我认为您应该使用 javascript 来执行此操作，例如：

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

并以班级before风格为您的td:before...

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

于 2013-04-18T20:52:45.830 回答