<script type="text/javascript" src="/plug/treegrid/TableTree4J.js"></script>
<link rel="StyleSheet" href="/plug/treegrid/css/tabletree4j.css" type="text/css" />
<script language="JavaScript">
//GridTree
var gridTree;
function showGridTree(){
//init
gridTree=new TableTree4J("gridTree","/..");
gridTree.tableDesc="<table border=\"1\" class=\"GridView\" width=\"100%\" id=\"table1\" cellspacing=\"0\" cellpadding=\"0\" style=\"border-collapse: collapse\" bordercolordark=\"#C0C0C0\" bordercolorlight=\"#C0C0C0\" >";
var headerDataList=new Array("类别名称","描述","排序","是否系统定义"); //列名可以根据需要自定义
var widthList=new Array("25%","55%","5%","15%");
//参数: arrayHeader,id,headerWidthList,booleanOpen,classStyle,hrefTip,hrefStatusText,icon,iconOpen
gridTree.setHeader(headerDataList,-1,widthList,true,"GridHead","This is a tipTitle of head href!","header status text","","");
//设置列样式
gridTree.gridHeaderColStyleArray=new Array("","","","centerClo");
gridTree.gridDataCloStyleArray=new Array("","","","centerClo");
//add data 增加数据
var dataList;
<s:iterator value="#request.articleTypelist" status="stuts">
//var dataList=new Array("系统管理","2007-12-10","使用中","","<a href=\"#\">删除</a> | <a href=\"#\">查看</a> ");
//参数: dataList,id,pid,booleanOpen,order,url,target,hrefTip,hrefStatusText,classStyle,icon,iconOpen
//gridTree.addGirdNode(dataList,1,-1,null,3,"#",null,"hello!","状态栏文字",null,null,null);
dataList=new Array('<s:property value="name" />','<s:property value="describe" />','<s:property value="sort" />','<s:property value="isSystemDefine==1?'是':'否'" />');
//参数: dataList,id,pid,booleanOpen,order,url,target,hrefTip,hrefStatusText,classStyle,icon,iconOpen
gridTree.addGirdNode(dataList,'<s:property value="id" />','<s:property value="parentID" />',null,3,"#",null,"<s:property value="describe" />","<s:property value="describe" />",null,null,null);
</s:iterator>
//print
gridTree.printTableTreeToElement("gridTreeDiv");
}
</script>
<!-- 做刷新页面用-->
<form action="manage/article/view.do" name="form1">
<input type="hidden" value="测试" class="btn_newStyle" />
</form>
<body class="body">
<div id="searchDiv">
<!-- <input type="button" value="打开文章类别管理" onclick="showTree()" /> -->
显 示 栏
</div>
<div align="right">
</div>
<div id="gridTreeBtn" class="btnDiv" >
<span class="items"></span><br/>
<input type="button" value="展示文章类别图" onclick="showGridTree()" />
<a href="javascript:gridTree.openAllNodes()">展开所有</a> |
<a href="javascript:gridTree.closeAllNodes()">关闭所有</a>
</div>
<div id="gridTreeDiv">
</div>
<p/>
<p/>
<br>
<style>
.body{
font-size:12px;
}
.btnDiv a{
color:#0000FF;
text-decoration: none;
}
.btnDiv a:hover{
color:#CC3300;
text-decoration: underline;
}
.items{
color:#669999;
font-size:14px;
}
.title{
font-size:16px;
font-weight:bold;
}
.copyrightdiv{
font-size:12px;
font-family:"Arial";
color:#C0C0C0;
}
.centerClo {
text-align:center;
}
</style>
用到的插件已经在上一篇文章树形菜单的附件里包含了
分享到：
相关推荐
"C#版本多表头树表格"项目旨在提供一种解决方案，允许开发者自定义树形结构，并绘制复杂的表头布局。这个项目适用于Visual Studio 2010及更高版本，且依赖于Dev Express的TreeList控件的v15版本。 首先，我们来看...
**jQuery 实现无限极树表格菜单详解** 在网页开发中，树形结构的展示经常用于组织和层次化数据，如目录、组织架构或层级关系的数据。jQuery 是一个广泛使用的 JavaScript 库，它提供了丰富的功能来简化网页交互。...
本源码为基于Layui的树表格（treeGrid）前端设计，共包含1858个文件，其中html文件972个，gif文件474个，js文件204个，png文件68个，css文件48个，json文件16个，md文件10个，xml文件9个，php文件8个，eot文件6个。...
ATAM 评估的效用树表格质量属性详解 ATAM 评估的效用树表格是软件系统架构设计的重要组件之一，该表格旨在评估软件系统的质量属性，包括可修改性、移植性、安全性、可用性、互操作性、易用性和可维护性等。下面将对...
《jQuery-treetable：构建美观实用的树形表格》 ...在压缩包中的"jquery-treetable简单实用树表格deo"文件中，你可以找到一个完整的演示实例，通过查看和运行代码，可以更好地理解其工作原理和用法。
这个“基于ext很不错的TreeGridEditor树表格”显然是一款基于ExtJS的扩展，用于创建具有树结构和表格功能的组件。 TreeGridEditor 是一个结合了树形视图和表格数据展示的组件，它允许用户以树状结构浏览数据，同时...
【自定义树表格】是一种将表格数据以树形结构展示的UI组件，广泛应用于需要层次化数据展现的场景。在IT行业中，树表格是数据管理、项目管理、组织架构展示等领域的常用工具，它结合了表格的行列布局与树结构的层次...
layui提供了一系列丰富的组件，其中“树表格”（TreeGrid）是结合了表格和树形结构的一种特殊展示形式，常用于数据层级关系的展示。本篇文章将深入探讨基于layui的树表格-treeGrid的实现原理、使用方法以及相关的...
5. **动态添加**："动态添加树表格.html"可能是一个示例文件，演示了如何动态地向表格树中添加数据。这涉及到DOM操作，数据绑定，以及可能的异步数据获取和更新机制。开发者可以通过这个例子学习如何在运行时对表格...
在本文档中，详细介绍了如何利用vue-cli结合element-ui框架构建一个树形表格（也就是多级表格）。在许多项目开发中，特别是在处理有层级关系的数据时，我们需要以树形结构来展示信息，以便用户能以直观的方式浏览和...
本文将深入探讨如何使用Angular和Angular Material创建一个高效的树形表格组件，以及在这个过程中可能涉及的关键知识点。 首先，我们从标题"基于Angular和AngularMaterial的树形表格组件"出发。树形表格组件是将...
在IT领域，树形表格（TreeTable）是一种特殊的数据展示方式，它结合了表格和树状结构的优点，常用于组织层次分明、具有父子关系的数据。本文将深入探讨“树形表格treetable完整版”，包括它的特点、应用场景、二次...
在本示例中，我们关注的是“bootstrap树形表格js插件demo”。这个插件允许我们在Bootstrap表格中展示层次结构的数据，这对于显示具有父子关系或者分类信息的数据非常有用。 首先，`treeTable.html`是演示如何使用该...
1支持本地数据和服务器数据(配置data或者url)2支持排序和分页(包括Javascript排序和分页)3支持列的“显示/隐藏”4支持明细行(表格内嵌)5支持...一个特色需要其他表单插件的支持)8支持树表格(待加入)8支持分组(待加入)
otreetable.js 原生JS树形表格，调用非常简单（只需一句代码即可调用），获取HTML中输出的表格数据重构表格，以树形方式显示，可展开/收缩，不破坏表格原有数据格式及内容，支持无限级，兼容所有浏览器。当前版本...
在Vue.js框架中实现一个可拖拽的树形表格是一项技术挑战，涉及到组件设计、事件处理、数据管理和DOM操作等多个方面。Vue.js以其简洁的API和强大的响应式系统深受开发者喜爱，而添加拖拽功能则需要用到HTML5的Drag ...
《jQuery TreeTable：构建灵活的树形表格》 在网页开发中，数据的展示方式多种多样，其中树形表格（TreeTable）是一种将层级结构的数据以表格形式展示的方法，既能保持表格的整齐有序，又能清晰地展现出数据间的...
《jQuery懒加载版本表格树GridTree详解》 在IT领域，高效的数据呈现是提升用户体验的关键。面对大数据量的处理，传统的加载方式往往会导致页面加载缓慢，用户体验下降。为解决这一问题，"jQuery懒加载版本表格树...
树形表格，支持折叠展开，行点击获取当前行，父节点，子节点，级联勾选 使用文档https://blog.csdn.net/u012796085/article/details/80357317