Kendo Grid:如何对绑定到一个简单json对象的列进行排序(和过滤）

Kendo Grid: How to sort (and filter) a column bound to a simple json object

本文关键字：对象 json 过滤 排序 简单 一个 绑定 Grid Kendo      更新时间：2023-09-26

我看到了很多关于排序的问题，但对于我的简单案例，我找不到任何问题。

我举了一个在线的例子（如果我添加了可排序和可筛选，它们也不适用于类别字段），并对其进行了轻微的修改，只是为了使用非常简单的本地json数据（以便在学习网格时更容易看到我在使用什么。

所以，看看我想要排序和筛选的类别字段，在我的列定义中，我有。。。。

 columns: [
  {
    ...
  {
    field: "Category",
    title: "Category",
    width: "180px",        
    editor: categoryDropDownEditor,
    template: "#=Category.description#"
  },

在数据源中，category字段由s简单的json对象组成，该对象包含2个字段code和description（其中code是value字段，description是显示内容）。。。

var gridData = [
{
....
ProductID : 1,
ProductName : "Chai",
Category : {
    code : '1',
    description : "Beverages",
 },
...
];

我已经将可排序和可筛选属性添加到网格中，但是类别字段显示了排序箭头（单击时会切换），但列数据不进行排序或筛选。

我将如何对描述字段进行排序和筛选以执行这些操作？

注意，我还附带了一个组合单元格编辑器

function createCombo(container, options, data) {
  var input = $('<input name="' + options.field + '" />')
  input.appendTo(container)
  var combobox = input.kendoComboBox({
    autoBind: true,
    filter: "contains",
    placeholder: "select...",
    suggest: true,
    dataTextField: "description",
    dataValueField: "code",
    dataSource: data,
  });

其中数据的形式为

[ 
  {code: 'code1', description: 'desc1'},
  {code: 'code2', description: 'desc2'},
]

因此，我需要组合框来填充具有正确值的字段。

提前感谢您的帮助！

  <script>
    var gridData = [
{
    ProductID: 1,
    ProductName: "Chai",
    Category: {
        code: '1',
        description: "beverages",
    }
},
 {
     ProductID: 1,
     ProductName: "bhai",
     Category: {
         code: '1',
         description: "aceverages",
     }
 },
  {
      ProductID: 1,
      ProductName: "dhai",
      Category: {
          code: '1',
          description: "zeverages",
      }
  }
    ];
    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: gridData,
            height: 550,
            groupable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "ProductID",
                title: "Contact Name",
                width: 200
            }, {
                field: "ProductName",
                title: "Contact Title"
            }, {
                field: "Category.description",
                title: "Category",
                width: "180px",
                template: "#=Category.description#"
            }]
        });
    });
</script>
相关文章：