Question

我使用Kendo UI设置了一个分层网格，我需要一种按名称排序的方法。

我设置了字母按钮，用于过滤第一个字母等于所点击按钮字母的名称，但不能正确过滤。

加载正常，所有数据都可用。当我单击一个字母时，您展开的第一行中没有任何变化，并且过滤器开始处理您在第一行之后展开的行，即使该变量已设置。有关问题的说明，请参见底部的图片。

模板

<script type="text/x-kendo-template" id="client-report-detail-template">
    # var active, inactive; $.each(data.clients, function(key, client) { #

        #if(client.status == 20) { active = 1; } else { active = 0; } #
        #if(client.status != 20) { inactive = 1; } else { inactive = 0 } #

        #if(sortBy.length > 0 && sortBy == client.administration_name[0]) { #
            <div class="client-report-detail-container">
                <div class="client-report-detail-pane">#= client.administration_name #</p></div>
                <div class="client-report-detail-pane">#= client.is_new #</p></div>
                <div class="client-report-detail-pane">#= active #</p></div>
                <div class="client-report-detail-pane">#= inactive #</p></div>
            </div>
        # } #

        #if(sortBy.length == 0) { #
            <div class="client-report-detail-container">
                <div class="client-report-detail-pane">#= client.administration_name #</p></div>
                <div class="client-report-detail-pane">#= client.is_new #</p></div>
                <div class="client-report-detail-pane">#= active #</p></div>
                <div class="client-report-detail-pane">#= inactive #</p></div>
            </div>
        # } #
    # }); #
</script>

按钮（使用Laravel＆＃39; s Blade）

@foreach(range('A', 'Z') as $letter)
    <button data-type="name" data-value="{{ $letter }}" class="k-button bizme-button-round filter-text fcl">{{ $letter }}</button>
@endforeach

到目前为止，当您点击其中一个按钮

时，我发生了什么

$(".fcl").on('click tap', function() {
    sortByLetter = $(this).data().value;

    $("#client-report-grid-container").data("kendoGrid").refresh();
});

网格设置和详细信息init

$("#client-report-grid-container").kendoGrid({
    dataSource: {
        data: gridData,
        pageSize: 15
    },
    detailTemplate: kendo.template($("#client-report-detail-template").html()),
    detailInit: detailInit,
    columns: [
        {
            field: "date",
            title: "{{ trans('form.month') }}"
        },
        {
            field: "new"
        },
        {
            field: "active"
        },
        {
            field: "inactive"
        }
    ]
});

function detailInit(){
    $.each(this.dataSource.data(), function(key, data) {
        data.sortBy = sortByLetter;
    });
};

任何人都知道如何解决这个问题？

Answer 1

detailTemplate在detailInit之前运行，会在事件发生之前呈现详细信息。因此，在模板中，sortBy尚未设置。然后事件运行并设置它。这就是它第二次运作的原因。要检查这一点，请在console.log("detailInit")事件的第一行添加detailInit，在模板内添加# console.log("template"); #并检查控制台。

我建议修复此问题，即在网格的dataBound事件中设置排序值，而不是detailInit事件：

dataBound: function()
{
    $.each(this.dataSource.data(), function(key, data) {
        data.sortBy = sortByLetter;
    });
}

就像那样。任何时候网格的refresh()方法运行时都会调用dataBound，因此在呈现详细信息之前会设置sortBy值，因此模板可以读取正确的sortBy值

Working demo

剑道UI模板刷新

1 个答案: