基于jQuery的TreeGrid组件详解

时间：2023-11-21 20:27:20

一、TreeGrid组件相关的类

1、TreeGrid(_config)

_config：json格式的数据，组件所需要的数据都通过该参数提供。

2、TreeGridItem(_root, _rowId, _rowIndex, _rowData)

_root：显示组件实例的目标容器对象。

_rowId：选中行的id。

_rowIndex：选中行的索引。

_rowData：json格式的行数据。

二、_config参数详解

id：组件实例的id。

width：组件实例的宽度。

renderTo：用于显示组件实例的容器对象的id。一般用div作为容器。

headerAlign：标题行的对齐方式。

headerHeight：标题行的高度。

dataAlign：数据行的对齐方式。

indentation：层级缩进量。

folderColumnIndex：显示图标的数据列的索引，从0开始。

folderOpenIcon：节点展开时的图标。

folderCloseIcon：节点关闭时的图标。

defaultLeafIcon：叶节点的图标。

hoverRowBackground：鼠标滑过数据行时，背景色是否改变。

itemClick：单击数据行后触发的事件。事件方法包含三个参数，分别是：行的id、行的索引、行数据。

expandLayer：初始展开层数，默认只展开第1层。

columns：值为数组，数组元素为json对象。定义数据栏相关信息。

数组元素的属性：

headerText：栏的标题。

dataField：栏数据对应的字段名。

headerAlign：栏头对齐方式。

dataAlign：栏数据对齐方式。

width：栏的宽度。

handler：通过指定的方法来自定义栏数据。

folderHidden：在文件夹行隐藏单元格值。

data：组件的数据集。

三、TreeGrid的方法

show：显示填充数据后的组件对象。

expandAll：展开、关闭所有节点。该方法有一个参数，参数值为Y时表示展开，参数值为N时表示关闭。

getSelectedItem：获取当前选中的数据行，返回TreeGridItem对象。

四、TreeGridItem组件

1、组件属性

id：数据行的id。

index：数据行的索引。

data：json格式的行数据。

2、组件方法

getParent：获取父数据行。方法返回TreeGridItem对象。

getChildren：获取子数据行集。方法返回一个数组，数组元素为TreeGridItem对象。

五、组件使用范例

  1. <input type="button" value="关闭所有节点" onclick="expandAll('N')">
  2. <input type="button" value="展开所有节点" onclick="expandAll('Y')">
  3. <input type="button" value="取得当前行的数据" onclick="selectedItem()"><br>
  4. 当前选中的行：<input type="text" id="currentRow" size="110">
  5. <div id="div1"></div>
  1. <script language="javascript">
  2. var config = {
  3. id: "tg1",
  4. width: "800",
  5. renderTo: "div1",
  6. headerAlign: "left",
  7. headerHeight: "30",
  8. dataAlign: "left",
  9. indentation: "20",
  10. folderOpenIcon: "images/folderOpen.gif",
  11. folderCloseIcon: "images/folderClose.gif",
  12. defaultLeafIcon: "images/defaultLeaf.gif",
  13. hoverRowBackground: "false",
  14. folderColumnIndex: "1",
  15. itemClick: "itemClickEvent",
  16. expandLayer: 1,
  17. columns:[
  18. {headerText: "", headerAlign: "center", dataAlign: "center", width: "20", handler: "customCheckBox"},
  19. {headerText: "名称", dataField: "name", headerAlign: "center", handler: "customOrgName"},
  20. {headerText: "拼音码", dataField: "code", headerAlign: "center", dataAlign: "center", width: "100"},
  21. {headerText: "负责人", dataField: "assignee", headerAlign: "center", dataAlign: "center", width: "100"},
  22. {headerText: "查看", headerAlign: "center", dataAlign: "center", width: "50", handler: "customLook", folderHidden: true}
  23. ],
  24. data:[
  25. {name: "城区分公司", code: "CQ", assignee: "", children:[
  26. {name: "城区卡品分销中心"},
  27. {name: "先锋服务厅", children:[
  28. {name: "chlid1"},
  29. {name: "chlid2"},
  30. {name: "chlid3", children: [
  31. {name: "chlid3-1"},
  32. {name: "chlid3-2"},
  33. {name: "chlid3-3"},
  34. {name: "chlid3-4"}
  35. ]}
  36. ]},
  37. {name: "半环服务厅"}
  38. ]},
  39. {name: "清新分公司", code: "QX", assignee: "", children:[]},
  40. {name: "英德分公司", code: "YD", assignee: "", children:[]},
  41. {name: "佛冈分公司", code: "FG", assignee: "", children:[]}
  42. ]
  43. };
  44. /*
  45. 单击数据行后触发该事件
  46. id：行的id
  47. index：行的索引。
  48. data：json格式的行数据对象。
  49. */
  50. function itemClickEvent(id, index, data){
  51. jQuery("#currentRow").val(id + ", " + index + ", " + TreeGrid.json2str(data));
  52. }
  53. /*
  54. 通过指定的方法来自定义栏数据
  55. */
  56. function customCheckBox(row, col){
  57. return "<input type='checkbox'>";
  58. }
  59. function customOrgName(row, col){
  60. var name = row[col.dataField] || "";
  61. return name;
  62. }
  63. function customLook(row, col){
  64. return "<a href='' style='color:blue;'>查看</a>";
  65. }
  66. //创建一个组件对象
  67. var treeGrid = new TreeGrid(config);
  68. treeGrid.show();
  69. /*
  70. 展开、关闭所有节点。
  71. isOpen=Y表示展开，isOpen=N表示关闭
  72. */
  73. function expandAll(isOpen){
  74. treeGrid.expandAll(isOpen);
  75. }
  76. /*
  77. 取得当前选中的行，方法返回TreeGridItem对象
  78. */
  79. function selectedItem(){
  80. var treeGridItem = treeGrid.getSelectedItem();
  81. if(treeGridItem!=null){
  82. //获取数据行属性值
  83. //alert(treeGridItem.id + ", " + treeGridItem.index + ", " + treeGridItem.data.name);
  84. //获取父数据行
  85. var parent = treeGridItem.getParent();
  86. if(parent!=null){
  87. //jQuery("#currentRow").val(parent.data.name);
  88. }
  89. //获取子数据行集
  90. var children = treeGridItem.getChildren();
  91. if(children!=null && children.length>0){
  92. jQuery("#currentRow").val(children[0].data.name);
  93. }
  94. }
  95. }
  96. </script>

基于jQuery的TreeGrid组件详解

相关文章