0

Kendo UIとknockout.jsを使用してページを表示するMVCサイトがあります。1 つのシナリオは、サーバーからデータベース情報を取得し、$.getJSONこの情報を KendoUI グリッドに表示することです。

<div data-bind="kendoGrid:{sortable:true, data:users, rowTemplate:'userRowTemplate'}>
    <table>
        <thead>
            <tr>
                <th>Username</th>
                <th>First Name</th>
                <th>Last Name</th>                   
            </tr>
        </thead> </table>
</div>

<script type="text/html">
    <tr>
        <td data-bind="text: Username"></td>
        <td data-bind="text: FirstName"></td>
        <td data-bind="text: LastName"></td>            
    <tr>
</script>

そしてJavaScript：

<script type="text/javascript">
    var ViewModel = function () {
        var self=this;
        self.users=ko.mapping.fromJS([]);
        $getJSON("/UserManagementController/GetUsers",function(data){
            ko.mapping.fromJS(data,{},self.users);
        });                 
    };

    $(document).ready(function(){
        var newViewModel=new ViewModel();
        ko.applyBindings(newViewModel);
    });    
</script>

このデータを特定の列で並べ替え可能にしたい (ここで指定されている列は例のためのものです) が、これをうまく達成できませんでした。このノックアウト剣道プラグインの問題投稿の解決策を試しましたが、単純なオブジェクトではうまく機能しますが、オブザーバブルでは機能しません。だから私の質問は:データベースからMVCコントローラーを介してデータをノックアウトでオブザーバブルにマップし、それらを剣道グリッドに表示する方法ですが、それでもそれらを並べ替えることができますか?

ありがとう、アレックス・バラク

4

3 に答える 3

0

DEFINE CUSTOM COMPARE FUNCTIONは、フィールド定義で比較関数をオーバーライドできるソリューションを提供します。

したがって、次のようなことができます。

$("#grid").kendoGrid({
    dataSource: dataSource,
    sortable: true,
    columns: [{
        field: "item",
        sortable: {
            compare: function(a, b) {
                var valueA = a["item"];
                var valueB = b["item"];

                if (typeof valueA === "function") valueA = valueA();
                if (typeof valueB === "function") valueB = valueB();

                if (this.isNumeric(valueA) && this.isNumeric(valueB))
                {
                    valueA = parseFloat(valueA);
                    valueB = parseFloat(valueB);
                }

                if (valueA && valueA.getTime && valueB && valueB.getTime)
                {
                    valueA = valueA.getTime();
                    valueB = valueB.getTime();
                }

                if (valueA === valueB)
                {
                    return a.__position - b.__position;
                }

                if (valueA == null)
                {
                    return -1;
                }

                if (valueB == null)
                {
                    return 1;
                }

                if (valueA.localeCompare)
                {
                    return valueA.localeCompare(valueB);
                }

                return valueA > valueB ? 1 : -1;
            }
        }
    }]
});

private isNumeric(input)
    {
        return (input - 0) == input && ('' + input).trim().length > 0;
    }

compare メソッドは剣道スクリプトから盗用されていますが、プロパティが typeof function (ko.observable とは何か) である場所が変更され、値がアンラップされます。さらに、数字のサポートを追加しました。

于 2015-12-17T11:31:55.993 に答える