关于jquery tree 树形菜单动态添加子节点的问题

<script type="text/javascript">

function getChildren(){

var node = $('#tt1').tree('getSelected') //tt1是你的树的id

if (node){

alert(“有子节点")

} else {

alert("无子节点")

}

}

</script>

<ul id="tt1" class="easyui-tree" animate="true" dnd="false">

<li>

<span>Folder</span>

<ul>

<li state="closed">

<span>Sub Folder 1</span>

<ul>

<li>

<span><a href="">File 11</a></span>

</li>

<li>

<span>File 12</span>

</li>

<li>

<span>File 13</span>

</li>

</ul>

</li>

<li>

<span>File 2</span>

</li>

<li>

<span>File 3</span>

</li>

<li>File 4</li>

<li>File 5</li>

</ul>

</li>

<li>

<span>File21</span>

</li>

</ul>

<a href="#" onclick="getChildren1()">getChildren1</a>

一个带有右键 *** 作的树形菜单

$(document).ready(function(){

    $.ajaxSetup({cache:false})

    $("#browser").tree({

    data  : {

        type  : "json",

        url   : src,

        async : true,

        async_data : function (NODE) {

                                        return { parent_Id : $(NODE).attr("id") || 0}

                                     }

      },

      lang:{

           loading:"目录加载中……"

            },

      rules:

      {

      draggable   : "all"   //这个设置可以使得节点进行拖动 *** 作

      },

      ui:{

           context     : [ //自定义右键 *** 作的可 *** 作内容

            {

                id      : "create",

                label   : "添加下级目录", //右键d出菜单的此项 *** 作屏显字样

                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false return TREE_OBJ.check("creatable", NODE) }, //允许节点被右击时出现 *** 作菜单

                icon    : "<%=request.getContextPath() %>/css/themes/default/create.png",//右键d出菜单的此项 *** 作图标

                action  : function (NODE, TREE_OBJ) {

                                                //进行此项 *** 作，将有这个函数事件被响应

                                                     }

            },

            "separator"//这个是在两个 *** 作之间画一条分隔线

           ,

            {

                id      : "edit",

                label   : "编辑目录信息",

                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false return TREE_OBJ.check("creatable", NODE) },

                icon    : "<%=request.getContextPath() %>/image/reg2.gif",

                action  : function (NODE, TREE_OBJ) {

                                                    openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"))})

                                                    }

            },

            "separator"

            ,

            {

                id      : "privilege",

                label   : "设置目录权限",

                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false return TREE_OBJ.check("creatable", NODE) },

                icon    : "<%=request.getContextPath() %>/css/themes/default/rename.png",

                action  : function (NODE, TREE_OBJ) {

                                                    openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"))})

                                                    }

            },

            "separator",

            {

                id      : "delete",

                label   : "删除",

                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false return TREE_OBJ.check("creatable", NODE) },

                icon    : "<%=request.getContextPath() %>/css/themes/default/remove.png",

                action  : function (NODE, TREE_OBJ) {

                                                    var tree=$.tree_reference("browser")

                                                    openWindow('myurl','','',function(){

                                               //下边的.parent()和.refresh()均为v0.9.8版本提供，如果你使用的是其他版本如v0.9.6等，这些将不被支持。

                                                    NODE=$(tree.parent(NODE))

                                                    if($(NODE).attr("id")==undefined){

                                                        tree.refresh()

                                                    }else{

                                                        TreeRefresh()

                                                    }

                                                    })

                                                    }

            },

            "separator",

            {

                id      : "others",

                label   : "其他 *** 作",

                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false return TREE_OBJ.check("creatable", NODE) },

                icon    : "<%=request.getContextPath() %>/css/images/cut.png",

                action  : function (NODE, TREE_OBJ) {

                                                    alert("暂无可提供 *** 作。")

                                                    }

            }

            ]

      },

   callback : {

         onselect: function(node) {

            //(a)

           

        }

    }

 

})

function treeRefresh(nodeid){

                     var rid=nodeid

                    var tree=$.tree_reference("browser")

                    var par_node=tree.parent($("#"+rid))

                    tree.refresh(par_node)

}

})

jquery树形表格treetable插件使用方法步骤：

第一步：

1.上官网下载。

2.插件引用，当下载的时候，会有很多个文件，但是根据api来看，如果只想做简单的效果，js除了引用juquery外，只需要引用jquery.treetable.js插件，如果想让它有默认的外观样式还需要引入它们的jquery.treetable.css和jquery.treetable.theme.default.css

第二步：建立table格式

<table id="example-advanced">

<tr data-tt-id="1">

<td>大家电</td>

</tr>

<tr data-tt-id="2" data-tt-parent-id="1">

<td>---电视</td>

</tr>

<tr data-tt-id="3" data-tt-parent-id="1">

<td>---洗衣机</td>

</tr>

<tr data-tt-id="4" data-tt-parent-id="1">

<td>---冰箱</td>

</tr>

</table>

第三步：引入JS

/* 初始化数据 */

$("#example-advanced").treetable({ expandable: true })/* 高亮显示 */$("#example-advanced tbody").on("mousedown", "tr", function() {

$(".selected").not(this).removeClass("selected")

$(this).toggleClass("selected")

})/* 点击展开&&关闭 */<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('expandAll')return false">展开</a>

<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('collapseAll')return false">关闭l</a>

---