Kendo ui KendoUI:无法在网格中使用逗号对销售列进行排序_Kendo Ui_Kendo Grid

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

kendo-ui

Kendo ui KendoUI:无法在网格中使用逗号对销售列进行排序,kendo-ui,kendo-grid,Kendo Ui,Kendo Grid,我有这个HTML代码，我不能让它在销售栏排序，请帮助如何做到这一点，我已经尝试实现这个解决方案，但仍然失败 <html> <head> <link href="lib/kendo/styles/examples-offline.css" rel="stylesheet"> <link href="lib/kendo/styles/kendo.common.min.css" rel="stylesheet"> <link

我有这个HTML代码，我不能让它在销售栏排序，请帮助如何做到这一点，我已经尝试实现这个解决方案，但仍然失败

<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>


产品
特价
A6698
B10900
C2300
D700
$（文档）.ready（函数（）{
$（“#网格”）.kendoGrid（{
数据源：{
页面大小：200
},          
身高：350，
可排序：是的，
可过滤：正确，
分组：对，
可分页：{
刷新：是的，
页面大小：正确
},                  
列：[{
字段：“产品”，
宽度：200
} , {               
字段：“销售”，
可排序：{
比较：函数（a，b）{
var x=a.sale.replace（/\，/g'，）；
变量y=b.sale.replace（/\，/g'）；
返回x-y；
}
},                  
可过滤：false，
宽度：100
} 
]           
});
});
.演示部分{
宽度：800px；
}
.演示部分h3{
利润率：5px0.15px0；
文本对齐：居中；
}

问题是，你从来没有说过销售实际上是一个数字，所以尽管你删除了

，

他们仍然得到字符串

你必须做到：

选项1：使用

kendo.parseInt

将

销售

解析为

数字

（取决于您的

文化

，它将作为分隔符处理

，

）

选项2：声明该列是一个数字，并用千位分隔符显示它。那么您的

数据源将是：
dataSource: {
    pageSize: 200,
    schema: {
        model: {
            fields : {
                sale : { type : "number" }
            }
        }
    }
},

您可以列
定义：
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:##,#}" }
    ]
});

很好的解决方案，非常感谢。我尝试了两个选项，选项1不起作用，但选项2效果很好，你的答案对我非常有用，我会在我的声誉足够的时候投票：）事实上，我在发布答案之前已经测试了选项1。这里（）有一个JSFiddle显示它。
$("#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:##,#}" }
    ]
});