z:tree标签

作者:  最后修改:2013年10月09日  浏览数:1230

简介

  后台树形控件,展现树状结构数据。

 

属性说明

名称

参数类型

是否必填

默认值

描述

id

String

true

 

规定元素的唯一 id

size

number

false

 

显示数目:树节点过多时使用分页加载

lazy

boolean

false

 

是否在展开节点时再载入节点下数据

style

String

false

 

规定元素的行内样式(inline style

level

number

false

 

载入几级数据

method

String

true

 

返回数据的后台方法

expand

boolean

false

 

是否展开,延迟加载时全部展开

customscrollbar

boolean

false

 

是否使用自定义滚动条

 

详细说明

method属性

  为一个Java类的方法名,控件初始化时,该Java类的方法被执行,为树提供节点数据。

 

level属性

  为树状数据展示的记录层数,大于该层数的节点则通过延迟加载载入。

 

lazy属性

  延迟加载(懒加载),只有当点击展开树形结构时才从数据库中查询数据。

 

expand属性

  延迟加载时全部展开。

示例:

直接使用<z:tree>标签

页面示例:

 

<z:tree id="tree1" method="EditorWorkspace.bindTree" level="2" lazy="true" size="10" customscrollbar="true">

    <p cid="${ID}" innercode="${InnerCode}" onClick="onTreeClick(this);" class="treeItem_p">${Name}

    <span class="treeItem_p_tool"> <a href="../catalog/preview?ID=${ID}" target="_blank"><img title="<z:lang id='Contentcore.Preview'>预览</z:lang>" src="../framework/images/icon_preview_17px.png"></a> <a href="#;" onclick="publish('${ID}')"><img title="<z:lang id='Contentcore.Publish'>发布</z:lang>" src="../framework/images/icon_publish_17px.png"></a></span> </p>

</z:tree>

 

后台代码示例:

 

EditorWorkspaceUI.java

    @Priv

    public void bindTree(TreeAction ta) {

        CatalogTree ct = new CatalogTree();

        ct.setContentType(ta.getParam("ContentType"));

        ct.setParentID(Request.getLong("ParentID"));

        ct.setType(ta.getParam("Type"));

        String siteID = ta.getParam("SiteID");

        if (ObjectUtil.empty(siteID)) {

            ct.setSiteID(SiteBL.getCurrentSite());

        } else {

            ct.setSiteID(Long.parseLong(siteID));

        }

        DataTable dt = ct.loadTreeTable(false);

        dt.insertColumn("Disabled");

        for (DataRow dr : dt) {

            if (StringUtil.isNotNull(ta.getParam("ContentType")) && !dr.getString("ContentType").equals(ta.getParam("ContentType"))) {

                dr.set("Disabled", "Disabled");

            }

        }

        ta.setRootText(SiteUtil.getDAO(ct.getSiteID()).getName());

        ta.bindData(dt);

        for (TreeItem ti : ta.getItemList()) {

            if (ti.getData() != null) {

                ti.setIcon(ti.getData().getString("Icon"));

            }

        }

    }

 

CatalogTree.java

    public DataTable loadTreeTable(final boolean adminFlag) {

        Q qb = new Q("select ID,ParentID,ContentType,TreeLevel,Name,InnerCode,Alias,Path,OrderFlag,IsLeaf,Total,ConfigProps from ZCCatalog where VisibleFlag='Y'");

        if (ObjectUtil.notEmpty(SiteID)) {

            qb.append(" and SiteID=?", SiteID);

        }

        long level = 1;

        if (ObjectUtil.notEmpty(ParentID)) {

            ZCCatalog pCatalog = CatalogUtil.getDAO(ParentID);

            String ParentInnerCode = pCatalog.getInnerCode();

            qb.append(" and InnerCode like ?", ParentInnerCode + "0%");

            level = pCatalog.getTreeLevel();

        }

        qb.append(" and TreeLevel<?", level + 3);

        if (ObjectUtil.notEmpty(type)) {

            String[] types = type.split(",");

            qb.append(" and ( ");

            for(int i=0;i<types.length;i++){

                if(i==0){

                    qb.append(" type = ? ",types[i] );

                }else{

                    qb.append(" or type = ? ",types[i] );

                }

            }

            qb.append(" )");

        }

        this.total = DBUtil.getCount(qb);

        qb.append(" order by OrderFlag");

        DataTable dt = qb.fetch();

        dt.insertColumn("Icon");

 

        ……

 

        dt.insertColumn("Link");

        for (DataRow dr : dt) {

            IContentType ct = ContentTypeService.getContentType(dr.getString("ContentType"), SiteID);

            dr.set("Icon", ct.getCatalogIcon());

            dr.set("Link", InternalURLUtil.getInteralURL(dr.getLong("ID")));

        }

        return dt;

    }

页面参考:editorWorkspace.zhtml

示例说明

  树形展现的数据通常包含在一对<p></p>标签中,当点击树状展示出来的数据会触发相应事件,属性onClick=onTreeClick(this);,onTreeClick方法中做相应处理(如展现该栏目文档)。通过oncontextmenu=showMenu();”实现右键菜单功能,点击右键后由showMenu方法进行处理。

    在调用java方法时,要传入一个参数TreeAction类的实例ta,通过ta.getParam()能将页面信息传入后台,同时也能将后台的数据展现在前台。

 

通过指定控件ztype类型为tree

页面示例:

 

<z:datagrid id="dg1" method="ContentPublishStat.bindCatalogPublishStat" page="false">

    <table width="100%" cellpadding="2" cellspacing="0" class="dataTable">

        <tr ztype="head" class="dataTableHead">

            ……

            <!-- 指定列ztype类型为tree -->

            <td width="20%" ztype="tree" level="treelevel"><z:lang id="Article.ArticleTag.CatalogUsage">栏目名称</z:lang></td>

            ……

        </tr>

        <tr class1="dg_tr_odd" class2="dg_tr_even">

            <td align="center">&nbsp;</td>

            ……

            <td>${CatalogName}</td>

            ……

        </tr>

    </table>

</z:datagrid>

页面参考:catalogPublishStat.zhtml。

显示效果:

使用ztree标签效果图:

1_副本

 

设置ztype=”tree”效果图:

4_副本