KendoUI：无法用网格中的逗号排序销售列

我有这个HTML代码，我不能使它在销售专栏上排序，请帮助如何做到这一点，我试图实现这个解决方案How to sort numeric with string values in Kendo-Grid，但仍然失败。KendoUI：无法用网格中的逗号排序销售列

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

来源

2013-10-27 ljn

的问题是，你永远不说sale实际上是一个号码，这样即使你删除,他们仍然得到字符串。

你要做的：

选项1：使用kendo.parseInt解析sale到numbers（取决于您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：声明该列是一个数字，并说要显示它与千位分隔符。然后，你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:##,#}" } 
    ] 
});

来源

2013-10-27 18:19:19 OnaBai

很好的解决方案OnaBai，非常感谢你。我正在尝试这两个选项，选项1不起作用，但选项2效果不错，您的答案对我非常有用，我会在我的声望足够时进行投票:) – ljn

其实我已经测试过选项1张贴答案。在这里（http://jsfiddle.net/OnaBai/WM2qv/）你有一个JSFiddle显示它。 – OnaBai

KendoUI：无法用网格中的逗号排序销售列

回答

相关问题