<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