Kendo 网格：如何对绑定到简单 json 对象的列进行排序（和过滤）

Question

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

我参考了网上的example（如果我添加了sortable和filterable，它们在category字段上也不起作用），并且稍微修改了一下，只是为了使用非常简单的本地json 数据（以便在学习网格时更容易看到我正在使用的内容。

因此，查看我要排序和过滤的类别字段，在我的列定义中我有 ....

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

并且在数据源中，类别字段由一个简单的 json 对象组成，该对象具有 2 个字段代码和描述（将其编码为值字段，描述是要显示的内容）...

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'},
]

所以我需要该组合以正确的值填充该字段。

在此先感谢您的帮助！

Answer 1

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

Kendo 网格：如何对绑定到简单 json 对象的列进行排序（和过滤）

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

javascript

jquery

kendo-ui

kendo-grid