jstree从后台取数据加载后，在前台为什么展开不了节点，急啊···在线等

$('#tree_2')jstree({

'plugins': ["wholerow", "checkbox", "types"],

'core': {

"themes" : {

"responsive": false

},

'data': [{

"text": "Same but with checkboxes",

"children": [{

"text": "initially selected",

"state": {

"selected": true

}

}, {

"text": "custom icon",

"icon": "fa fa-warning icon-state-danger",

"state": {

"selected": true

}

}, {

"text": "initially open",

"icon" : "fa fa-folder icon-state-default",

"state": {

"opened": true

},

"children": ["Another node"]

}, {

"text": "custom icon",

"icon": "fa fa-warning icon-state-warning"

}, {

"text": "disabled node",

"icon": "fa fa-check icon-state-success",

"state": {

"disabled": true

}

}]

},

"And wholerow selection"

]

},

"types" : {

"default" : {

"icon" : "fa fa-folder icon-state-warning icon-lg"

},

"file" : {

"icon" : "fa fa-file icon-state-warning icon-lg"

}

}

});

择ztree替代jstree是因为ztree的官网的api文档详细，容易理解。

下面说下在开发中ztree的2个功能的实现

1、给树赋值如下图

代码如下：

//修改-人员管理

function achievementmag_peopedit_click(id){

achievementmag_peop_add=false;

achievementmag_peop_validformresetForm();

//以下代码实现树赋值

var treeObj = $fnzTreegetZTreeObj("achievementmag_peop_structure");//根据 treeId 获取 zTree 对象

var node=treeObjgetNodeByParam("id",id, null);//根据节点数据的属性(id)获取条件完全匹配的节点数据 JSON 对象集合

treeObjselectNode(node,false);//根据节点数据选中指定节点,false表示单独选中，之前选中的节点会被取消选中状态，为true 表示追加选中

11创建一棵树

2使用如下方式

3var tree=new JsTree('DivId');

4说明，html的body里面必须事先有id为'DivId'的层。

5这棵树将在此渲染。

62创建节点

7var node1=new JsNode("nodeid");

8树在以一始不能渲染，要渲染必须设置它的根

9用下面的语法：

10treesetRoot(node1); // 这样就将node1设置成了它的根，div已经被渲染。

11以后只要按照一棵树的形态加入节点就可以了。

12如下所示：

13 var tree=new JsTree("div1");

14 var root=new JsNode("root"); //root为节点的ID

15 roottext="刘u22791 "; //设置节点显示的文本，也可以是超链接，html代码 等，要是不设置这个属性，树就显示它的Id

16 roothasCheckBox=true; //设置了这个属性以后，节点就还有一个CheckBox

17 treesetRoot(root); //根节点的属性设置好以后才能将它给树对象

18 var n1=new JsNode("张u-26402 ");

19 var n2=new JsNode("关u32701 ");

20 var n3=new JsNode("赵u20113 ");

21 var n4=new JsNode("将");

22 var n5=new JsNode("将");

23 var n6=new JsNode("兵");

24 var n7=new JsNode("兵");

25 var n8=new JsNode("兵");

26 rootadd(n1);

27 rootadd(n2);

28 n2add(n4); //这些方法，就将1个节点添加它的子节点

29 n2add(n5);

30 n4add(n6);

31 n4add(n7);

32 n1add(n8);

33 rootadd(n3);

34这样就能动态的构建树了

35

36下面提供一些全局API，直接使用这些方法

37getAllTrees() 获得所有的树对象，一个html上面可能有很多树

38getTreeByDivId(divid) 通过树注册的divId获得这棵树

39getNodeById(nid) //通过节点Id，从所有的树中查找一个节点对象，找到就返回，找不到返回null

40checkCbo(node) 选中这个节点的CheckBox

41checkCboById(nodeid) 通过节点的Id来选中起CheckBox

42cancelCbo(node) 取消对Checkbox的选中

43cancelCboById(nid) 通过节点id取消对Checkbox的选中

44closeThis(node) 关闭节点

45openThis(node) 打开

46closeNodeById(nid) 通过节点Id关闭

47openNodeById(nid) 通过Id节点打开

48

49下面是树对象的API

50getById(key) // getNodeById

51removeNode(node) // 核心方法

52getCheckedNodesXml() /// 对外 API

53getCheckedNodes() /// 对外 API

54showText()//////对外 API

55showId()//对外 API

56上面的方法 如此使用 var arr=treegetCheckedNodes();这样就得到了所有的选中节点。赞同0| 评论

$(document)ready(function(){

var idsstr = "";

var isc = "";

$("#a input[name=chkId]")each(function(){ //遍历table里的全部checkbox

idsstr += $(this)val() + ","; //获取所有checkbox的值

if($(this)attr("checked")) //如果被选中

isc += $(this)val() + ","; //获取被选中的值

});

if(idsstrlength > 0) //如果获取到

idsstr = idsstrsubstring(0, idsstrlength - 1); //把最后一个逗号去掉

if(isclength > 0) //如果获取到

isc = iscsubstring(0, isclength - 1); //把最后一个逗号去掉

alert("所有checkbox的值：" + idsstr);

alert("被选中checkbox的值：" + isc);

});

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

$(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(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); }, //允许节点被右击时出现 *** 作菜单

                icon    : "<%=requestgetContextPath() %>/css/themes/default/createpng",//右键d出菜单的此项 *** 作图标

                action  : function (NODE, TREE_OBJ) {

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

                                                     }

            },

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

           ,

            {

                id      : "edit",

                label   : "编辑目录信息",

                visible : function (NODE, TREE_OBJ) { if(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); },

                icon    : "<%=requestgetContextPath() %>/image/reg2gif",

                action  : function (NODE, TREE_OBJ) {

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

                                                    }

            },

            "separator"

            ,

            {

                id      : "privilege",

                label   : "设置目录权限",

                visible : function (NODE, TREE_OBJ) { if(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); },

                icon    : "<%=requestgetContextPath() %>/css/themes/default/renamepng",

                action  : function (NODE, TREE_OBJ) {

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

                                                    }

            },

            "separator",

            {

                id      : "delete",

                label   : "删除",

                visible : function (NODE, TREE_OBJ) { if(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); },

                icon    : "<%=requestgetContextPath() %>/css/themes/default/removepng",

                action  : function (NODE, TREE_OBJ) {

                                                    var tree=$tree_reference("browser");

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

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

                                                    NODE=$(treeparent(NODE));

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

                                                        treerefresh();

                                                    }else{

                                                        TreeRefresh();

                                                    }

                                                    });

                                                    }

            },

            "separator",

            {

                id      : "others",

                label   : "其他 *** 作",

                visible : function (NODE, TREE_OBJ) { if(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); },

                icon    : "<%=requestgetContextPath() %>/css/images/cutpng",

                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=treeparent($("#"+rid));

                    treerefresh(par_node);

}

});

刚好我也碰到这个问题。bind("select_nodejstree", function (event, data) { //myThisid 是jstree的Id,还有你必须设置每个节点的id

$('#' + myThisid)jstree("toggle_node", "#"+datarsltobjattr("id"));

})

jstree默认打开有两种方式，一种在生成树结构时在有子节点的li中加class="jstree-open"还有一种是树形载入完成后用jstree的所有节点open_all事件所有节点跳转是要在生成时在li中加XXX或在载入完后再用js加载

以上就是关于jstree从后台取数据加载后，在前台为什么展开不了节点，急啊···在线等全部的内容，包括:jstree从后台取数据加载后，在前台为什么展开不了节点，急啊···在线等、怎么把字符串赋值给treeNodes、怎样使树始终打开一个节点等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！