treetable 实现动态加载数据

Settings

Setting	Type	Default	Description
branchAttr	string	"ttBranch"	可选，强制打开节点的展开图标，允许将一个没有儿子节点的节点定义为分支节点，在HTML里面以data-tt-branch 属性形式展现.
clickableNodeNames	bool	false	默认false，点击展开图标打开子节点。设置为true时，点击节点名称也打开子节点.
column	int	0	表中要展示为树的列数。
columnElType	string	"td"	展示为树的单元格的类别(th,td or both).
expandable	bool	false	树是否可以展开，可以展开的树包含展开/折叠按钮。
expanderTemplate	string	<a href="#">&nbsp;</a>	展开按钮的html 片段。
indent	int	19	每个分支缩进的像素数。
indenterTemplate	string	<span class="indenter"></span>	折叠按钮的HTML片段
initialState	string	"collapsed"	初始状态，可选值: "expanded" or "collapsed".
nodeIdAttr	string	"ttId"	用来识别节点的数据属性的名称。在HTML里面以 data-tt-id  体现。
parentIdAttr	string	"ttParentId"	用了设置父节点的数据属性的名称. 在HTML里面以data-tt-parent-id 体现。
stringCollapse	string	"Collapse"	折叠按钮的title,国际化使用。
stringExpand	string	"Expand"	展开按钮的title,国际化使用。

Events

Setting	Type	Default	Description
onInitialized	function	null	树初始化完毕后的回调函数.
onNodeCollapse	function	null	节点折叠时的回调函数.
onNodeExpand	function	null	节点展开时的回调函数.
onNodeInitialized	function	null	节点初始化完毕后的回调函数

JS代码：

<script type="text/javascript">
		$(document).ready(function() {
			var load = layer.load();
			 var option = {
	                //theme:'vsStyle',
	                expandLevel : 1,
	                beforeExpand : function($treeTable, id) {
	                    //判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
	                    if ($('.' + id, $treeTable).length) { return; }
	                    var html = "";
	                    $.ajax({
	                    	 type: 'post',
	                    	 url: '${ctx}/file/jxResourceClassification/getDown',
	                    	 data:{id:id},
	                    	 success:function(data){
	                    		 console.log(data);
	                    		 for(var i=0;i<data.length;i++){
	                    			 html += '<tr id="'+data[i].id+'" pId="'+data[i].tempUpId+'"';
	                    			 if(data[i].downId != undefined && data[i].downId != ''){
	                    				 html += 'hasChild ="true"';
	                    			 }
	                    			 html += '><td><a href="${ctx}/file/jxResourceClassification/form?id="'+data[0].id+'>'+
	                                data[i].model.name+
	                                '</a></td><td>'+data[i].sort+'</td>'+
	                                '<td><a href="${ctx}/file/jxResourceClassification/form?id='+data[0].id+'">修改</a>  '+
	                                '<a href="${ctx}/file/jxResourceClassification/delete?id='+data[0].id+'" onclick="return confirmx("确认要删除该类别关系吗？", this.href)">删除</a>  '+
	                                '<a href="${ctx}/file/jxResourceClassification/form?upId='+data[0].id+'&type=0">添加下级</a></td>'+
	                                '</tr>'
	                    		 }
	                    		 $treeTable.addChilds(html);
	                    	 }
	                    })
	                },
	                onSelect : function($treeTable, id) {
	                }

	            }; 
			
			
			
			
			
			
			
			
			
			
			$("#contentTable").treeTable(option);
			$("#tbody").show();
			layer.close(load);
		});
	</script>

HTML代码：

<c:forEach items="${list}" var="jxResourceClassification">
			<tr id="${jxResourceClassification.id}" pId="${jxResourceClassification.tempUpId}" <c:if test="${jxResourceClassification.downId != ''}">hasChild ="true"</c:if> >
				<td><a href="${ctx}/file/jxResourceClassification/form?id=${jxResourceClassification.id}">
					${jxResourceClassification.model.name}
				</a></td>
				<td>
					${jxResourceClassification.sort}
				</td>
				<shiro:hasPermission name="file:jxResourceClassification:edit"><td>
    				<a href="${ctx}/file/jxResourceClassification/form?id=${jxResourceClassification.id}">修改</a>
					<a href="${ctx}/file/jxResourceClassification/delete?id=${jxResourceClassification.id}" onclick="return confirmx('确认要删除该类别关系吗？', this.href)">删除</a>
					<a href="${ctx}/file/jxResourceClassification/form?upId=${jxResourceClassification.id}&type=0">添加下级</a>
				</td></shiro:hasPermission>
			</tr>
		</c:forEach>