Cheetah Grid

# CGridTreeColumn

Defines tree column.

# Note

CGridTreeColumn component does not have the feature to open and close branch nodes, you must implement it yourself if you need it.

See also the TreeColumn document.

# Vue Template Structure

<div class="demo-grid small">
  <c-grid
    :data="records"
    :frozen-col-count="1">
    <c-grid-tree-column
      :field="treeField"
      width="200"
      @click="onClickRecord"
    >
      Tree
    </c-grid-tree-column>
    <c-grid-column
      field="code"
      width="200"
    >
      Code
    </c-grid-column>
  </c-grid>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const tree = [
  {
    code: "p1",
    children: [
      {
        code: "c1_1",
        children: [
          {
            code: "d1_1_1",
          },
          {
            code: "d1_1_2",
            children: [
              {
                code: "e1_1_2_1",
              },
              {
                code: "e1_1_2_2",
              },
            ],
          },
        ],
      },
      {
        code: "c1_2",
      },
    ],
  },
  {
    code: "p2",
    children: [
      {
        code: "c2_1",
      },
      {
        code: "c2_2",
      },
    ],
  },
];

// Set the parent property to the parent node so that we can keep track of the parent node.
const buffer = [...tree];
while (buffer.length) {
  const node = buffer.shift();
  for (const child of node.children || []) {
    child.parent = node;
    buffer.push(child);
  }
}

/** Gets the specified node and its ancestor nodes. */
function* ancestors(node) {
  let n = node;
  while (n) {
    yield n;
    n = n.parent;
  }
}

export default {
  data() {
    return {
      expands: { p1: true },
    };
  },
  computed: {
    records() {
      const vm = this;

      return buildRecords(tree);

      function buildRecords(nodes) {
        const records = [];
        for (const node of nodes) {
          records.push(node);
          if (vm.expands[node.code]) {
            records.push(...buildRecords(node.children));
          }
        }
        return records;
      }
    },
  },
  methods: {
    treeField(node) {
      const hasChildren = !!node.children?.length;
      const path = [...ancestors(node)].reverse().map((node) => node.code);
      return {
        caption: node.code,
        path,
        nodeType: hasChildren ? "branch" : "leaf",
      };
    },
    onClickRecord(node) {
      this.$set(this.expands, node.code, !this.expands[node.code]);
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

# Slots

# default slot

Use this slot to set the header caption

# Properties

# Optional Properties

Name Type Description Default
field object|string|function Defines a column data field undefined
width number|string Defines a default column width undefined
min-width number|string Defines a column min width undefined
max-width number|string Defines a column max width undefined
column-style object|string|function Defines a column style. Same as the style property of the JS API. undefined
caption string|function Defines a header caption ''
disabled boolean|function Defines disabled. You can also control each record by specifying a function. false
colspan number|string Defines the layout colspan.
This property can be used when defining in the layout-header and layout-body slots.		 undefined
filter string|function Defines a vue filter name undefined
header-action object|string|function Defines a column header action. Same as the headerAction property of the JS API. undefined
header-field string Defines a column header data field undefined
header-icon object|string Defines a header icon undefined
header-style object|string|function Defines a column header style. Same as the headerStyle property of the JS API undefined
header-type object|string|function Defines a column header type. Same as the headerStyle property of the JS API undefined
icon object|string|function Defines an icon. Same as the icon property of the JS API. undefined
message object|string|function Defines a message generation method. Same as the message property of the JS API. undefined
rowspan number|string Defines the layout rowspan.
This property can be used when defining in the layout-header and layout-body slots.		 undefined
sort boolean|string|function Defines a sort. See "Sort by Column" for detail. undefined

# Events

Name Description
click Fired when a click on cell.

# Methods

Name Return Type Description
invalidate --- Redraws the whole grid.

← Define Headers and Columns →