树表格

最新推荐文章于 2023-07-25 16:35:05 发布

zqbokk

最新推荐文章于 2023-07-25 16:35:05 发布

阅读量142

点赞数

分类专栏：软件开发文章标签： JavaScript CSS ViewUI

本文链接：https://blog.csdn.net/zqbokk/article/details/83734315

版权

软件开发专栏收录该内容

17 篇文章 0 订阅

订阅专栏

            //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>
        <div id="gridTreeBtn" class="btnDiv" >
            <span class="items"></span><br/>
            <input type="button" value="展示文章类别图" οnclick="showGridTree()" />  
            <a href="javascript:gridTree.openAllNodes()">展开所有</a> |
            <a href="javascript:gridTree.closeAllNodes()">关闭所有</a>
        </div>
        <div id="gridTreeDiv">

</div>

<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>

用到的插件已经在上一篇文章树形菜单的附件里包含了

zqbokk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
树表格

&lt;script type="text/javascript" src="/plug/treegrid/TableTree4J.js"&gt;&lt;/script&gt; &lt;link rel="StyleSheet" href="/plug/treegrid/css/tabletree4j.css" type="text/css&quo
复制链接

扫一扫

专栏目录