Kendo UI 2013网格实现父子(展开-折叠)

// 数据准备
var data = [
  { id: 1, name: "Parent 1", hasChildren: true, children: [
    { id: 2, name: "Child 1" },
    { id: 3, name: "Child 2" }
  ]},
  { id: 4, name: "Parent 2", hasChildren: false, children: [] },
  { id: 5, name: "Parent 3", hasChildren: true, children: [
    { id: 6, name: "Child 3" },
    { id: 7, name: "Child 4" }
  ]}
];

// 配置网格
$("#grid").kendoGrid({
  columns: [
    { field: "name", title: "Name" }
  ],
  dataSource: {
    data: data,
    schema: {
      model: {
        fields: {
          name: { type: "string" },
          children: { type: "object" }
        }
      }
    }
  },
  detailInit: function(e) {
    // 设置子级网格的数据源和列配置
    $("<div/>").appendTo(e.detailCell).kendoGrid({
      columns: [
        { field: "name", title: "Name" }
      ],
      dataSource: {
        data: e.data.children,
        schema: {
          model: {
            fields: {
              name: { type: "string" }
            }
          }
        }
      }
    });
  },
  detailExpand: function(e) {
    // 处理父级行的展开操作
    e.masterRow.addClass("k-state-selected");
  },
  detailCollapse: function(e) {
    // 处理父级行的折叠操作
    e.masterRow.removeClass("k-state-selected");
  }
});