javascript - Kendo UI 模板刷新

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 的 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();
});

网格设置和细节初始化

$("#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 还没有设置。然后事件运行并设置它。这就是它第二次起作用的原因。要检查这一点，请在 detailInit 事件的第一行中添加一个 console.log("detailInit") 并添加一个 # console.log("template") ; # 在模板中检查控制台。

我的解决办法是在网格的 dataBound 中设置排序值。事件而不是 detailInit 事件:

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

就是这样。 dataBound 随时调用网格的 refresh()方法运行，因此 sortBy 值在呈现细节之前设置，因此模板可以读取正确的 sortBy 值。

Working demo .