使用jQuery jstree实现多选时遇'tmp.plugin is not a function'错误求助

看起来你在使用jstree实现产品多选功能时碰到了这个棘手的初始化错误，我来帮你梳理几个大概率能解决问题的方向：

可能的原因及对应解决步骤 #

1. 检查jstree的依赖加载顺序与完整性 #

jstree依赖jQuery，必须先加载jQuery，再加载jstree的JS和CSS文件，而且要确保用的是完整的jstree包（包含所有插件模块）：

• 页面引入顺序示例：

  <!-- 优先引入jQuery -->
  <script src="jquery.min.js"></script>
  <!-- 再引入jstree的样式和核心脚本 -->
  <link rel="stylesheet" href="jstree/dist/themes/default/style.min.css" />
  <script src="jstree/dist/jstree.min.js"></script>
  

• 避免使用裁剪版的jstree文件，直接从官方渠道下载完整包，确保plugin模块没有缺失。

2. 避免重复初始化jstree #

你的代码绑定在点击事件里，每次点击都会尝试初始化一次树，重复初始化很容易触发这类奇怪的错误。可以先判断树是否已初始化，再执行对应操作：

$('#TreeViewPopup').click(function (f) {
    $('#TreeViewModal').modal('toggle');
    var $tree = $('#tree');
    // 检查是否已经初始化过jstree
    if (!$tree.hasClass('jstree')) {
        $tree.jstree({
            plugins: ['sort', 'types', 'checkbox'],
            'core': {
                'data': {
                    "url": function () {
                        return '@Url.Content("~/TechnicalService/Technical/FullTreeView")' + '?ProductID=' + $("#SelectProductID").val();
                    },
                    "dataType": "json"
                }
            }
        });
    } else {
        // 若已初始化，可选择刷新数据或者直接显示
        $tree.jstree(true).refresh();
    }
});

3. 排查版本兼容性问题 #

不同版本的jstree和jQuery可能存在兼容性冲突：

• 如果用的是jQuery 2.x，建议降级jstree到3.3.x版本；如果是jQuery 3.x，使用最新的jstree稳定版。

4. 解决JS库冲突问题 #

页面中其他JS库（比如Prototype、MooTools）可能和jQuery的$符号冲突，导致jstree无法正常加载。可以尝试使用jQuery的noConflict模式：

var $j = jQuery.noConflict();
$j('#TreeViewPopup').click(function (f) {
    $j('#TreeViewModal').modal('toggle');
    var $tree = $j('#tree');
    if (!$tree.hasClass('jstree')) {
        $tree.jstree({
            plugins: ['sort', 'types', 'checkbox'],
            'core': {
                'data': {
                    "url": function () {
                        return '@Url.Content("~/TechnicalService/Technical/FullTreeView")' + '?ProductID=' + $j("#SelectProductID").val();
                    },
                    "dataType": "json"
                }
            }
        });
    }
});

额外排查提示 #

• 打开浏览器开发者工具（F12），查看控制台是否有前置错误（比如jstree文件404加载失败），这类问题往往是后续报错的根源；
• 确保FullTreeView接口返回的是jstree要求的标准JSON格式（每个节点需包含id、text等必要字段），数据格式错误也可能间接导致初始化失败。

内容的提问来源于stack exchange，提问作者陌 Ibrahim