jsTree工作笔记001---jsTree的基本使用_js实现树形结构

林俭

2023-12-01

技术交流QQ群【JAVA,C++,Python,.NET,BigData,AI】：170933152

判断用户有没有选中节点:

var treeown = $('#tree_' + own).jstree(true);//获得整个树
if (treeown) {
    var selectednode = _getCurrNode(own);
    if (selectednode) {
        //没有勾选是否功能菜单
       //$.modal.alertWarning("请先选中要删除的菜单!!");
    } else {
        $.modal.alertWarning("请先选中要删除的菜单!!");
        return;
    }
}

/**
 *   获取当前所选中的结点
 */
function _getCurrNode(own){
    var ref = $('#tree_' + own).jstree(true),
        sel = ref.get_selected();
    console.log(sel);
    if(!sel.length) {
        console.log("----");
        return false;
    }
    selsel = sel[0];
    return sel;
}

判断是否为最末级菜单:

//获取选中节点,判断该节点有无子节点:
var treeown = $('#tree_' + own).jstree(true);//获得整个树
if (treeown) {
    var selectednode = _getCurrNode(own);
    if (util.isEmpty(variety)) {
        //没有勾选是否功能菜单
    } else {
        if (treeown.is_leaf(selectednode)) {
            //如果是最末级别,可以选择为功能菜单
        } else {
            //否则不能勾选为功能菜单
            $.modal.alertWarning("请勾选末级菜单为功能菜单!");
            return;
        }
    }
}

判断是否有子节点:

有3种方法:

用is_parent( node)方法, node传节点ID或节点对象, 有下级节点则返回true.
用is_leaf(node)方法, 此方法表示是否为最末级, 刚好和is_parent相反.
在事件中获取node对象, 其中node.child为包含所有直接子节点的数组, node.child.length === 0 则没有下级节点.

示例:

html

1	`<div` `id="tree"></div>`

JavaScript

var $tree = $('#tree');

$tree.jstree({

core: {

data: [

{ id: '1', parent: '#', text: "1" },

{ id: '2', parent: '1', text: "11" },

{ id: '3', parent: '1', text: "12" },

{ id: '4', parent: '2', text: "111" }

]

}

});

$tree.on('ready.jstree', function () {

//jQuery风格

$tree.jstree('is_parent', '2'); //true

$tree.jstree('is_leaf', '2'); //false

//使用jstree实例对象操作

var tree = $tree.jstree(true);

tree.is_parent('4'); //false

tree.is_leaf('4'); //true

//注意: jstree的初始化是一个异步过程, 如果上述代码没有放在初始化完成的事件中,将不会得到正确的结果,因为执行代码时,jstree还没生成.

});

//jstree事件中的应用

$tree.on('select_node.jstree', function (e, data) {

var node = data.node;

if(node.child.length > 0)

console.log('此节点有下级节点');

var tree = data.instance;

if(tree.is_parent(node)) //这里无需tree.is_parent(node.id), is_parent方法可以node对象作为参数.

console.log('此节点有下级节点');

});

补充:刷新树
$('#tree_' + own).jstree(true).refresh();

需要导入这两个文件:

<link href="../plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" type="text/css" />
<script src="../plugins/jstree/dist/jstree.min.js" type="text/javascript"></script>

这里需要注意:如果用jstree之前,一棵树,不销毁的话,继续用是没有效果的jstree,会还是之前构建的树,用之前需要销毁之前的.

需要调用:

$('#tab_1').jstree("destroy");

这样来把之前的树销毁一下,重新生成新的才行

1.定义:

其实定义一个id,就可以来初始化一个tree

<div class="tab-content">
    <div class="tab-pane active" id="tab_1">
    </div>
    <div class="tab-pane" id="tab_2">
    </div>
    <div class="tab-pane" id="tab_3">
    </div>
    <div class="tab-pane" id="tab_4">
    </div>
    <div class="tab-pane active" id="tab_5">
    </div>
</div>

2. 初始化一棵树

根据div的id初始化一棵树:

$('#tab_'+own).jstree({
    "core" : {
        "themes" : {
            "responsive": false
        },
        "check_callback" : true,
        'data' : function (obj, callback) {
            var jsonstr="[]";
            var jsonarray = eval('('+jsonstr+')');
            constant.ajax.get({ //传给后台的数据,以及访问后台的url
                url:http://localhost:8081/sc-test/getmenu,
                data:{curSystem:own,type:1,curroleId:curoleid},//传给后台的数据,根据需要写
                async: false,
                success:function(result) { //只有这里需要自己写
                    var arrays= result.data.list;
                    for(var i=0 ; i<arrays.length; i++){
                        if(arrays[i].parentMenuid==null){
                            arrays[i].parentMenuid = 0;
                        }
                        var arr = {
                            "id":arrays[i].id,//树节点的id
                        "parent":arrays[i].parentMenuid==0?"#":arrays[i].parentMenuid        父节点
                            "text":arrays[i].menuName,//显示菜单名字
                            "state":{"selected":arrays[i].isselected}
                             //这里,标识一个节点的CheckBox是否为选中的状态如果,树
                             //没有CheckBox,则不需要state":这个部分
                        }
                        jsonarray.push(arr);
                    }
                }
            })
            callback.call(this, jsonarray);
        }
    },
    "types" : {
        "default" : {
            "icon" : "fa fa-folder icon-state-warning icon-lg"
        },
        "file" : {
            "icon" : "fa fa-file icon-state-warning icon-lg"
        }
    },
    "state" : { "key" : "demo2" },
    "checkbox" : {
        "keep_selected_style" : true
    },
    "plugins" : ["themes","contextmenu",'checkbox'] 
    // "plugins":["themes","html_data","contextmenu"] 
    //这个是不带CheckBox的,如需要CheckBox,使用上面的
});

3.根据选择的树的某一节点,的时候做什么动作


$('#tab_'+own).on('changed.jstree',function(e,data){
    //当前选中节点的id
    var domId = data.instance.get_node(data.selected[0]).id;
    //当前选中节点的文本值
    //var value = data.instance.get_node(data.selected[0]).text;

    if(domId!=undefined){
        constant.ajax.get({
            url:constant.url.sc_support.cmenu+"/"+domId,//根据选中的节点id去后台取数据
            data:{},
            async:false,
            success:function(data){
                var result = data.data;
                //console.log(result);
                if(result!=null){
                    menuId = result.id;
                    debugger;
                    $('#parentMenuid'+own).val(result.parentMenuid);
                    $('#menuName'+own).val(result.menuName);
                    $('#menuUrl'+own).val(result.menuUrl);
                    $('#menuOrder'+own).val(result.menuOrder);
                    $('#menuIcon'+own).val(result.menuIcon);
                    if(result.variety=="1"){
                       //让:<input id="isvariety" type="checkbox" style="margin-left: 10px;vertical-align: text-bottom;" name="isvariety" value="1">
//类似于上面这个选中,或非选中
                        $("#isvariety").prop("checked","checked");
                    }else{
                        $("#isvariety").prop("checked",false);
                    }
                    // if(own==dic.getByDictId("SYS_TYPE","SYS_PE").code)
                    //     $("#variety").val(result.varIety);
                    // }
                }
            },
            error:function(){
            }
        })
    }
});

4.点击保存的时候,获取选中的节点值传给后台处理

$("#btnSaveRoleAccess").click(function () {//这里有5颗树,获取每颗树,上CheckBox被选中的部分

        var slectedArray=[];
        debugger;

        var tab1 = $('#tab_1').jstree(true);//获得整个树
        if(tab1){//如果树不为null
            var tab1CheckedNodes = tab1.get_checked(true);
            tab1CheckedNodes.forEach(function(e)
            {
                if(!!e.parent && e.parent!="#"){
                    slectedArray.push({"id":e.id,"text":e.text,"systype":"1"});
                }
            });
        }

        var tab2 = $('#tab_2').jstree(true);//获得整个树
        if(tab2){
            var tab2CheckedNodes = tab2.get_checked(true);
            tab2CheckedNodes.forEach(function(e)
            {
                if(!!e.parent && e.parent!="#"){
                    slectedArray.push({"id":e.id,"text":e.text,"systype":"2"});
                }
            });
        }

        var tab3 = $('#tab_3').jstree(true);//获得整个树
        if(tab3){
            var tab3CheckedNodes = tab3.get_checked(true);
            tab3CheckedNodes.forEach(function(e)
            {
                if(!!e.parent && e.parent!="#"){
                    slectedArray.push({"id":e.id,"text":e.text,"systype":"3"});
                }
            });
        }

        var tab4 = $('#tab_4').jstree(true);//获得整个树
        if(tab4){
            var tab4CheckedNodes = tab4.get_checked(true);
            tab4CheckedNodes.forEach(function(e)
            {
                if(!!e.parent && e.parent!="#"){
                    slectedArray.push({"id":e.id,"text":e.text,"systype":"4"});
                }
            });
        }

        var slectedArrayStr=JSON.stringify(slectedArray);

        var cmParam = {};
        var role={}

        role.rolename = $("#inputrolename").val();
        role.roleintro = $("#inputroleintro").val();
        role.roleid = curoleid;

        cmParam.type = "addBusMenuAccess";
        cmParam.mark = JSON.stringify(role);
        cmParam.data = slectedArrayStr;//发给后台处理

        constant.ajax.post(constant.url.sc_support.rolebusmenuaccess,cmParam,
            function (data){
                if(data.data==0){
                    swal('操作成功','','success');
                    accessArray();
                }else{
                    swal('请先添加这个权限','','warning')
                }
                //$("#btn-rolepermiss").trigger("click");
                //$("a[class = 'jstree-anchor jstree-clicked']:contains('角色权限关联')").trigger("click");
            },
            function (err){},
            null
        )
    });

jsTree工作笔记001---jsTree的基本使用_js实现树形结构

相关阅读

相关文章

相关问答

相关文档