react项目可以引入jstree插件吗

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react项目可以引入jstree插件吗相关的知识，希望对你有一定的参考价值。

jstree是基于jquery的插件，是需要和dom元素打交道的。要使用的话需要先引入jquery。
你可以在你的react模板页面中直接引入jquery和jstree。在你需要用到的组件里用ref拿到对应元素，调用jstree的初始化方法就可以。一般要在componentDidMount中初始化。 参考技术A 可以，你可以先把jstree封装成一个符合你业务需求的react组件，然后在其他组件中调用封装好的组件。

封装时，
在componentDidMount、componentDidUpdate处理外部组件对树的操作，
在shouldComponentUpdate中始终返回false，防止react刷新组件
在componentDidMount中将树的事件通过props中的事件函数返回给父组件
在componentWillUnmount中处理树的销毁，事件的解绑等操作 参考技术B 可以，react主要是用数据控制页面，但有时候需要批量操作dom的情况下ref并不好用

JQuery/JS插件 jsTree 常用方法

官网地址：https://www.jstree.com/

API：https://www.jstree.com/api/#/?q=$.jstree.defaults.checkbox&f=$.jstree.defaults.checkbox.tie_selection

插件：https://www.jstree.com/plugins/

插件checkbox的配置：https://www.jstree.com/api/#/?q=$.jstree.defaults.checkbox&f=$.jstree.defaults.checkbox.tie_selection

 

 

 

                var instance = $(‘#plugins1‘).jstree(true);//获取jstree对象
                instance.deselect_all();//取消选中
                instance.select_node(‘22‘);//选中指定节点

                instance.hide_checkboxes();//隐藏所有的checkbox

                console.log(instance.get_checked_descendants (22));//获取 当前节点下的 子节点

                instance.check_all();//选中 所有节点
                instance.uncheck_all();//取消选中的 所有节点

                console.log(instance.get_checked(false));//获取 所有选中的节点 参数：true（返回对象） false/null（返回ids）

                console.log(instance.get_top_checked());//获取顶层选中的节点

 

 

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>



    <div id="plugins1"></div>


    <link href="dist/themes/default/style.min.css" rel="stylesheet" />
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="dist/jstree.min.js"></script>


    <script type="text/javascript">

        //Checkbox plugin
        $(function () {







            //$(‘#jstreeModule1111‘).jstree({
            //    ‘core‘: {
            //        ‘data‘: data,
            //        ‘expand_selected_onload‘: false,//加载完成后默认展开所有选中节点true为选中 false为不展开
            //        ‘themes‘: {
            //            dots: true //取消连接线
            //        }
            //    },
            //    plugins: ["checkbox", "themes",],
            //    checkbox: {
            //        "keep_selected_style": false,// 保持选中样式 true为保持，false为不保存，样式不影响功能
            //        ‘three_state‘: true,//父子节点关联，true为关联，false为不关联
            //        ‘tie_selection‘: false, //
            //        ‘whole_node‘: false,//复选框与节点关联 true 为关联 false为不关联

            //    },
            //    lang: {
            //        loading: "目录加载中……"  //在用户等待数据渲染的时候给出的提示内容，默认为loading
            //    },
            //});





            $("#plugins1").jstree({
                "checkbox": {
                    //"keep_selected_style": true//显示选中的样式

                    //"keep_selected_style": false,// 保持选中样式 true为保持，false为不保存，样式不影响功能
                    ‘three_state‘: true,//父子节点关联，true为关联，false为不关联
                    ‘tie_selection‘: false, //
                    ‘whole_node‘: false,//复选框与节点关联 true 为关联 false为不关联
                },
                "plugins": ["checkbox"],//加载插件 checkbox
                ‘core‘: {
                    ‘expand_selected_onload‘: true,//加载完成后默认展开所有选中节点true为选中 false为不展开
                    ‘themes‘: {
                        dots: true //取消连接线
                    },
                    ‘data‘: [
                        {
                            "text": "Root node 1",
                            "id": "1",
                            "state": { "opened": true },
                            "children": [
                                {
                                    "text": "Child node 11", "id": "11", "state": {
                                        "opened": true,
                                        //"selected": false//默认不选中
                                    }
                                },
                                {
                                    "text": "Child node 22", "id": "22", "state": {
                                        "opened": true,
                                        //"selected": true,//默认选中
                                        //"checked": true
                                    },
                                    "children": [
                                        {
                                            "text": "Child node 221", "id": "221", "state": {
                                                "opened": true
                                            }
                                        },
                                        {
                                            "text": "Child node 222", "id": "222", "state": {
                                                "opened": true
                                            },
                                        }
                                    ]
                                },
                                {
                                    "text": "Child node 33", "id": "33", "state": {
                                        "opened": true,
                                        //"selected": true,//默认选中
                                        //"checked": true
                                    }
                                }
                            ]
                        }
                    ]
                }
            });








            //checkbox 选中事件
            $(‘#plugins1‘).on("check_node.jstree", function (node, data, event) {
                //console.log(data);

                ////注意：这个是有问题的 算是bug吧
                //console.log(data.selected);//获取 选中的 所有节点 

                //下面这个 获取选中的节点没问题
                var instance = $(‘#plugins1‘).jstree(true);//获取jstree对象
                console.log(instance.get_checked(false));//获取 所有选中的节点 参数：true（返回对象） false/null（返回ids）

                var d = instance.get_checked(false);
                var i = 1;

            });


            //checkbox 取消选中事件
            $(‘#plugins1‘).on("uncheck_node.jstree", function (node, data, event) {

                //console.log(data);

                ////注意：这个是有问题的 算是bug吧
                //console.log(data.selected);//获取 选中的 所有节点 

                //下面这个 获取选中的节点没问题
                var instance = $(‘#plugins1‘).jstree(true);//获取jstree对象
                console.log(instance.get_checked(false));//获取 所有选中的节点 参数：true（返回对象） false/null（返回ids）

                var d = instance.get_checked(false);
                var i = 1;
            });







            //$(‘#plugins1‘).on("changed.jstree", function (e, data) {
            //    console.log(data);

            //    if (data.hasOwnProperty(‘node‘) && data.node.hasOwnProperty(‘children_d‘)) {
            //        console.log(data.node.children_d);//所有选中的子节点（不包含当前节点）
            //    }

            //    console.log(data.selected);//当前tree 所有选中的 节点（包含当前节点）

            //});





            //setTimeout(function () {
            //    var instance = $(‘#plugins1‘).jstree(true);//获取jstree对象
            //    //instance.deselect_all();//取消选中
            //    //instance.select_node(‘22‘);//选中指定节点

            //    //instance.hide_checkboxes();//隐藏所有的checkbox

            //    //console.log(instance.get_checked_descendants (22));//获取 当前节点下的 子节点

            //    //instance.check_all();//选中 所有节点
            //    //instance.uncheck_all();//取消选中的 所有节点

            //    //console.log(instance.get_checked(false));//获取 所有选中的节点 参数：true（返回对象） false/null（返回ids）

            //    //console.log(instance.get_top_checked());//获取顶层选中的节点

            //}, 1000);





        });


    </script>



</body>
</html>

 

以上是关于react项目可以引入jstree插件吗的主要内容，如果未能解决你的问题，请参考以下文章

uni-app 项目引入第三方js插件，单个js文件引入成功，调用该插件方法

vue项目引入第三方js插件，单个js文件引入成功，使用该插件方法时报错

在react项目中如何引入第三方库

jstree 树形菜单问题

项目里面引入字体包react

jsTree树形菜单分类