1

私はこの HTML コードを持っています。販売列で並べ替えることができません。その方法を教えてください。このソリューションHow to sort numeric with string values in Kendo-Gridを実装しようとしましたが、まだ失敗しました。

<html>
<head>
    <link href="lib/kendo/styles/examples-offline.css" rel="stylesheet">
    <link href="lib/kendo/styles/kendo.common.min.css" rel="stylesheet">
    <link href="lib/kendo/styles/kendo.default.min.css" rel="stylesheet">
    <script src="lib/js/jquery-ui-1.8.2.custom.min.js"></script>    
    <script src="lib/kendo/js/jquery.min.js"></script>
    <script src="lib/kendo/js/kendo.web.min.js"></script>
    <script src="lib/kendo/js/console.js"></script> 
</head>
<body>
<div id="example" class="k-content">

<div class="demo-section">
<table id="grid">
    <thead>
        <tr>
            <th data-field="product">Product</th>
            <th data-field="sale">Sale</th>         
        </tr>
    </thead>
    <tbody>
    <tr style=display:none><td>A</td><td>6,698</td></tr>
    <tr style=display:none><td>B</td><td>10,900</td></tr>   
    <tr style=display:none><td>C</td><td>2,300</td></tr>
    <tr style=display:none><td>D</td><td>700</td></tr>
    </tbody>
</table>

 <script>     
    $(document).ready(function() {
        $("#grid").kendoGrid({          
            dataSource: {               
               pageSize: 200
            },          
            height: 350,               
            sortable: true,     
            filterable: true,           
            groupable: true,            
            pageable: {
                refresh: true,
                pageSizes: true
            },                  
            columns: [ {
                    field: "product",                                               
                    width: 200                      
                } , {               
                    field: "sale",
                    sortable: {
                        compare: function(a, b) {         

                          var x = a.sale.replace(/\,/g,'');
                          var y = b.sale.replace(/\,/g,'');                       
                          return x - y;
                        }
                    },                  
                    filterable: false,      
                    width: 100          
                } 
            ]           
        });

    });

</script>

<style scoped="scoped">
    .demo-section {
        width: 800px;       
    }
    .demo-section h3 {
        margin: 5px 0 15px 0;
        text-align: center;
    }
</style>

</div>
</div>

</body>
</html>
4

1 に答える 1

2

問題は、それが実際には数字であるとは決して言わないsaleため、削除,しても文字列を取得していることです。

あなたがしなければなりません：

オプション 1:kendo.parseInt解析に使用しsaleますnumbers(場合によっては、3桁区切りとしてculture処理されます)。,

sortable: {
    compare: function(a, b) {
        var x = kendo.parseInt(a.sale);
        var y = kendo.parseInt(b.sale);
        console.log(a.sale,x);
        console.log(b.sale,y);
        return x - y;
    }
},

オプション 2: 列が数値であることを宣言し、3 桁区切りで表示するようにします。次に、次DataSourceのようになります。

dataSource: {
    pageSize: 200,
    schema: {
        model: {
            fields : {
                sale : { type : "number" }
            }
        }
    }
},

そしてあなたのcolumns定義：

columns: [
    { field: "product", width: 200 } ,
    { field: "sale", filterable: false, width: 100, format : "{0:##,#}" }
]

注:この 2 番目の方法では、compare関数を定義する必要はありません。したがって、コードは次のようになります。

$("#grid").kendoGrid({
    dataSource: {
        pageSize: 200,
        schema  : {
            model: {
                fields: {
                    sale: { type: "number" }
                }
            }
        }
    },
    height    : 350,
    sortable  : true,
    filterable: true,
    groupable : true,
    pageable  : {
        refresh  : true,
        pageSizes: true
    },
    columns   : [
        { field: "product", width: 200 } ,
        { field: "sale", filterable: false, width: 100, format: "{0:##,#}" }
    ]
});
于 2013-10-27T18:19:19.863 に答える