JsTreeの使用-yellowcong

JsTree的重要函数

---

更多官方API，请点击JSTree

取消选中

deselect_all ([supress_event]
1. 当设置为true,就不会重复触发changed.jstree 的事件

$("#childZtree").jstree("deselect_all",true);

选中节点

select_node (obj [, supress_event, prevent_open])
1. jsTree节点的ID，每一个节点都有唯一的ID
2. 当设置为true,就不会重复触发changed.jstree 的事件
3. 如果设置为“true”，则选定节点的父级不会打开。这个一定要设定为true，不然就会导致浏览器运行缓慢，多事件匹配

//jstree的bug，用代码选中一个节点后，上一个节点仍是选中的状态
//取消选中， 然后再选择我们需要选中的数
$("#childZtree").jstree("deselect_all",true);
$('#childZtree').jstree('select_node', selectNode.original.id,true);

打开节点

open_node (obj [, callback, animation])
1. jsTree节点的ID，每一个节点都有唯一的ID
2. 回调函数
3. 节点的动画效果

$("#childZtree").jstree("open_node",parentId);

创建节点

create_node ([par, node, pos, callback, is_loaded])
1. 父类的id
2. 子类的JSON数据
3. “first” and “last” 生成节点的排序，默认是last
4. false 回调函数
5. true 是否加载 内部参数表示如果父节点成功地加载

这个函数有问题，不是特别好用，下面的是，弄了好久，才试出来，可以通过这段代码完成节点的添加操作

//创建节点
$("#childZtree").jstree("create_node", parentId,  childNode[i], "last", false, true);

动态创建节点

动态创建JSTree节点的难点
1、数据动态加载
2、设定加载完数据选中
3、设定的数据选择和初始化逻辑问题

//rootNode  是ajax请求获取的数据，最好是将数据获取和表示用两个函数写，不然就会导致逻辑过多而混乱

$("#childZtree").jstree({
        'core': {'check_callback':true,
                 'multiple':false,
                 "expand_selected_onload":true,
                 'data': rootNode },
        }).on('select_node.jstree', function (e, data) {
            initButton();
            selectNode = data.node;
        }).on('changed.jstree', function (e, data) {
            var action = data.action;
            if(action == "select_node"){
                if(data.node.children.length ==0 ){
                    //子节点 createChildNode 子节点的函数

                    createChildNode(model,saikeiKb,selectNode.original.id);
                }
            //jstree的bug，用代码选中一个节点后，上一个节点仍是选中的状态
            //取消选中， 然后再选择我们需要选中的数据  $("#childZtree").jstree("deselect_all",true);
                $('#childZtree').jstree('select_node', selectNode.original.id,true);
            }

        }).on('create_node.jstree', function (e, data) {

            //在创建节点事件监听中设定默认的选中节点
            if(stCodeStr != null && stCodeStr == data.node.original.id){
                $("#kamokuStName").val(data.node.original.name);
                $("#jstree").jstree("open_node",stCodeStr);
                if(!hasSelect){
                    $('#childZtree').jstree('select_node', stCodeStr,true);
                    hasSelect = true;
                }
            }

            //第二个参数的初始化
            if(enCodeStr != null && enCodeStr == data.node.original.id){
                $("#kamokuEnName").val(data.node.original.name);
                if(!hasSelect){
                    $('#childZtree').jstree('select_node', enCodeStr,true);
                    hasSelect = true;
                }
            }



        }).on("loaded.jstree", function (event, data) {
//在loaded节点中，做树完成后，点击树的操作，这个节点方法只调用一次
//只会在刚创建完节点，然后设定节点里面的方法

                        }
                    }
                }
            }

创建子节点

子节点创建，需要关注节点创建函数的迭代调用（自己调用自己）
代码不是完全代码，部分删掉了

function createChildNode(model,saikeiKb,parentId,selectCode){
    var childNode = getChildNodeJson(model,saikeiKb,parentId);
    if(childNode == null){
        return ;
    }
    for(var i=0;i<childNode.length;i++){
        //创建节点
        $("#childZtree").jstree("create_node", parentId,  childNode[i], "last", false, true);
    }
        //当只有子节点中还有数据，我们接着创建节点，知道没有数据
    if(childNode.length ==1){
            createChildNode(model,saikeiKb,childNode[0].id,selectCode);
        }
        if(childNode.length == 0){

            //做一些这个节点的逻辑操作
            $('#childZtree').jstree('select_node', parentId);
        }
        ）
        if(childNode.length > 0){
    //当上一个节点有多个节点，打开父节点     $("#childZtree").jstree("open_node",parentId);
        }
    }
}