1

我用 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;
    });
};

有谁知道如何解决这个问题？

不要判断我的绘画技巧:)

4

1 回答 1

2

发生的情况是detailTemplate运行之前detailInit，细节在事件之前呈现。所以在模板中sortBy还没有设置。然后事件运行并设置它。这就是为什么它在第二次起作用的原因。要检查这一点，请在事件console.log("detailInit")内的第一行和模板内添加 a 并检查控制台。detailInit# console.log("template"); #

我的建议是在网格dataBound事件而不是detailInit事件中设置排序值：

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

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

工作演示。

于 2016-01-07T13:05:29.830 回答