dtree树形菜单的使用

最新推荐文章于 2020-11-23 19:20:31 发布

Neil2013

最新推荐文章于 2020-11-23 19:20:31 发布

阅读量1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/chenhisen/article/details/8690799

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

首先需先下载dtree的img,css和js

前台HTML

</head>
<body>
    <form id="form1" runat="server">

<div style="height:100px;border:1px;width:200px;float:left"> sdfd</div>

<div id="center">
     <p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
    <script>document.write(d);</script>
      </div>

     <div style="position:absolute;margin-top:200px" > sdfd</div>
    </form>
</body>

后台C#

protected void Page_Load(object sender, EventArgs e)
    {
        string jstring = @"

        d = new dTree('d');
     d.add(0, -1, 'My example tree','','fge');
     d.add(1, 0, 'Node 1');
     d.add(2, 0, 'Node 2', 'divcss.aspx');
     d.add(3, 1, 'Node 1.1', 'divcss.aspx');
     d.add(4, 0, 'Node 3', 'divcss.aspx');
     d.add(5, 3, 'Node 1.1.1', 'divcss.aspx');
     d.add(6, 5, 'Node 1.1.1.1', 'divcss.aspx');
     d.add(7, 0, 'Node 4', 'divcss.aspx');
     d.add(8, 1, 'Node 1.2', 'divcss.aspx');
     d.add(9, 0, 'My Pictures', 'dtree.aspx', 'Pictures I\'ve taken over the years', '', '', 'Images/imgfolder.gif');
     d.add(10, 9, 'The trip to Iceland', 'dtree.aspx', 'Pictures of Gullfoss and Geysir');
     d.add(11, 9, 'Mom\'s birthday', 'dtree.aspx');
     d.add(12, 0, 'Recycle Bin', 'dtree.aspx', '', '', 'Images/trash.gif');
        d.config.folderLinks=false;//有子节点的不可链接
       ";

        this.Page.ClientScript.RegisterClientScriptBlock(this.Page.GetType(), "", jstring, true);//js代码出现在body标签顶部

    }

dtree主要方法介绍：

add(parameters)：添加一个树节点，实际参数有9个add(id,pid,name,url,title,target,icon,iconOpen,open);

位置    参数别名       类型      功能
1          id             int        节点自身的id(唯一)
  2         pid             int        节点的父节点id
3         name         string    节点显示在页面上的名称
4         url             string    节点的链接地址
5         title           string     鼠标放在节点上显示的提示信息
6         target       string     节点链接所打开的目标frame
7         icon          string     节点关闭状态时显示的图标
8        iconOpen    string     节点打开状态时显示的图标
9        open          bool       节点第一次加载是否打开

注：dtree.js文件中是一些默认图片的路径，可以自己配置图片和路径，我下载的在44~57行

openAll()打开全部节点，可在树对象创建前或创建后调用

closeAll()关闭全部节点，可在树对象创建前或创建后调用

openTo(id,select)打开指定id的节点，可以传两个参数：

id 指定需要打开的节点的唯一id

　　select 是否让该节点处于选中状态

config配置
   变量                   类型       默认值      描述
target                 string                  所有节点的target
folderLinks         bool       true        文件夹可被链接
useSelection        bool       true        节点可被选择高亮
useCookies        bool       true        树可以使用cookie记住状态
useLines             bool        true        创建带结构连接线的树
useIcons             bool        true        创建带有图表的树
useStatusText     bool        false       用节点名替代显示在状态栏的节点url
closeSameLevel    bool        false       同级节点只允许一个节点处于打开状态
inOrder              bool        false       加速父节点树的显示

例如：tree.config.closeSameLevel=true;表示打开某级节点时，该级其他处于打开状态的同级节点会被关闭

Neil2013

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dtree树形菜单的使用

首先需先下载dtree的img,css和js前台HTML sdfd open all | close all document.write(d); sdfd 后台C# protected void Page_Load(obj
复制链接

扫一扫

专栏目录