javascript - 剑道网格 : How to sort (and filter) a column bound to a simple json object

Question

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

我已上网example (如果我添加可排序和可过滤，它们也不适用于类别字段)，并稍微修改它，只是为了使用非常简单的本地 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>