html菜单树，树型菜单，menu tree | rin部落-web前端开发-主流web技术分享博客

效果图：
html代码：
    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>
            Mini UI tree
        </title>
        <link rel="stylesheet" type="text/css" href="./icons.css" />

        <link type="text/css" rel="stylesheet" href="./miniui.css" />

        <link rel="stylesheet" type="text/css" href="./skin.css" />

        <script id="jquery_183" type="text/javascript" class="library" src="./jquery-1.8.3.min.js"></script>

        <script type="text/javascript" src="./miniui.js">
        </script>

        <script type="text/javascript" src="./zh_CN.js">
        </script>
    </head>
    <body>
        <ul id="bomManage-bomTree" class="mini-tree" style="width: 90%; padding: 5px;" showtreeicon="true"
        iconcls="icon-user" textfield="text" idfield="id" parentfield="pid" resultAsTree="false"
        expandonnodeclick="true" expandonload="0"  contextmenu="#bomManage-treeMenu">
        </ul>
    </body>
</html>
        <style>body{
    background-color:white;
}</style>
                <script>function initTree() {

    var data = [{
        id: 'a',
        pid: -1,
        text: '一级节点-01'
    },
    {
        id: 'b',
        pid: -1,
        text: '一级节点-02'
    },
    {
        id: 1,
        pid: 'a',
        text: '二级节点-01',
        isLeaf: true
    },
    {
        id: 3,
        pid: 'a',
        text: '二级节点-02'
    },
    {
        id: 4,
        pid: 'b',
        text: '二级节点-03'
    },
    {
        id: 2,
        pid: 1,
        text: '三级节点-01'
    },
    {
        id: 5,
        pid: 1,
        text: '三级节点-02'
    },
    {
        id: 8,
        pid: 1,
        text: '三级节点-03'
    },
    {
        id: 7,
        pid: 'a',
        text: '二级节点-04',
        isLeaf: true
    },
    {
        id: 6,
        pid: 'a',
        text: '二级节点-05'
    },
    ];

    mini.get('bomManage-bomTree').loadList(data,'id','pid');
                                mini.parse();
}
$(document).ready(function() {
    initTree();
});</script>
2014-06-18