react项目可以引入jstree插件吗

JavaScript0142

react项目可以引入jstree插件吗,第1张

jstree是基于jquery的插件，是需要和dom元素打交道的。要使用的话需要先引入jquery。

你可以在你的react模板页面中直接引入jquery和jstree。在你需要用到的组件里用ref拿到对应元素，调用jstree的初始化方法就可以。一般要在componentDidMount中初始化。

jquery树形表格treetable插件使用方法步骤：

第一步：

1.上官网下载。

2.插件引用，当下载的时候，会有很多个文件，但是根据api来看，如果只想做简单的效果，js除了引用juquery外，只需要引用jquery.treetable.js插件，如果想让它有默认的外观样式还需要引入它们的jquery.treetable.css和jquery.treetable.theme.default.css

第二步：建立table格式

<table id="example-advanced">

<tr data-tt-id="1">

<td>大家电</td>

</tr>

<tr data-tt-id="2" data-tt-parent-id="1">

<td>---电视</td>

</tr>

<tr data-tt-id="3" data-tt-parent-id="1">

<td>---洗衣机</td>

</tr>

<tr data-tt-id="4" data-tt-parent-id="1">

<td>---冰箱</td>

</tr>

</table>

第三步：引入JS

/* 初始化数据 */

$("#example-advanced").treetable({ expandable: true })/* 高亮显示 */$("#example-advanced tbody").on("mousedown", "tr", function() {

$(".selected").not(this).removeClass("selected")

$(this).toggleClass("selected")

})/* 点击展开&&关闭 */<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('expandAll')return false">展开</a>

<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('collapseAll')return false">关闭l</a>

楼上那个是什么答案，乱七八糟，target在data里面，不在node里面，function(node,data)，最好把data打印到控制台，展开看一下这个target在不在，我有一个tree的节点竟然没有target，我晕倒了，后来我发现里面有一个domId，用jQuery包装一下$('#'+data.domId)，解释一下：target的就是包装你idField的div，所以用domId就是这个div的id，所以得到domId也可以用，希望帮到你，我也是新手