Question

我在层次结构中有一个父表和两个子表。我要设计的子表位于单独的选项卡中。

这是我已经尝试过的示例。 https://dojo.telerik.com/ubiZewAh

Answer 1

我认为被否决的人可能正在寻找更多信息。如果我理解正确，则希望每个表都位于其自己的标签中。似乎没有在使用引导程序。但是，由于您可以控制用于数据的模板，因此您需要自己提供此功能。单击箭头后，将提取数据。因此，您将需要添加一个选项卡结构并默认显示的第一个表为默认值，而所有其他表则为隐藏状态。您几乎拥有它，但是您需要在屏幕上直观地显示一些选项卡。有关如何设置模板的信息，请参见下面的HTML。我将由您来决定一切的样式。我将为您提供功能。

<div id="detail-template" class="template-container">
    <div class="tabs">
       <div class="tab" data-tab-for="evidence">Evidence</div>
       <div class="tab" data-tab-for="notes">Notes</div>
    </div>
    <div role="tabpanel" class='tab-pane' id="evidence">
        <div class="evidence-grid"></div>
    </div>
    <div role="tabpanel" class='tab-pane' id="notes" style="display:none'>
        <div class="notes-grid"></div>
    </div>
</div>

//Jquery
$(document).ready(function () {
    $('#case-grid').on('click', '.tab', tabClicked);
});

function tabClicked(e) {
    var elClicked = $(this);

    //Hide all panes then show correct one
    $('.tab-pane').hide();
    var paneToShow = elClicked.data('tabFor');
    $('#' + paneToShow).show();

    //I would instead use the active flag on the tabs themselves
    //Style them however you want
    //Take the style off all tabs then add to correct one.
    $('.tab').removeClass('active');
    $(this).addClass('active');
}

如果您想在不需要时节省一些前往后端的行程，则在加载网格init时不会加载子网格。我宁愿点击选项卡。在选定的选项卡窗格中找到网格，然后获取数据。例如，如果用户从不查看“注释”选项卡，则没有理由去获取它。除非您只想以期望的方式呈现它，否则他们会的。另外，您可能希望将tabClicked函数中的类引用更改为相对的，以确保我们仅更新正确的类引用。例如，

更改 $（'。tab-pane'）。hide（）; 至 $（'。tab-pane'，elClicked.closest（'。template-container'））。hide（）;

仔细查看我的回答后，您可能希望在各处使用类引用，因为模板已多次使用。我没有看过剑道生成的代码。但是，在关闭该行时，不会删除子网格的DOM。因此，使用jquery会用相同的ID修改所有内容。因此，例如，您的窗格具有证据ID和注释。您可能需要设置这些数据属性，然后就像我上面所说的那样，相对于单击的元素（选项卡）引用它们

如何将Kendo网格层次结构的两个子级放入选项卡？

1 个答案: