`
zqb666kkk
  • 浏览: 732005 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类
最新评论

树表格

阅读更多

 

 

 <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()" />&nbsp;&nbsp;-->
            &nbsp;显&nbsp;示&nbsp;栏&nbsp;
        </div>
        <div align="right">

        </div>
        <div id="gridTreeBtn" class="btnDiv" >
            <span class="items"></span><br/>
            <input type="button" value="展示文章类别图" onclick="showGridTree()" />&nbsp;&nbsp;
            <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#版本多表头树表格

    "C#版本多表头树表格"项目旨在提供一种解决方案,允许开发者自定义树形结构,并绘制复杂的表头布局。这个项目适用于Visual Studio 2010及更高版本,且依赖于Dev Express的TreeList控件的v15版本。 首先,我们来看...

    jquery实现无限极树表格菜单

    **jQuery 实现无限极树表格菜单详解** 在网页开发中,树形结构的展示经常用于组织和层次化数据,如目录、组织架构或层级关系的数据。jQuery 是一个广泛使用的 JavaScript 库,它提供了丰富的功能来简化网页交互。...

    基于Layui的树表格(treeGrid)前端设计源码

    本源码为基于Layui的树表格(treeGrid)前端设计,共包含1858个文件,其中html文件972个,gif文件474个,js文件204个,png文件68个,css文件48个,json文件16个,md文件10个,xml文件9个,php文件8个,eot文件6个。...

    ATAM评估的效用树表格1

    ATAM 评估的效用树表格质量属性详解 ATAM 评估的效用树表格是软件系统架构设计的重要组件之一,该表格旨在评估软件系统的质量属性,包括可修改性、移植性、安全性、可用性、互操作性、易用性和可维护性等。下面将对...

    jquery-treetable简单实用树表格demo.rar

    《jQuery-treetable:构建美观实用的树形表格》 ...在压缩包中的"jquery-treetable简单实用树表格deo"文件中,你可以找到一个完整的演示实例,通过查看和运行代码,可以更好地理解其工作原理和用法。

    基于ext很不错的TreeGridEditor树表格

    这个“基于ext很不错的TreeGridEditor树表格”显然是一款基于ExtJS的扩展,用于创建具有树结构和表格功能的组件。 TreeGridEditor 是一个结合了树形视图和表格数据展示的组件,它允许用户以树状结构浏览数据,同时...

    自定义树表格

    【自定义树表格】是一种将表格数据以树形结构展示的UI组件,广泛应用于需要层次化数据展现的场景。在IT行业中,树表格是数据管理、项目管理、组织架构展示等领域的常用工具,它结合了表格的行列布局与树结构的层次...

    基于layui的树表格-treeGrid

    layui提供了一系列丰富的组件,其中“树表格”(TreeGrid)是结合了表格和树形结构的一种特殊展示形式,常用于数据层级关系的展示。本篇文章将深入探讨基于layui的树表格-treeGrid的实现原理、使用方法以及相关的...

    表格树(源代码,可开发)

    5. **动态添加**:"动态添加树表格.html"可能是一个示例文件,演示了如何动态地向表格树中添加数据。这涉及到DOM操作,数据绑定,以及可能的异步数据获取和更新机制。开发者可以通过这个例子学习如何在运行时对表格...

    详解vue-cli+element-ui树形表格(多级表格折腾小计)

    在本文档中,详细介绍了如何利用vue-cli结合element-ui框架构建一个树形表格(也就是多级表格)。在许多项目开发中,特别是在处理有层级关系的数据时,我们需要以树形结构来展示信息,以便用户能以直观的方式浏览和...

    基于Angular和AngularMaterial的树形表格组件

    本文将深入探讨如何使用Angular和Angular Material创建一个高效的树形表格组件,以及在这个过程中可能涉及的关键知识点。 首先,我们从标题"基于Angular和AngularMaterial的树形表格组件"出发。树形表格组件是将...

    树形表格 treetable 完整版 带演示demo例子

    在IT领域,树形表格(TreeTable)是一种特殊的数据展示方式,它结合了表格和树状结构的优点,常用于组织层次分明、具有父子关系的数据。本文将深入探讨“树形表格treetable完整版”,包括它的特点、应用场景、二次...

    bootstrap树形表格js插件demo

    在本示例中,我们关注的是“bootstrap树形表格js插件demo”。这个插件允许我们在Bootstrap表格中展示层次结构的数据,这对于显示具有父子关系或者分类信息的数据非常有用。 首先,`treeTable.html`是演示如何使用该...

    LigerGridDemo_fieldz67_ligergrid_树表格_

    1支持本地数据和服务器数据(配置data或者url)2支持排序和分页(包括Javascript排序和分页)3支持列的“显示/隐藏”4支持明细行(表格内嵌)5支持...一个特色需要其他表单插件的支持)8支持树表格(待加入)8支持分组(待加入)

    JS树形表格(可分级展开)

    otreetable.js 原生JS树形表格,调用非常简单(只需一句代码即可调用),获取HTML中输出的表格数据重构表格,以树形方式显示,可展开/收缩,不破坏表格原有数据格式及内容,支持无限级,兼容所有浏览器。当前版本...

    基于Vue实现可以拖拽的树形表格

    在Vue.js框架中实现一个可拖拽的树形表格是一项技术挑战,涉及到组件设计、事件处理、数据管理和DOM操作等多个方面。Vue.js以其简洁的API和强大的响应式系统深受开发者喜爱,而添加拖拽功能则需要用到HTML5的Drag ...

    jquery 树表格控件 treetable

    《jQuery TreeTable:构建灵活的树形表格》 在网页开发中,数据的展示方式多种多样,其中树形表格(TreeTable)是一种将层级结构的数据以表格形式展示的方法,既能保持表格的整齐有序,又能清晰地展现出数据间的...

    jquery懒加载版本表格树GridTree.zip

    《jQuery懒加载版本表格树GridTree详解》 在IT领域,高效的数据呈现是提升用户体验的关键。面对大数据量的处理,传统的加载方式往往会导致页面加载缓慢,用户体验下降。为解决这一问题,"jQuery懒加载版本表格树...

    树形表格js

    树形表格,支持折叠展开,行点击获取当前行,父节点,子节点,级联勾选 使用文档https://blog.csdn.net/u012796085/article/details/80357317

Global site tag (gtag.js) - Google Analytics