JQUERY TREETABLE例子
treetable用法小例
treetable⽤法⼩例<link rel="stylesheet" type="text/css" href="/plugins/jquery-treetable-master/css/jquery.treetable.css"><link rel="stylesheet" type="text/css"href="/plugins/jquery-treetable-master/css/jquery.treetable.theme.default.css"><div class="box-body table-responsive no-padding"><table id="treetable"><thead><tr><th width="80px">部门名称</th><th>规章制度</th><th width="120px">操作</th><th width="120px">操作</th></tr></thead><tbody><#list treeDept as o><#if o.parentId == '' || o.parentId == null><tr data-tt-id="${(o.id)!}"><td><span class='folder'/>${o.deptName}</td><td>${o.deptDesc}</td><td><#if permissions?seq_contains('editDept')><a class="btn btn-primary btn-xs" href="/system/dept/edit/${(o.id)!}"> <iclass="fa fa-pencil-square-o"></i> 编辑</a><#else>-</#if></td><td><#if permissions?seq_contains('deleteDept')><a class="btn btn-danger btn-xs"onclick="del('${(o.parentIds)!}')"><i class="fa fa-times"></i> 删除</a><#else>-</#if></td></tr><#else><tr data-tt-id="${(o.id)!}" data-tt-parent-id="${(o.parentId)!}"><td><span class='folder'/>${o.deptName}</td><td>${o.deptDesc}</td><td><#if permissions?seq_contains('editDept')><a class="btn btn-primary btn-xs" href="/system/dept/edit/${(o.id)!}"><iclass="fa fa-pencil-square-o"></i> 编辑</a><#else>-</#if></td><td><#if permissions?seq_contains('deleteDept')><a class="btn btn-danger btn-xs"onclick="del('${(o.parentIds)!}')"><i class="fa fa-times"></i> 删除</a><#else>-</#if></td></tr></#if></#list></tbody><!--t--></table></div><script src="/plugins/jquery-treetable-master/jquery.treetable.js"></script><script>function del(parentIds) {if (confirm("您确定要删除该条记录吗")) {$.ajax({type: "POST",url: "/system/dept/delete",data: {parentIds: parentIds}, // 省级别dataType: 'json',success: function (data) {alert(data.msg);if (data.code == 0) {window.location.href = "/system/dept/list/1"}debugger}, error: function () {alert("错了");}});}}</script><script>$("#treetable").treetable({expandable: true,// 展⽰initialState: "expanded",//默认打开所有节点stringCollapse: '关闭',stringExpand: '展开',onNodeExpand: function () {// 分⽀展开后的回调函数var node = this; //判断当前节点是否已经拥有⼦节点var childSize = $("#treetable").find("[data-tt-parent-id='" + node.id + "']").length;if (childSize > 0) {return;}var data = "pageId=" + node.id; // Render loader/spinner while loading 加载时渲染$.ajax({loading: false, sync: false,// Must be false, otherwise loadBranch happens after showChildren?// url: context + "/document/loadChild.json",data: data,success: function (result) {if (0 == result.code) {if (!com.isNull(result.body)) {if (0 == eval(result.body['chilPages']).length) {//不存在⼦节点var $tr = $("#treetable").find("[data-tt-id='" + node.id + "']");$tr.attr("data-tt-branch", "false");// data-tt-branch 标记当前节点是否是分⽀节点，在树被初始化的时候⽣效 $tr.find("span.indenter").html("");// 移除展开图标return;}var rows = this.getnereateHtml(result.body['chilPages']);$("#treetable").treetable("loadBranch", node, rows);// 插⼊⼦节点$("#treetable").treetable("expandNode", node.id);// 展开⼦节点}} else {alert(result.tip);}}});}});</script>/*** 执⾏新增*/@Permission("addDept")@Log("保存部门")@RequestMapping("/doSave")public String doSave(SysDept dept) {if (StringUtils.isNotBlank(dept.getId())) { //编辑sysDeptService.doUpdate(dept);} else { //新增dept.setId(CommonUtil.UUID());int recond = sysDeptService.doSave(dept);}return redirectTo("/system/dept/list/1");}@Overridepublic int doSave(SysDept dept) {String id = dept.getId();String parentIds = dept.getParentIds();parentIds += "/" + id;dept.setParentIds(parentIds);int record = baseMapper.add(dept);return record;}@Overridepublic int doUpdate(SysDept dept) {String id = dept.getId();String parentIds = dept.getParentIds();parentIds += "/" + id;dept.setParentIds(parentIds);int record = baseMapper.doUpdate(dept);return record;}<select id="selectDeptList" resultMap="BaseResultMap">SELECT id,deptName,deptDesc,parentId, parentName,parentIds,sorts FROM sys_deptwhere delFlag=0<if test="dept!=null and dept.deptName != null and dept.deptName != ''"> and deptName like concat('%',#{dept.deptName},'%')</if><if test="dept!=null and dept.parentIds != null and dept.parentIds != ''"> and parentIds like concat('%',#{dept.parentIds},'%')</if>ORDER BYparentIds</select><insert id="add"parameterType="com.vacomall.entity.SysDept">INSERT INTO sys_dept (id,deptName,deptDesc,parentId,parentName,sorts,deptCode,parentIds)VALUES(#{id,jdbcType=VARCHAR},#{deptName,jdbcType=VARCHAR},#{deptDesc,jdbcType=VARCHAR},#{parentId,jdbcType=VARCHAR},#{parentName,jdbcType=VARCHAR},#{sorts,jdbcType=TINYINT},#{deptCode,jdbcType=VARCHAR},#{parentIds,jdbcType=VARCHAR})</insert><update id="doUpdate" parameterType="com.vacomall.entity.SysDept"> update sys_deptsetdeptName = #{deptName,jdbcType=VARCHAR},deptDesc = #{deptDesc,jdbcType=VARCHAR},parentId = #{parentId,jdbcType=VARCHAR},parentName = #{parentName,jdbcType=VARCHAR},parentIds = #{parentIds,jdbcType=VARCHAR},sorts = #{sorts,jdbcType=TINYINT},deptCode = #{deptCode,jdbcType=VARCHAR}where id = #{id,jdbcType=VARCHAR}</update>。
fastadmin 二级表格
fastadmin 二级表格FastAdmin是一个开源的快速开发后台管理系统，它支持使用二级表格来进行数据展示和管理。
二级表格是一种嵌套的表格，可以在父表格中展示子表格的数据，方便用户进行数据的查看和操作。
在FastAdmin中，我们可以通过使用TreeTable插件来实现二级表格。
TreeTable插件是一款基于jQuery的插件，可以实现将一个普通的表格转换成一个带有树结构的表格。
在FastAdmin中，我们只需要在需要使用二级表格的地方引入TreeTable插件，然后在表格中设置一些参数即可。
下面是一个使用TreeTable插件的简单示例：```html。
<table id="table" class="table table-hover">。
<thead>。
<tr>。
<th>父表格字段1</th>。
<th>父表格字段2</th>。
<th>父表格字段3</th>。
</tr>。
</thead>。
<tbody>。
<tr id="node1" data-tt-id="1" data-tt-parent-id="0">。
<td>子表格字段1</td>。
<td>子表格字段2</td>。
<td>子表格字段3</td>。
</tr>。
<tr id="node2" data-tt-id="2" data-tt-parent-id="0">。
<td>子表格字段1</td>。
<td>子表格字段2</td>。
[应用]Jquery动态生成树形列表
![[应用]Jquery动态生成树形列表](https://img.taocdn.com/s3/m/ab6e83156d85ec3a87c24028915f804d2b168729.png)
Jquery动态生成树形列表实现思路：使用ajax方式发送请求→服务端从数据库中取出结构列表，生成xml文档，回发给客户端→客户端接收到xml数据，进行解析，生成列表，并配置列表样式。
客户端代码：function GetTreeView(odiv) {//odiv为要加载树形控件的div$.ajax({async: false,type: "GET",url: "../Page_Ajax/RS_TreeView.aspx",dataType: "xml",success: function(xmldata) {//新建列表项var ou = $("<ul></ul>").appendTo(odiv);//*//获取factory节点var f = $(xmldata).find("Factory:first");var lfactory = $("<li></li>").appendTo(ou);var dfactory = $("<div></div>").appendTo(lfactory);var ifactory = $("<img src=''/>").appendTo(dfactory);var ifactory2 = $("<img src=''/>").appendTo(dfactory);var sfactory = $("<span></span>").appendTo(dfactory);//设置节点属性$(sfactory).attr("id", $(f).attr("id"));$(sfactory).text($(f).attr("name"));$(dfactory).width($(sfactory).text().length * 15 + 35);//根据数据长度计算div宽度$(sfactory).bind("click", function() {//绑定点击事件});var ufactory = $("<ul></ul>").appendTo(lfactory);//遍历Area节点$(f).find("Area").each(function() {var larea = $("<li></li>").appendTo(ufactory);var darea = $("<div></div>").appendTo(larea);var iarea = $("<img src=''/>").appendTo(darea);var iarea2 = $("<img src=''/>").appendTo(darea);var sarea = $("<span></span>").appendTo(darea);$(sarea).attr("id", $(this).attr("id"));$(sarea).text($(this).attr("name"));$(darea).width($(sarea).text().length * 15 + 35);$(sarea).bind("click", function() {});var uarea = $("<ul></ul>").appendTo(larea);//遍历Team节点$(this).find("Team").each(function() {var lteam = $("<li></li>").appendTo(uarea);var dteam = $("<div></div>").appendTo(lteam);var iteam = $("<img src=''/>").appendTo(dteam);var iteam2 = $("<img src=''/>").appendTo(dteam);var steam = $("<span></span>").appendTo(dteam);$(steam).attr("id", $(this).attr("id"));$(steam).text($(this).attr("name"));$(dteam).width($(steam).text().length * 15 + 35);//绑定单击事件$(steam).bind("click", function() {});var uteam = $("<ul></ul>").appendTo(lteam);//遍历Well节点$(this).find("Well").each(function() {var lwell = $("<li></li>").appendTo(uteam);var dwell = $("<div></div>").appendTo(lwell);var iwell = $("<imgsrc='../Img/treeico/37.png'/>").appendTo(dwell);var swell = $("<span></span>").appendTo(dwell); $(swell).attr("id", $(this).attr("id"));$(swell).text($(this).attr("name"));$(dwell).width($(swell).text().length * 15 + 35);$(swell).bind("click", function() {});});});});//设置样式ou.css("padding-left", "15px");ou.css("margin", "0px");ou.css("margin-top", "3px");var ul = $(ou).find("ul");var li = $(ou).find("li");ul.css("padding-left", "20px");ul.css("padding-top", "5px");ul.css("margin-left", "0px");li.css("margin-left", "0px");li.css("list-style-type", "none");li.css("cursor", "pointer");ou.find("li:has(ul)").find("span").css("font-family", "微软雅黑").css("font-size", "14px");ou.find("li:has(ul)").find("span").hover(function() {$(this).css("color", "#0000ff").css('text-decoration', 'underline');},function() {$(this).css("background-color", "#ffffff").css("color","#000000").css('text-decoration', 'none');});//默认各节点展开，设置图片ou.find("li:has(ul)").find("div img:first").attr("src","../Img/treeico/minus.gif").css('');ou.find("li:has(ul)").find("div img:nth-child(2)").attr("src","../Img/treeico/Open.png");//设置展开收缩事件li.find("ul").prev().find('img').click(function() {$(this).parent().next().toggle();if ($(this).attr("src") == "../Img/treeico/minus.gif") {$(this).attr("src", "../Img/treeico/plus.gif");$(this).next().attr("src", "../Img/treeico/folder.png");}else if ($(this).attr("src") == "../Img/treeico/plus.gif") {$(this).attr("src", "../Img/treeico/minus.gif");$(this).next().attr("src", "../Img/treeico/Open.png");}else if ($(this).attr("src") == "../Img/treeico/Open.png") { $(this).prev().attr("src", "../Img/treeico/plus.gif");$(this).attr("src", "../Img/treeico/folder.png");}else if ($(this).attr("src") == "../Img/treeico/folder.png") { $(this).prev().attr("src", "../Img/treeico/minus.gif");$(this).attr("src", "../Img/treeico/Open.png");}});}});}服务器端代码（RS_TreeView.aspx）：protected void Page_Load(object sender, EventArgs e){XmlDocument xmlDoc = new XmlDocument();XmlElement eRoot = xmlDoc.CreateElement("Factory");eRoot.SetAttribute("id", "factory");eRoot.SetAttribute("name", "采油厂");xmlDoc.AppendChild(eRoot);Factory f = new Factory();f.GetAreaList();foreach (Area a in f.AreaList){XmlElement eArea = xmlDoc.CreateElement("Area");eArea.SetAttribute("id", a.ID);eArea.SetAttribute("name", );eRoot.AppendChild(eArea);a.GetTeamList();foreach (Team t in a.TeamList){XmlElement eTeam = xmlDoc.CreateElement("Team");eTeam.SetAttribute("id", t.ID);eTeam.SetAttribute("name", );eArea.AppendChild(eTeam);t.GetWellList();foreach (Node w in t.WellList){XmlElement eWell = xmlDoc.CreateElement("Well");eWell.SetAttribute("id",w.ID.ToString());eWell.SetAttribute("name",);eTeam.AppendChild(eWell);}}}ResponseXML(xmlDoc.OuterXml);}private void ResponseXML(string xml){Response.ContentType = "text/xml";Response.Charset = "utf-8";Response.Clear();Response.Write("<?xml version=\"1.0\" encoding=\"utf-8\"?>");Response.Write(xml);Response.End();}其中：Factory等是自定义的类，GetAreaList等方法是类中自定义的方法，生成xml文档的代码，可以自行编写。
jquery实现自定义树形表格的方法【自定义树形结构table】
jquery实现⾃定义树形表格的⽅法【⾃定义树形结构table】本⽂实例讲述了jquery实现⾃定义树形表格的⽅法。
分享给⼤家供⼤家参考，具体如下：话不多说，直接上代码（本代码仅提供思路）：function createTables(data, t, p) {$("#datatable" + t + ' tbody').empty();var count = data.length;var html = '';if (count > 0) {for (var i = 0; i < count; i++) {var btn = '';if(data[i]._child && data[i]._child.length > 0){btn = '<i class="layui-icon mt-icon" style="cursor: pointer" data-tid="'+ data[i].category_id +'-'+ data[i].id +'-'+ t +'" data-pid="'+ data[i].category_id +'-'+ data[i].pid +'-'+ t +'"></i> ';}else{btn = '<i class="mt-icon" style="cursor: pointer" data-tid="'+ data[i].category_id +'-'+ data[i].id +'" data-pid="'+data[i].category_id +'-'+ data[i].pid+'"></i> ';}html += '<tr style="">' +'<td style="text-align: left">'+btn + data[i].name + '（' + data[i].title + '）' + '</td>' +'<td>' + (data[i].source_name ? data[i].source_name : '') + '</td>' +'<td>' + data[i].show_time + '</td>' +'<td>' + dataFormat(data[i].current_record, data[i].unit) + '</td>' +'<td>' + dataFormat(data[i].prev_record, data[i].unit) + '</td>' +'<td>' + dataFormat(data[i].last_record, data[i].unit) + '</td>' +'<td>' + dataFormat(data[i].budget, data[i].unit) + '</td>' +'<td>' + dataFormat(data[i].budget_rate, '%') + '</td>' +'<td>' + dataFormat(data[i].record_rate) + '</td>' +'<td>' + dataFormat(data[i].mom, '%') + '</td>' +'<td>' + dataFormat(data[i].yoy, '%') + '</td>' +'<td><i class="layui-icon" style="cursor: pointer" onclick="showHiddenArea(this,' + data[i].category_id + ',' + data[i].data_structure_id + ',' + data[i].time_unit + ',' + t + ');"></i></td> ' +'</tr>';if(data[i]._child && data[i]._child.length > 0){html = createNewTable(data[i]._child,html,1,t);}}} else {html = '<tr><td colspan="12" style="text-align: center"> 暂⽆数据 </td></tr>';}$("#datatable" + t + ' tbody').html(html); // 插⼊的表格initTreeAction(t); // 结构初始化}function createNewTable(data,html,y,t){var counts = data.length;var num = ++y;for (var i = 0; i < counts; i++) {var btn = '';var css = '';css = 'text-indent:'+ (num * 20) +'px;';if(data[i]._child && data[i]._child.length > 0){css = 'text-indent:'+ (num==2?20:(num-1) * 20) +'px;';btn = '<i class="layui-icon mt-icon" style="cursor: pointer" data-tid="'+ data[i].category_id +'-'+ data[i].id +'-'+ t +'" data-pid="'+data[i].category_id +'-'+ data[i].pid+'-'+ t +'" data-type="dir"></i> '; }else{btn = '<i class="mt-icon" style="cursor: pointer" data-tid="'+ data[i].category_id +'-'+ data[i].id +'-'+ t +'" data-pid="'+data[i].category_id +'-'+ data[i].pid +'-'+ t +'" data-type="file"></i> ';}html += '<tr style="display: none">' +'<td style="text-align: left; '+ css +'">'+ btn + data[i].name + '（' + data[i].title + '）' + '</td>' +'<td>' + (data[i].source_name ? data[i].source_name : '') + '</td>' +'<td>' + data[i].show_time + '</td>' +'<td>' + dataFormat(data[i].current_record, data[i].unit) + '</td>' +'<td>' + dataFormat(data[i].prev_record, data[i].unit) + '</td>' +'<td>' + dataFormat(data[i].last_record, data[i].unit) + '</td>' +'<td>' + dataFormat(data[i].budget, data[i].unit) + '</td>' +'<td>' + dataFormat(data[i].budget_rate, '%') + '</td>' +'<td>' + dataFormat(data[i].record_rate) + '</td>' +'<td>' + dataFormat(data[i].mom, '%') + '</td>' +'<td>' + dataFormat(data[i].yoy, '%') + '</td>' +'<td><i class="layui-icon" style="cursor: pointer" onclick="showHiddenArea(this,' + data[i].category_id + ',' + data[i].data_structure_id + ',' + data[i].time_unit + ',' + t + ');"></i></td> ' +'</tr>';if(data[i]._child && data[i]._child.length > 0){html = createNewTable(data[i]._child,html,num,t);}}return html;}function showLowData(obj){var mId = $(obj).attr('data-tid');var isOpen = $(obj).hasClass('open');if (isOpen) {$(obj).removeClass('open');if($(obj).hasClass('layui-icon')){$(obj).html('');}} else {$(obj).addClass('open');if($(obj).hasClass('layui-icon')){$(obj).html('');}}$(obj).parents('tbody').find('tr').each(function () {var mt = $(this).find('.mt-icon');var pid = mt.attr('data-pid');var Open = mt.hasClass('open');var type = mt.attr('data-type');if (mId == pid) {if (isOpen) {$(this).hide();if (type == 'dir' && Open == isOpen) {mt.trigger('click');}} else {$(this).show();}}});}更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家jQuery程序设计有所帮助。
treegrid树形表格的完美运用
treegrid树形表格的完美运⽤⼀问题描述:树形表格TreeGrid在⽇常项⽬中还是运⽤的⽐较多的，哪我们在项⽬中，应该怎么引⼊和使⽤TreeGrid呢?⼆使⽤步骤1.⾸先我们需要在项⽬中，引⼊TreeGrid组件需要引⼊的⽂件<!-- 引⼊treegrid--><link rel="stylesheet" th:href="@{/static/js/plugins/bootstrap-table-treegrid/jquery.treegrid.min.css}"><script type="text/javascript" th:src="@{/static/js/plugins/bootstrap-table-treegrid/bootstrap-table-treegrid.js}"></script><script type="text/javascript" th:src="@{/static/js/plugins/bootstrap-table-treegrid/jquery.treegrid.min.js}"></script> 2. 需要在页⾯定义⼀个容器<div><div><h1></h1><table id="menuTable"></table><br/></div></div> 3. JS代码加载数据1var menus = [[${menus}]]; //后台传递的过来的数据2var $table = $('#menuTable');3// '[{"id":1,"pid":0,"name":"⽤户管理",url:'',icon:'',"permission":{}},' +4 $(function() {5//加载树形表格6 $table.bootstrapTable({7 data:menus,8 idField: 'id',9 dataType:'jsonp',10 columns: [11 { field: 'check', checkbox: true, formatter: function (value, row, index) {12if (row.check == true) {13// console.log(row.serverName);14//设置选中15return { checked: true };16 }17 }18 },19 { field: 'name', title: '名称' },20 { field: 'url', title: '路径' },21 { field: 'icon', title: '图标' },22// {field: 'id', title: '编号', sortable: true, align: 'center'},23 {field: 'pid', title: '所属上级',formatter:'pidFormatter'},24 { field: 'permission', title: '权限值', sortable: true, align: 'center', formatter: 'permissionFormatter' },25 { field: 'operate', title: '操作', align: 'center', events : operateEvents, formatter: 'operateFormatter' },26 ],30//在哪⼀列展开树形31 treeShowField: 'name',32//指定⽗id列33 parentIdField: 'pid',35 onResetView: function(data) {36//console.log('load');37 $table.treegrid({38 initialState: 'collapsed',// 所有节点都折叠39// initialState: 'expanded',// 所有节点都展开，默认展开40 treeColumn: 1,41 expanderExpandedClass: 'mdi mdi-minus', //图标样式42 expanderCollapsedClass: 'mdi mdi-plus',43 onChange: function() {44 $table.bootstrapTable('resetWidth');45 }46 });48//只展开树形的第⼀级节点49 $table.treegrid('getRootNodes').treegrid('expand');51 },52 onCheck:function(row){53var datas = $table.bootstrapTable('getData');54// 勾选⼦类55 selectChilds(datas,row,"id","pid",true);5657// 勾选⽗类58 selectParentChecked(datas,row,"id","pid")5960// 刷新数据61 $table.bootstrapTable('load', datas);62 },6364 onUncheck:function(row){65var datas = $table.bootstrapTable('getData');66 selectChilds(datas,row,"id","pid",false);67 $table.bootstrapTable('load', datas);68 }70 });4 最终效果5 最后实践赶快⾏动起来测试⼀下吧，需要源码的，可以联系我。
基于jquery实现无限级树形菜单
本文实例为大家分享了基于jquery实现无限级树形菜单效果，具有一定的参考价值，具体内容如下实现代码：<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无限级树形菜单</title></head><script src="jquery.min.js"></script><style>ul.a{width:100%;cursor:pointer;padding:0 0px;color:white;}ul.a li{list-style-type:none;cursor:pointer;background:#fff;padding:5px 10px;color:black;width:90%;display:none}.treelist{width:222px;}ul.a div{height:34px;width:100%;background:url(jia.jpg) no-repeat;padding-left:27px;padding-top:6px;color:#333333;font-weight:bold;font-size:15px} .shows{display:block}</style><body><div class="treelist"><ul class="a"><div>ccccc</div> <li>xxxx</li> <li> <ul class="a"> <div>ccccc</div> <li>xxxx</li> <li>xxxx</li> <li> <ul class="a"> <div>ccccc</div> <li> <ul class="a"> <div>ccccc</div> <li>xxxx</li> <li>xxxx</li> <li>xxxx</li> <li>xxxx</li> </ul> </li> <li>xxxx</li> <li>xxxx</li> <li>xxxx</li> </ul> </li> <li>xxxx</li> </ul> </li> <li>xxxx</li> <li>xxxx</li></ul><ul class="a"><div>ccccc</div> <li>xxxx</li> <li>xxxx</li> <li>xxxx</li> <li>xxxx</li></ul><ul class="a"><div>ccccc</div> <li>xxxx</li> <li>xxxx</li> <li>xxxx</li> <li>xxxx</li></ul></div><script>/*$(".a div").each(function(i){ var w=$(this).parents("li").width(); $(this).css("width",w-100+"px");})*/$(".a").click(function(){ $(this).find("li").click(function(event){ return false }) if($(this).hasClass("shows")){ $(this).removeClass("shows"); $(this).find("li").find("ul").removeClass("shows"); $(this).find("li").hide(); $(this).find("div").css("background","url(jia.jpg) no-repeat"); }else{ $(this).addClass("shows"); $(this).find("li").show(); $(this).find("li").find("ul").find("li").hide(); $(this).show(); $(this).find("div").eq(0).css("background","url(jian.jpg) no-repeat"); }})</script></body></html>希望本文所述对大家学习javascript程序设计有所帮助。
jQueryTreeGrid
jQueryTreeGridjQuery TreeGrid为避免重复造轮子，今天简单看了下将jQuery的TreeGrid，现在将其记录如下，希望能够对大家有所帮助。
插件下载地址：http: plugins jquery com treegrid TreeGrid特点在HTML页面中的table 元素中创建TreeGrid简单TreeGrid特点在HTML页面中的table元素中创建TreeGrid简单灵活的javascript实现兼容bootstrap2和3能够保存树的状态TreeGrid用法第一步：初始化插件[javascript] view plaincopy在CODE上查看代码片派生到我的代码片<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.treegrid.js"></script><link rel="stylesheet" href="css/jquery.treegrid.css"><script type="text/javascript">$('.tree').treegrid();</script>第二步：创建表[html] view plaincopy在CODE上查看代码片派生到我的代码片<table class="tree"><tr class="treegrid-1"><td>Root node</td><td>Additional info</td></tr><tr class="treegrid-2 treegrid-parent-1"><td>Node 1-1</td><td>Additional info</td></tr><tr class="treegrid-3 treegrid-parent-1"><td>Node 1-2</td><td>Additional info</td></tr><tr class="treegrid-4 treegrid-parent-3"><td>Node 1-2-1</td><td>Additional info</td></tr></table>第三步：查看结果\其他例子Basic exampleTree on 2nd column exampleSave state exampleTreeGrid for bootstrap 2.xTreeGrid for bootstrap 3.x配置设置设置参数类型默认值描述treeColumn Numeric 0 树中表格中的哪一列initialState String expanded 初始化时树的状态'expanded' - 所有节点都展开'collapsed' - 所有节点都折叠saveState Boolean false 如果是true树的再次加载页面的时候树的状态将保存saveStateMethod String cookie 'cookie' - 保存cookie的状态'hash' - 保存hash的状态saveStateName String tree-grid-state 通过cookie或hash的名字来保存状态expanderTemplate String <span class="treegrid-expander"></span> 点击HTML元素时将折叠或展开分支expanderExpandedClass String treegrid-expander-expanded 当它展开的时候可以使用扩展元素expanderCollapsedClass String treegrid-expander-collapsed 当它折叠的时候可以使用扩展元素indentTemplate String <span class="treegrid-indent"></span> HTML元素将根据深度嵌套节点做填充Public方法方法名称描述示例getRootNodes 返回树的根节点[javascript] view plaincopy在CODE上查看代码片派生到我的代码片// Expand all root nodes$('.tree').treegrid('getRootNodes').treegrid('expand');getNodeId 返回节点的id[javascript] view plaincopy在CODE上查看代码片派生到我的代码片if($('#node-2').treegrid('getNodeId')===2){// Do something with node 2};getParentNodeId 返回父节点的id或如果节点是根就返回null if($('#node-2').treegrid('getParentNodeId')===2){// Do something if parent node Id is 2};getAllNodes 返回树的所有节点 // Find all nodes$('#tree-1').treegrid('getAllNodes').each(function() {if ($(this).treegrid("isLast")) {//Do something with all last nodes}});getParentNode 返回父节点或如果节点是根就返回null // Expand parent node$('#node-2').treegrid('getParentNode').treegrid('collapse');getChildNodes 返回节点的子节点或如果节点是叶子节点则返回null // Expand child nodes$('#node-2').treegrid('getChildNodes').treegrid('expand');getDepth 返回树嵌套分支的深度// Expand all nodes 2nd nesting$('.tree').find('tr').each(function(){if ($(this).treegrid('getDepth')<2){$(this).treegrid('expand');}});isNode 如果元素是节点则返回true $('#tree-1').find('tr').each(function() {if ($(this).treegrid("isNode")) {//Do something}});isLeaf 该节点有叶子吗 // hide all files$('.tree').find('tr').each(function(){if ($(this).treegrid('isLeaf')){$(this).hide();}});isLast 如果节点在最后，则返回true // hide all last elements$('.tree').find('tr').each(function(){if ($(this).treegrid('isLast')){$(this).hide();}});isFirst 如果节点在第一个，则返回true // hide all last elements $('.tree').find('tr').each(function(){if ($(this).treegrid('isFirst')){$(this).hide();}});isExpanded 节点是展开的吗if($('#node-2').treegrid('isExpanded')){// Do something if node expanded};isCollapsed 节点是折叠的吗if($('#node-2').treegrid('isCollapsed')){// Do something if node collapsed};isOneOfParentsCollapsed 至少一个节点是折叠的吗if($('#node-2').treegrid('isOneOfParentCollapsed')){// Do something if one of parent collapsed};expand 展开节点 $('#node-2').treegrid('expand');collapse 折叠节点 $('#node-2').treegrid('collapse');expandRecursive 节点递归展开$('#node-2').treegrid('expandRecursive');collapseRecursive 节点递归折叠$('#node-2').treegrid('collapseRecursive');expandAll 展开所有节点 $('#tree').treegrid('expandAll');collapseAll 折叠所有节点 $('#tree').treegrid('collapseAll');toggle 当处于展开状态的时候将节点折叠当处于折叠状态的时候将节点展开$('#node-2').treegrid('toggle');render 重绘节点及其子节点 $('#node-2').treegrid('render');单元测试。
jquery easyui中treegrid用法的简单实例
项目需求如下图，在服务端返回的json数据中，要经过JS处理，添加复选框，并且复选框需响应JS操作。
在easyui 的treegrid中，没有找到现成的插件，自己需要修改整理，代码如下.代码如下:<table class="easyui-treegrid"style="width:700px;height:250px" url='control_node_json?group_id=$info[id]&acc ess_node=$_REQUEST[access_node]"' idField="id" treeField="title" fit="true" toolbar="#control_node_toolbar_{$info[id]}"><thead><tr><th field="title" width="200px"data-options="formatter:title_formatter">名称</th><th field="name" width="200px">节点</th><th field="status" width="50px">状态</th><th field="remark">备注</th></tr><thead></table><div id="control_node_toolbar_{$info[id]}"><a href="javascript:alert('test');" class="easyui-linkbutton"iconCls="icon-add" plain="true">控制</a></div>上面是整个HTML代码，其中在easyui的好处是，JS调用的各种属性都可以直接写在table 的属性里，直观易懂。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<%@page language="java"contentType="text/html; charset=utf-8"pageEncoding="utf-8"%><!DOCTYPE html PUBLIC"-//W3C//DTD HTML4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"><script type="text/javascript"src="../js/jquery-1.8.0.js"></script><script type="text/javascript"src="../js/jquery.treetable.js"></script><script type="text/javascript"src="../js/jquery-ui.js"></script><link type="text/css"rel="stylesheet"href="../CSS/jquery.treetable.css"><link type="text/css"rel="stylesheet"href="../CSS/jquery.treetable.theme.default.css"> <link type="text/css"rel="stylesheet"href="../CSS/jquery-ui-1.10.2.custom.css"><link type="text/css"rel="stylesheet"href="../CSS/jquery-ui.css"><title>Insert title here</title></head><body><table id="mytreetable"><caption><a href="#"onclick="jQuery('#example-advanced').treetable('expan dAll');return false;">Expand all</a><a href="#"onclick="jQuery('#example-advanced').treetable('colla pseAll');return false;">Collapse all</a></caption><thead><tr><th>Name</th><th>Kind</th><th>Size</th></tr></thead><tbody><tr data-tt-id='1'><td><spanclass='file'>Acknowledgements.rtf</span></td><td>File </td><td>480.95KB</td></tr><tr data-tt-id='2'><td><spanclass='folder'>CHUD</span></td><td>Folder</td><td>--< /td></tr><tr data-tt-id='2-1'data-tt-parent-id='2'><td><spanclass='folder'>amber</span></td><td>Folder</td><td>--</td></tr><tr data-tt-id='2-1-1'data-tt-parent-id='2-1'><td><spanclass='file'>AmberTraceFormats.pdf</span></td><td>Fil e</td><td>124.46KB</td></tr><tr data-tt-id='2-2'data-tt-parent-id='2'><td><spanclass='folder'>BigTop</span></td><td>Folder</td><td>--</td></tr><tr data-tt-id='2-2-1'data-tt-parent-id='2-2'><td><spanclass='file'>BigTopUserGuide.pdf</span></td><td>File</td><td>1314.71KB</td></tr><tr data-tt-id='2-3'data-tt-parent-id='2'><td><spanclass='folder'>Saturn</span></td><td>Folder</td><td>--</td></tr><tr data-tt-id='2-3-1'data-tt-parent-id='2-3'><td><spanclass='file'>SaturnUserGuide.pdf</span></td><td>File< /td><td>694.29KB</td></tr><tr data-tt-id='2-4'data-tt-parent-id='2'><td><spanclass='folder'>Shark</span></td><td>Folder</td><td>--</td></tr><tr data-tt-id='2-4-1'data-tt-parent-id='2-4'><td><spanclass='file'>SharkUserGuide.pdf</span></td><td>File</ td><td>12902.51KB</td></tr><tr data-tt-id='2-5'data-tt-parent-id='2'><td><spanclass='folder'>simg4</span></td><td>Folder</td><td>--</td></tr><tr data-tt-id='2-6'data-tt-parent-id='2'><td><spanclass='folder'>simg4_plus</span></td><td>Folder</td>< td>--</td></tr><tr data-tt-id='2-7'data-tt-parent-id='2'><td><spanclass='folder'>simg5</span></td><td>Folder</td><td>--</td></tr><tr data-tt-id='3'><td><spanclass='folder'>DocSets</span></td><td>Folder</td><td> --</td></tr><tr data-tt-id='3-1'data-tt-parent-id='3'><td><spanclass='folder'>com.apple.ADC_Reference_Library.CoreRe ference.docset</span></td><td>Folder</td><td>--</td>< /tr><tr data-tt-id='3-1-1'data-tt-parent-id='3-1'><td><spanclass='folder'>Contents</span></td><td>Folder</td><td >--</td></tr><tr data-tt-id='3-1-1-1'data-tt-parent-id='3-1-1'><td><spanclass='file'>Info.plist</span></td><td>File</td><td>1.23KB</td></tr><tr data-tt-id='3-1-1-2'data-tt-parent-id='3-1-1'><td><spanclass='folder'>Resources</span></td><td>Folder</td><t d>--</td></tr><tr data-tt-id='3-1-1-2-1'data-tt-parent-id='3-1-1-2'><td><spanclass='file'>docSet.dsidx</span></td><td>File</td><td >41504KB</td></tr><tr data-tt-id='3-1-1-2-2'data-tt-parent-id='3-1-1-2'><td><spanclass='file'>docSet.skidx</span></td><td>File</td><td >43072KB</td></tr><tr data-tt-id='3-1-1-2-3'data-tt-parent-id='3-1-1-2'><td><spanclass='folder'>Documents</span></td><td>Folder</td><t d>--</td></tr><tr data-tt-id='3-1-1-2-3-1'data-tt-parent-id='3-1-1-2-3'><td><spanclass='folder'>documentation</span></td><td>Folder</t d><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-1'data-tt-parent-id='3-1-1-2-3-1'><td><spanclass='folder'>Accessibility</span></td><td>Folder</t d><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1'data-tt-parent-id='3-1-1-2-3-1-1'><td><spanclass='folder'>Reference</span></td><td>Folder</td><t d>--</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-1'data-tt-parent-id='3-1-1-2-3-1-1-1'><td><spanclass='folder'>AccessibilityCarbonRef</span></td><td> Folder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-1-1'data-tt-parent-id='3-1-1-2-3-1-1-1-1'><td><span class='folder'>CarbonAXRefRevisions</span></td><td>Fo lder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-1-1-1'data-tt-parent-id='3-1-1-2-3-1-1-1-1-1'><td><span class='file'>CarbonAXRefRevisions.html</span></td><td >File</td><td>7.44KB</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-1-2'data-tt-parent-id='3-1-1-2-3-1-1-1-1'><td><span class='folder'>Index</span></td><td>Folder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-1-2-1'data-tt-parent-id='3-1-1-2-3-1-1-1-1-2'><td><span class='file'>index_of_book.html</span></td><td>File</ td><td>174.1KB</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-1-3'data-tt-parent-id='3-1-1-2-3-1-1-1-1'><td><spanclass='file'>index.html</span></td><td>File</td><td>1. 1KB</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-1-4'data-tt-parent-id='3-1-1-2-3-1-1-1-1'><td><spanclass='folder'>Reference</span></td><td>Folder</td><t d>--</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-1-4-1'data-tt-parent-id='3-1-1-2-3-1-1-1-1-4'><td><span class='file'>reference.html</span></td><td>File</td>< td>196.28KB</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-1-5'data-tt-parent-id='3-1-1-2-3-1-1-1-1'><td><spanclass='file'>toc.html</span></td><td>File</td><td>15. 92KB</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2'data-tt-parent-id='3-1-1-2-3-1-1-1'><td><spanclass='folder'>AccessibilityLowlevel</span></td><td>F older</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-1'data-tt-parent-id='3-1-1-2-3-1-1-1-2'><td><spanclass='folder'>accessibility</span></td><td>Folder</t d><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-1-1'data-tt-parent-id='3-1-1-2-3-1-1-1-2-1'><td><span class='file'>CompositePage.html</span></td><td>File</ td><td>5.7KB</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-1-2'data-tt-parent-id='3-1-1-2-3-1-1-1-2-1'><td><span class='file'>index.html</span></td><td>File</td><td>1. 67KB</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-1-3'data-tt-parent-id='3-1-1-2-3-1-1-1-2-1'><td><span class='file'>toc.html</span></td><td>File</td><td>2.8 7KB</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-2'data-tt-parent-id='3-1-1-2-3-1-1-1-2'><td><spanclass='file'>accessibility-constants.html</span></td><td>File</td><td>26.94KB</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-3'data-tt-parent-id='3-1-1-2-3-1-1-1-2'><td><span class='file'>accessibility-datatypes.html</span></td> <td>File</td><td>11.02KB</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-4'data-tt-parent-id='3-1-1-2-3-1-1-1-2'><td><span class='file'>accessibility-functions.html</span></td> <td>File</td><td>15.55KB</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-5'data-tt-parent-id='3-1-1-2-3-1-1-1-2'><td><span class='file'>accessibility-mpindex.html</span></td><t d>File</td><td>9.87KB</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-6'data-tt-parent-id='3-1-1-2-3-1-1-1-2'><td><span class='folder'>AXActionConstants</span></td><td>Folde r</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-6-1'data-tt-parent-id='3-1-1-2-3-1-1-1-2-6'><td><span class='file'>CompositePage.html</span></td><td>File</ td><td>15.08KB</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-6-2'data-tt-parent-id='3-1-1-2-3-1-1-1-2-6'><td><span class='file'>index.html</span></td><td>File</td><td>1. 67KB</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-6-3'data-tt-parent-id='3-1-1-2-3-1-1-1-2-6'><td><span class='file'>toc.html</span></td><td>File</td><td>4.9 KB</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-7'data-tt-parent-id='3-1-1-2-3-1-1-1-2'><td><spanclass='folder'>AXAttributeConstants</span></td><td>Fo lder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-8'data-tt-parent-id='3-1-1-2-3-1-1-1-2'><td><spanclass='folder'>AXError</span></td><td>Folder</td><td> --</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-9'data-tt-parent-id='3-1-1-2-3-1-1-1-2'><td><spanclass='folder'>AXNotificationConstants</span></td><td >Folder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-10'data-tt-parent-id='3-1-1-2-3-1-1-1-2'><td><spanclass='folder'>AXRoleConstants</span></td><td>Folder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-11'data-tt-parent-id='3-1-1-2-3-1-1-1-2'><td><span class='folder'>AXTextAttributedString</span></td><td> Folder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-12'data-tt-parent-id='3-1-1-2-3-1-1-1-2'><td><span class='folder'>AXUIElement</span></td><td>Folder</td> <td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-13'data-tt-parent-id='3-1-1-2-3-1-1-1-2'><td><span class='folder'>AXValue</span></td><td>Folder</td><td> --</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-14'data-tt-parent-id='3-1-1-2-3-1-1-1-2'><td><span class='folder'>AXValueConstants</span></td><td>Folder </td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-15'data-tt-parent-id='3-1-1-2-3-1-1-1-2'><td><span class='file'>index.html</span></td><td>File</td><td>1 0.1KB</td></tr><tr data-tt-id='3-1-1-2-3-1-1-1-2-16'data-tt-parent-id='3-1-1-2-3-1-1-1-2'><td><span class='folder'>UniversalAccess</span></td><td>Folder< /td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-2'data-tt-parent-id='3-1-1-2-3-1'><td><spanclass='file'>adcstyle.css</span></td><td>File</td><td >15.86KB</td></tr><tr data-tt-id='3-1-1-2-3-1-3'data-tt-parent-id='3-1-1-2-3-1'><td><spanclass='folder'>AppleApplications</span></td><td>Folde r</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1'data-tt-parent-id='3-1-1-2-3-1-3'><td><spanclass='folder'>Reference</span></td><td>Folder</td><t d>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-1'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>AddressBookC_Collection</span></td><td >Folder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-1-1'data-tt-parent-id='3-1-1-2-3-1-3-1-1'><td><span class='folder'>Index</span></td><td>Folder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-1-1-1'data-tt-parent-id='3-1-1-2-3-1-3-1-1-1'><td><span class='file'>index_of_book.html</span></td><td>File</ td><td>153.98KB</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-1-2'data-tt-parent-id='3-1-1-2-3-1-3-1-1'><td><span class='file'>index.html</span></td><td>File</td><td>1 3.62KB</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-1-3'data-tt-parent-id='3-1-1-2-3-1-3-1-1'><td><span class='folder'>Introduction</span></td><td>Folder</td ><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-1-3-1'data-tt-parent-id='3-1-1-2-3-1-3-1-1-3'><td><span class='file'>Introduction.html</span></td><td>File</t d><td>5.41KB</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-1-4'data-tt-parent-id='3-1-1-2-3-1-3-1-1'><td><span class='file'>RevisionHistory.html</span></td><td>File </td><td>4.66KB</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-2'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>AddressBookRefUpdate</span></td><td>Fo lder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-2-1'data-tt-parent-id='3-1-1-2-3-1-3-1-2'><td><span class='folder'>Articles</span></td><td>Folder</td><td >--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-2-1-1'data-tt-parent-id='3-1-1-2-3-1-3-1-2-1'><td><span class='file'>AddressBook_10.1-10.2_SymbolChanges.html </span></td><td>File</td><td>80.84KB</td></tr> <tr data-tt-id='3-1-1-2-3-1-3-1-2-1-2'data-tt-parent-id='3-1-1-2-3-1-3-1-2-1'><td><span class='file'>AddressBook_10.2-10.3_SymbolChanges.html </span></td><td>File</td><td>54.2KB</td></tr> <tr data-tt-id='3-1-1-2-3-1-3-1-2-1-3'data-tt-parent-id='3-1-1-2-3-1-3-1-2-1'><td><span class='file'>AddressBook_10.3-10.4_SymbolChanges.html </span></td><td>File</td><td>14.78KB</td></tr> <tr data-tt-id='3-1-1-2-3-1-3-1-2-1-4'data-tt-parent-id='3-1-1-2-3-1-3-1-2-1'><td><span class='file'>AddressBook_10.4-10.5_SymbolChanges.html</span></td><td>File</td><td>11.03KB</td></tr> <tr data-tt-id='3-1-1-2-3-1-3-1-2-1-5'data-tt-parent-id='3-1-1-2-3-1-3-1-2-1'><td><span class='file'>Introduction.html</span></td><td>File</t d><td>7.3KB</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-2-1-6'data-tt-parent-id='3-1-1-2-3-1-3-1-2-1'><td><span class='file'>RevisionHistory.html</span></td><td>File </td><td>6.19KB</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-2-2'data-tt-parent-id='3-1-1-2-3-1-3-1-2'><td><spanclass='file'>index.html</span></td><td>File</td><td>1. 08KB</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-2-3'data-tt-parent-id='3-1-1-2-3-1-3-1-2'><td><spanclass='file'>toc.html</span></td><td>File</td><td>2.8 4KB</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-3'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>AMWorkflow_class</span></td><td>Folder </td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-4'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>AMWorkflowController_class</span></td> <td>Folder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-5'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>AMWorkflowView_Class</span></td><td>Fo lder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-6'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>AppleApp_Aperture_002</span></td><td>F older</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-7'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>Automator_constants</span></td><td>Fol der</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-8'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>AutomatorFramework</span></td><td>Fold er</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-9'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>AutomatorReference</span></td><td>Folder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-10'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>AutomatorRefUpdate</span></td><td>Fold er</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-11'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>CalendarStoreFramework</span></td><td> Folder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-12'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>CalendarStoreReference</span></td><td> Folder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-13'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>CalendarStoreRefUpdate</span></td><td> Folder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-14'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>Dashboard_Ref</span></td><td>Folder</t d><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-15'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>FinalCutPro_XML</span></td><td>Folder< /td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-16'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>InstantMessageFramework</span></td><td >Folder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-17'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>InstantMessageFrameworkRef</span></td> <td>Folder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-18'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>InstantMessageRefUpdate</span></td><td >Folder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-19'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>iSyncJavaScriptRef</span></td><td>Fold er</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-20'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>iSyncManualTestSuiteRef</span></td><td>Folder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-21'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>iSyncSyncMLRef</span></td><td>Folder</ td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-22'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>MessageFrameworkReference</span></td>< td>Folder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-23'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>Motion_FXPlug_Ref</span></td><td>Folde r</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-24'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>SafariCSSRef</span></td><td>Folder</td ><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-25'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>SafariHTMLRef</span></td><td>Folder</t d><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-26'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>SyncServicesRefUpdate</span></td><td>F older</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-27'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>SyncServicesSchemaRef</span></td><td>F older</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-3-1-28'data-tt-parent-id='3-1-1-2-3-1-3-1'><td><spanclass='folder'>WebKitDOMRef</span></td><td>Folder</td ><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-4'data-tt-parent-id='3-1-1-2-3-1'><td><spanclass='folder'>AppleScript</span></td><td>Folder</td> <td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-4-1'data-tt-parent-id='3-1-1-2-3-1-4'><td><spanclass='folder'>Reference</span></td><td>Folder</td><t d>--</td></tr><tr data-tt-id='3-1-1-2-3-1-4-1-1'data-tt-parent-id='3-1-1-2-3-1-4-1'><td><spanclass='folder'>StudioReference</span></td><td>Folder</td><td>--</td></tr><tr data-tt-id='3-1-1-2-3-1-4-1-1-1'data-tt-parent-id='3-1-1-2-3-1-4-1-1'><td><spanclass='folder'>art</span></td><td>Folder</td><td>--</ td></tr><tr data-tt-id='3-1-1-2-3-1-4-1-1-1-1'data-tt-parent-id='3-1-1-2-3-1-4-1-1-1'><td><span class='file'>boxes.gif</span></td><td>File</td><td>11. 52KB</td></tr><tr data-tt-id='3-1-1-2-3-1-4-1-1-1-2'data-tt-parent-id='3-1-1-2-3-1-4-1-1-1'><td><span class='file'>browser.gif</span></td><td>File</td><td> 26.04KB</td></tr><tr data-tt-id='3-1-1-2-3-1-4-1-1-1-3'data-tt-parent-id='3-1-1-2-3-1-4-1-1-1'><td><span class='file'>button_in_window.gif</span></td><td>File </td><td>8.17KB</td></tr><tr data-tt-id='3-1-1-2-3-1-4-1-1-1-4'data-tt-parent-id='3-1-1-2-3-1-4-1-1-1'><td><span class='file'>cc_app_info_window.gif</span></td><td>Fi le</td><td>24.36KB</td></tr><tr data-tt-id='3-1-1-2-3-1-4-1-1-1-5'。