Question

我有这个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>

Answer 1

问题在于，您永远不会说sale实际上是一个数字，所以尽管您删除了,，但他们仍然会收到字符串。

你必须这样做：

选项1：使用kendo.parseInt将sale解析为numbers（取决于您的culture，它会将,作为千位分隔符处理。）< / p>

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：声明该列是一个数字，并说它显示千位分隔符。那么你DataSource就是：

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

和你columns定义：

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

注意：对于第二种选择，您无需定义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:##,#}" }
    ]
});

KendoUI：无法在网格中使用逗号对销售列进行排序

1 个答案: