树表格
<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>
用到的插件已经在上一篇文章树形菜单的附件里包含了