jqGrid TreeGrid - Adjacency

jqGrid v4.6

by 1004lucifer

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-kr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<table id="tree"></table>
<div id="pager"></div>

JavaScript

var serverJsonData = {
  rows: [
    { emp_id: '10', name: 'Albert', salary: '1000.00', boss_id: null, level: 0, isLeaf: 'false', loaded: 'true', expanded: 'true' },
    { emp_id: '11', name: 'Bert', salary: '900.00', boss_id: '10', level: 1, isLeaf: 'true', loaded: 'true', expanded: 'true' },
    { emp_id: '12', name: 'Chuck', salary: '900.00', boss_id: '10', level: 1, isLeaf: 'false', loaded: 'true', expanded: 'true' },
    { emp_id: '13', name: 'Donna', salary: '800.00', boss_id: '12', level: 2, isLeaf: 'true', loaded: 'true', expanded: 'true' },
    { emp_id: '14', name: 'Eddie', salary: '700.00', boss_id: '12', level: 2, isLeaf: 'true', loaded: 'true', expanded: 'true' },
    { emp_id: '15', name: 'Fred', salary: '600.00', boss_id: '12', level: 2, isLeaf: 'true', loaded: 'true', expanded: 'true' }
  ],
  total: 6,
  page: 1
};

jQuery('#tree').jqGrid({
  url: '/echo/json/',
  mtype: 'POST',
  postData: { json: JSON.stringify(serverJsonData) },
  datatype: 'json',
  colModel: [
    {
      name: 'emp_id',
      index: 'emp_id',
      sorttype: 'int',
      key: true,
      hidden: true
    }, {
      name: 'name',
      index: 'name',
      sorttype: 'string',
      label: 'Employee',
      width: 170
    }, {
      name: 'salary',
      index: 'salary',
      sorttype: 'numeric',
      label: 'Salary',
      align: 'right',
      width: 90
    }, {
      name: 'boss_id',
      hidden: true
    }
  ],
  width: '780',
  hoverrows: false,
  viewrecords: false,
  gridview: true,
  height: 'auto',
  sortname: 'emp_id',
  scrollrows: true,

  treeGrid: true,
  ExpandColumn: 'name',
  treedatatype: 'json',
  treeGridModel: 'adjacency',
  loadonce: true,
  rowNum: 100,
  treeReader: {
    parent_id_field: 'boss_id',
    level_field: 'level',
    leaf_field: 'isLeaf',
    expanded_field: 'expanded',
    loaded: 'loaded',
    icon_field: 'icon'
  },
  pager: '#pager'
});