轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)

1.EasyUI树网格组件创建的基本TreeGrid继承自DataGrid，但允许行与行之间的父/子节点关系。许多属性是从数据网格继承的，可以在树网格中使用。为了使用树网格，用户必须定义“树字段”属性来指示哪个字段是树节点。本文将向您展示如何使用TreeGrid组件设置文件夹浏览。

创建一个树形网格。

表id=' test ' title=' Folder Browser ' class=' easui-tree grid ' style=' width :400 px；height :300 px ' URL=' data/tree grid _ data . JSON ' row numbers=' true ' idField=' id ' tree field=' Name ' the and tr Th field=' Name ' width=' 160 ' Name/Th field=' size ' width=' 60 ' align=' right ' size/Th field=' date ' width=' 100 '修改日期/th/tr/thead/table II。EasyUI创建了一个复杂的树网格。树型网格可以在有限的空间内显示具有多列和复杂数据的电子表格。本教程将演示如何在划分的网格和多行标题中排列表格数据，以便组织公共数据。

创建一个树形网格。

table title=' Complex tree grid ' class=' easui-tree grid ' style=' width :550 px；height :250 px ' URL=' data/tree grid 2 _ data . JSON ' row numbers=' true ' show footer=' true ' idField=' id ' treeField=' Region ' the frozed=' true ' tr th field=' Region ' width=' 150 ' Region/th/tr/the ad th tr th colspan=' 4 ' 2009/th colspan=' 4 ' 2010/th/tr th field=' f1 ' width=' 50 ' align='/th字段=' F2 ' width=' 50 ' align=' right ' 2st qrt。/th字段=' F3 ' width=' 50 ' align=' right ' 3st qrt。/th字段='f4 '宽度='50 '对齐='右' 4st qrt。/th第一个字段='f5 '宽度='50 '对齐='右'第一个qrt。/th字段=' F6 ' width=' 50 ' align=' right ' 2st qrt。/th字段=' F7 ' width=' 50 ' align=' right ' 3st qrt。/Th字段=' F8 '宽度=' 50 '对齐='右' 4stqrt。/th/tr/thead/table如您所见，Treegrid的使用方式与Datagrid类似。请使用“冻结”属性定义冻结列，使用列的“colspan”和“rowspan”属性定义多行标题。

以上就是EasyUI创建简单树网和复杂树网的方法，大家分享一下，希望对大家的学习有所帮助。

想了解更多，请查看本文：《轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作（2）》。