dtree

時間 2019-11-19

標籤 dtree 简体版

原文原文鏈接

1.dtree

1.1 dtree.css

/*--------------------------------------------------|
| dTree 2.05 | www.destroydrop.com/javascript/tree/ |
|---------------------------------------------------|
| Copyright (c) 2002-2003 Geir Landr?               |
|--------------------------------------------------*/

.dtree {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #666;
    white-space: nowrap;
}

.dtree img {
    border: 0;
    vertical-align: middle;
    outline-style: none;
    width: 19px;
    height: 19px;
}

.dtree a {
    color: #333;
    text-decoration: none;
    outline-style: none;
}

.dtree a:visited {
    color: #333;
    text-decoration: none;
    outline-style: none;
}

.dtree a.node, .dtree a.nodeSel {
    white-space: nowrap;
    padding: 1px 2px 1px 2px;
    outline-style: none;
}

.dtree a.node:hover, .dtree a.nodeSel:hover {
    color: #333;
    text-decoration: underline;
    outline-style: none;
}

.dtree a.nodeSel {
    background-color: #c0d2ec;
    outline-style: none;
}

.dtree .clip {
    overflow: hidden;
}

1.2 dtree.js

1.3 img(文件夾)

base.gifjavascript

folder.gifcss

folderopen.gifhtml

search.jpgjava

2.index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    </SCRIPT>
    <SCRIPT language=javascript src="js/dtree/dtree.js"></SCRIPT>
    <link rel="stylesheet" href="js/dtree/dtree.css" type="text/css">
</HEAD>
 
<BODY>
<form action="" name="form1" method=POST>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td rowspan="5" width="1" bgcolor="CCCCCC"></td>
            <td bgcolor="CCCCCC" height="1"></td>
            <td rowspan="4" bgcolor="CCCCCC" width="1"></td>
        </tr>

        <tr>
            <td bgcolor="E3E7FF" align="center" height="5"></td>
        </tr>

        <tr>
            <td bgcolor="CCCCCC" height="1"></td>
        </tr>
         
        <tr>
            <td bgcolor="F9F9F9" align="center" valign="top">
                <table width="90%" border="0" align="center" cellpadding="1" cellspacing="1" bgcolor="F5F5F5">
                    <tr bgcolor="F3F9FF">
                        <td bgcolor="F5F5F5">
                            <SCRIPT LANGUAGE="JavaScript"><!--
                                d = new dTree('d');//建立樹，名稱爲’d'（注意和樹的對象變量名稱要一致） 
                                d.config.target = "right";//全部節點的target   
                                d.config.imageDir = 'js/dtree/img';
								d.reSetImagePath();
                                d.config.folderLinks = false;//文件夾可連接 
								d.config.closeSameLevel = true;
                                var isOpen ;
                                //跦誹萸
                                d.add(0, -1, '系統功能');//添加了一個根節點，顯示名稱
                                d.add(1, 0, '耗材管理');
                                d.add(2, 0, '資產管理'); 
								d.add(3, 0, '治具管理');
								d.add(5, 0, 'PR管理');
								d.add(4, 0, '綜合查詢');
								d.add(9, 0, '其它功能');
								d.add(10, 0, '管理員功能');
								
								d.add(11, 1, 'C11');
                                d.add(12, 1, 'SVC');
                                d.add(13, 1, 'D02', '#', '', 'right');
                                d.add(14, 1, 'D03', '#', '', 'right');
                                d.add(15, 1, 'D04', '#', '', 'right');
                                d.add(18, 1, 'D22', '#', '', 'right');
                                d.add(20, 1, '中央倉', '#', '', 'right');
                                
                                d.add(111, 11, '選擇耗材倉碼', '../bpgl/cknumber-index.jsp', '', 'mainFrame1');//IFRAME的id
                                d.add(21, 2, 'C11', '#', '', 'right');
                                d.add(22, 2, 'C12', '#', '', 'right');
                                d.add(23, 2, 'C13', '#', '', 'right');
                                d.add(24, 2, 'C14', '#', '', 'right');
                                d.add(25, 2, 'C15', '#', '', 'right');
                                d.add(26, 2, 'C16', '#', '', 'right');
                                d.add(27, 2, 'C17', '#', '', 'right');
                                d.add(28, 2, 'C18', '#', '', 'right');
                                d.add(200, 2, 'XX' , '#', '', 'right');
                                d.add(29, 2, '選擇代碼', '../bpgl/cknum/zx_num.jsp', '', 'mainFrame1');
                                document.write(d);
                             
                            </script>
                        </td>
                    </tr>
                    <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
                </table>
            </td>
        </tr>
        
        <tr>
            <td background="images/jao1.gif" colspan="2" align="right"><img
                    src="images/jao.gif" width="12" height="12"></td>
        </tr>

    </table>
           
</form>
</BODY>
</HTML>

說明：

上面貼出的html爲dtree的用法，貼出的圖片爲樹形結構的圖片，可替換原"文件夾"式的菜單node

此處對最下面的代碼進行補充jsp

<tr>
            <td background="images/jao1.gif" colspan="2" align="right"><img
                    src="images/jao.gif" width="12" height="12"></td>
        </tr>

貼出圖片ui

jao.gifthis

jiao1.gifspa

光看圖片看不出效果，可是上一串tr的最終顯示效果如截圖code

相關標籤/搜索

dtree

dtree+jquery

struts2+hibernate+spring+ztree+dtree

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。