Table Treegrid

Table Treegrid extension of Bootstrap Table.

On this page

Usage

<script src="extensions/treegrid/bootstrap-table-treegrid.js"></script>

Example

Treegrid

Data Structure

The treegrid requires a flat data structure with parent-child relationships defined by idField and parentIdField:

[
  {
    "id": 1,
    "name": "Root Node 1",
    "pid": 0
  },
  {
    "id": 2,
    "name": "Root Node 2",
    "pid": 0
  },
  {
    "id": 11,
    "name": "Child Node 1.1",
    "pid": 1
  },
  {
    "id": 12,
    "name": "Child Node 1.2",
    "pid": 1
  },
  {
    "id": 111,
    "name": "Grandchild Node 1.1.1",
    "pid": 11
  }
]

Key points:

Each node must have a unique value in the field specified by idField (defaults to id)
The pid field (or your custom parentIdField) contains the parent’s idField value
Root nodes use 0, null, or the value specified in rootParentId
The tree is built automatically by matching parentIdField to parent idField values

Quick Start

$('#table').bootstrapTable({
  url: 'data.json',
  idField: 'id',
  parentIdField: 'pid',
  treeShowField: 'name',
  columns: [
    { field: 'name', title: 'Item Name' }
  ],
  onPostBody: function () {
    $('#table').treegrid({
      treeColumn: 0,
      onChange: function () {
        $('#table').bootstrapTable('resetView')
      }
    })
  }
})

Options

treeEnable

attribute: data-tree-enable
type: Boolean
Detail:

Set true to enable the tree grid.
Default: false

idField

attribute: data-id-field
type: String
Detail:

The field name that uniquely identifies each row in the data. This is used to establish parent-child relationships.
Default: 'id'

parentIdField

attribute: data-parent-id-field
type: String
Detail:

The field name that contains the parent node’s id. Child nodes link to their parent by matching this field to the parent’s idField value. Use 0, null, or rootParentId for root-level nodes.
Default: 'pid'

treeShowField

attribute: data-tree-show-field
type: String
Detail:

The field name to display in the tree structure (typically the name/title field). This field is required by the treegrid extension.
Default: null

rootParentId

attribute: data-root-parent-id
type: String | Number | null
Detail:

The value used to identify root-level nodes in the parentIdField. For example, if your data uses null instead of 0 for root nodes, set this to null.
Default: null

Common Use Cases

Loading from Remote API

$('#table').bootstrapTable({
  url: '/api/tree-data',
  idField: 'id',
  parentIdField: 'parentId',
  treeShowField: 'title',
  columns: [
    { field: 'title', title: 'Title' },
    { field: 'description', title: 'Description' }
  ],
  onPostBody: function () {
    $('#table').treegrid({
      treeColumn: 0,
      onChange: function () {
        $('#table').bootstrapTable('resetView')
      }
    })
  }
})

Using Custom Root Parent Id

If your API returns root nodes with parentId: -1:

$('#table').bootstrapTable({
  rootParentId: -1,
  parentIdField: 'parentId',
  treeShowField: 'title',
  // ... other options
})

Initial State: All Expanded

$('#table').bootstrapTable({
  // ... options
  onPostBody: function () {
    $('#table').treegrid({
      treeColumn: 0,
      initialState: 'expanded',
      onChange: function () {
        $('#table').bootstrapTable('resetView')
      }
    })
  }
})

Initial State: All Collapsed

$('#table').bootstrapTable({
  // ... options
  onPostBody: function () {
    $('#table').treegrid({
      treeColumn: 0,
      initialState: 'collapsed',
      onChange: function () {
        $('#table').bootstrapTable('resetView')
      }
    })
  }
})