基于jQuery的TreeGrid组件详解

一、组件使用范例

html代码：

<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>   

Js代码:

<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",
			columns:[
				{headerText: "<input type='checkbox' class='allcheck'>", 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"}
			],
			data:[
				{name: "北京市销售中心", code: "bj", assignee: "余世维", children:[
					{name: "东城区销售中心" , code: "dc", assignee: "张三"},
					{name: "海淀区销售中心", code: "hd", assignee: "李四", children:[
						{name: "上地南路销售中心", code: "sdnl", assignee: "王五"},
						{name: "上地桥销售中心" , code: "sdq", assignee: "赵六"},
						{name: "上地软件园一期销售中心", code: "sdrjy", assignee: "何其", children: [
							{name: "环宇大厦销售点", assignee: "赵明", code: "hyds"  },
							{name: "启明星辰销售点", assignee: "天竺", code: "qmxc"},
							{name: "中国核电销售点", assignee: "信史", code: "zghd"},
							{name: "图灵销售点", assignee: "图杏", code: "tl"}
						]}
					]},
					{name: "朝阳区销售中心", code: "cy", assignee: "于海武"}
				]},
				{name: "湖北销售中心", code: "hb", assignee: "胡卫宇", children:[]},
				{name: "广东销售中心", code: "gd", assignee: "广深海", children:[]},
				{name: "浙江销售中心", code: "zj", assignee: "浙蝴", children:[]}
			]
		};

		$(document).ready(function(){
			$(".allcheck").click(function(){
				$("#tg1").find("input[name='cblbox']").attr("checked",$(this).attr("checked"));
			});
		 
		});


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

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

		function customLook(row, col){
				
			return "<a href='javascript:void(0)' onclick='showrowname(\""+row.code+"\",\""+row.name+"\")' style='color:blue;'>查看</a>";
		}
		
		function showrowname(code , name){
			alert( code +  name );

		}

		//创建一个组件对象
		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>

效果附图：

二、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层。

   数组元素的属性：
    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对象。

TreeGrid DEMO下载地址(未更新)