基于jQuery的TreeGrid组件详解

一、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对象。

 

五、组件使用范例

<input type="button" value="关闭所有节点" onclick="expandAll('N')">
<input type="button" value="展开所有节点" onclick="expandAll('Y')">
<input type="button" value="取得当前行的数据" onclick="selectedItem()"><br>
当前选中的行：<input type="text" id="currentRow" size="110">

<div id="div1"></div> 

 

<script language="javascript">
	var config = {
		id: "tg1",
		width: "800",
		renderTo: "div1",
		headerAlign: "left",
		headerHeight: "30",
		dataAlign: "left",
		indentation: "20",
		folderOpenIcon: "images/folderOpen.gif",
		folderCloseIcon: "images/folderClose.gif",
		defaultLeafIcon: "images/defaultLeaf.gif",
		hoverRowBackground: "false",
		folderColumnIndex: "1",
		itemClick: "itemClickEvent",
		expandLayer: 1,
		columns:[
			{headerText: "", headerAlign: "center", dataAlign: "center", width: "20", handler: "customCheckBox"},
			{headerText: "名称", dataField: "name", headerAlign: "center", handler: "customOrgName"},
			{headerText: "拼音码", dataField: "code", headerAlign: "center", dataAlign: "center", width: "100"},
			{headerText: "负责人", dataField: "assignee", headerAlign: "center", dataAlign: "center", width: "100"},
			{headerText: "查看", headerAlign: "center", dataAlign: "center", width: "50", handler: "customLook", folderHidden: true}
		],
		data:[
			{name: "城区分公司", code: "CQ", assignee: "", children:[
				{name: "城区卡品分销中心"},
				{name: "先锋服务厅", children:[
					{name: "chlid1"},
					{name: "chlid2"},
					{name: "chlid3", children: [
						{name: "chlid3-1"},
						{name: "chlid3-2"},
						{name: "chlid3-3"},
						{name: "chlid3-4"}
					]}
				]},
				{name: "半环服务厅"}
			]},
			{name: "清新分公司", code: "QX", assignee: "", children:[]},
			{name: "英德分公司", code: "YD", assignee: "", children:[]},
			{name: "佛冈分公司", code: "FG", assignee: "", children:[]}
		]
	};

	/*
		单击数据行后触发该事件
		id：行的id
		index：行的索引。
		data：json格式的行数据对象。
	*/
	function itemClickEvent(id, index, data){
		jQuery("#currentRow").val(id + ", " + index + ", " + TreeGrid.json2str(data));
	}
	
	/*
		通过指定的方法来自定义栏数据
	*/
	function customCheckBox(row, col){
		return "<input type='checkbox'>";
	}

	function customOrgName(row, col){
		var name = row[col.dataField] || "";
		return name;
	}

	function customLook(row, col){
		return "<a href='' style='color:blue;'>查看</a>";
	}

	//创建一个组件对象
	var treeGrid = new TreeGrid(config);
	treeGrid.show();
	
	/*
		展开、关闭所有节点。
		isOpen=Y表示展开，isOpen=N表示关闭
	*/
	function expandAll(isOpen){
		treeGrid.expandAll(isOpen);
	}
	
	/*
		取得当前选中的行，方法返回TreeGridItem对象
	*/
	function selectedItem(){
		var treeGridItem = treeGrid.getSelectedItem();
		if(treeGridItem!=null){
			//获取数据行属性值
			//alert(treeGridItem.id + ", " + treeGridItem.index + ", " + treeGridItem.data.name);
			
			//获取父数据行
			var parent = treeGridItem.getParent();
			if(parent!=null){
				//jQuery("#currentRow").val(parent.data.name);
			}
			
			//获取子数据行集
			var children = treeGridItem.getChildren();
			if(children!=null && children.length>0){
				jQuery("#currentRow").val(children[0].data.name);
			}
		}
	}
</script>

  

评论

20 楼 alexzchen 2015-07-20  

很好很强大，提个建议，tr里的open属性回合h5的open冲突，建议换个名字，比方opened

19 楼 hackerjj 2014-08-22  

张小萍Amy 写道

怎么动态添加父节点,子节点呢?求解释

18 楼 hackerjj 2014-08-22  

请教楼主，如何添加一行数据

17 楼 yutianrui 2014-06-18  

请教一下，为什么这些代码放在vs2012中，运行时展示不出TreeGrid表格呢，而直接运行demo文件就可以

16 楼 xiaoqiang10784 2014-04-11  

很好用的，感谢了。

15 楼 likaiyihou51 2013-12-25  

楼主能给做个数据库取值的例子么，拼data 这个参数 拼不出来

14 楼 bm030 2013-11-11  

sunlea 写道

如果：
1、上边增加title行
2、下边增加数据统计、分页、翻页显示行；
3、fit全屏模式；
4、增加数据行右键菜单功能；
5、后台json异步lazy懒加载
那更加完美。

miniui功能强大界面也很漂亮，但有版权。

13 楼 jindiaojy 2013-10-14  

woweipingzui 写道

解决了...还想知道如何动态给data赋值呢？？

12 楼 张小萍Amy 2013-08-27  

怎么动态添加父节点,子节点呢?求解释

11 楼 sunlea 2013-01-26  

如果：
1、上边增加title行
2、下边增加数据统计、分页、翻页显示行；
3、fit全屏模式；
4、增加数据行右键菜单功能；
5、后台json异步lazy懒加载
那更加完美。

miniui功能强大界面也很漂亮，但有版权。

10 楼 sunlea 2013-01-26  

woweipingzui 写道

怎么让他初始化的时候节点就是关闭的呢

找到以下代码：
//创建一个组件对象
var treeGrid = new TreeGrid(config);
treeGrid.show();
//加入下行代码默认全关闭节点
treeGrid.expandAll("N");

9 楼 Coffice 2012-12-07  

我的怎么显示不出treegrid呢？望指点指点。

8 楼 woweipingzui 2012-07-13  

解决了...还想知道如何动态给data赋值呢？？

7 楼 woweipingzui 2012-07-13  

怎么让他初始化的时候节点就是关闭的呢

6 楼 hdnlove 2012-03-19  

您好，  我用你的demo  怎么还实现不了 提示TreeGrid 没定义。但我引用TreeGrid.js了 ，在创建对象的时候 就不行。

5 楼 suxinsheng 2012-03-13  

能不能给一个动态从数据库读取数据的例子？

4 楼 raymond.chen 2011-08-17  

已经升级到jquery-1.6.2版本了

3 楼 chensong215 2011-08-09  

很好，很强大，但不知楼主能否升级下jquery的版本，现在只能用jquery-1.3.2，如果用jquery-1.6.2就会报错，谢谢！

2 楼 can4you 2011-07-06  

如何动态给data赋值啊  ？？？

1 楼 wushanlang 2011-03-02  

楼主  你的这个文件下载不了啊