Jstree 1.0.2rc Config

本文介绍如何使用jQuery和jstree插件构建一个可搜索、可编辑的树状结构,支持新建、重命名和删除节点,并通过AJAX实现与后端的数据交互。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


$(function () {
$("#search").click(function () {
$("#taxon_tree").jstree("search",$("#search_str").val());
});

$("#taxon_tree")
.jstree({
"plugins" : [ "themes", "html_data", "search", "crrm", "contextmenu", "types"],
"contextmenu" : {
items:{
edit : false,
"New" : {
// The item label
"label" : "New material",
// The function to execute upon a click
"action" : function (obj) {
$.ajax({
type: 'GET',
url: "/materials/" + obj.attr("id") +"/new_material",
success : function (r) {
if(!r.status) {
$('#new_material').html(r);
}
},
error : function (r) {
alert("can't be blank");
}
});
},
// All below are optional
"_disabled" : false, // clicking the item won't do a thing
"_class" : "class", // class is applied to the item LI node
"separator_before" : false, // Insert a separator before the item
"separator_after" : true, // Insert a separator after the item
// false or string - if does not contain `/` - used as classname
"icon" : false,
}
}
},
"types" : {
// I set both options to -2, as I do not need depth and children count checking
// Those two checks may slow jstree a lot, so use only when needed
"max_depth" : -2,
"max_children" : -2,
// I want only `drive` nodes to be root nodes
// This will prevent moving or creating any other type as a root node
"valid_children" : [ "drive" ],
"types" : {
// The default type
"file" : {
// I want this type to have no children (so only leaf nodes)
// In my case - those are files
"valid_children" : "none",
// If we specify an icon for the default type it WILL OVERRIDE the theme icons
"icon" : {
"image" : "/images/rails.png"
}
},
// The `folder` type
"folder" : {
// can have files and other folders inside of it, but NOT `drive` nodes
"valid_children" : [ "default", "folder" ],
"icon" : {
"image" : "/images/grid.png"
}
},
// The `drive` nodes
"drive" : {
// can have files and folders inside, but NOT other `drive` nodes
"valid_children" : [ "default", "folder" ],
"icon" : {
"image" : "/static/v.1.0rc2/_demo/root.png"
},
// those options prevent the functions with the same name to be used on the `drive` type nodes
// internally the `before` event is used
"start_drag" : false,
"move_node" : false,
"delete_node" : false,
"remove" : false
}
}
},
})
.bind("create.jstree", function (e, data) {
$.ajax({
type: 'POST',
url: "/taxons",
data : {
"taxon[name]" : data.rslt.name ,
"taxon[taxonomy_id]" : data.rslt.parent.attr("name") ,
"parent" : data.rslt.parent.attr("id")
},
success : function (r) {
if(!r.status) {
data.inst.refresh();
}
},
error : function (r) {
alert("can't be blank");
}
});
})
.bind("rename.jstree", function (e, data) {
$.ajax({
type: 'PUT',
url: "/taxons/" + data.rslt.obj.attr("id"),
data : {
"taxon[name]" : data.rslt.new_name
},
success : function (r) {
if(!r.status) {
data.inst.refresh();
}
},
error : function (r) {
alert("can't be blank");
}
});
})
.bind("remove.jstree", function (e, data) {
$.ajax({
type: 'DELETE',
url: "/taxons/" + data.rslt.obj.attr("id"),
success : function (r) {
if(!r.status) {
data.inst.refresh();
}
},
error : function (r) {
alert("Something wrong");
}
});
});
});

{ "name": "AwesomeProject", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint .", "postinstall": "patch-package", "generate:icons": "node generateIconMap.js" }, "dependencies": { "@ant-design/icons-react-native": "^2.3.2", "@ant-design/react-native": "^5.1.0", "@react-native-async-storage/async-storage": "^1.19.0", "@react-native-community/cameraroll": "^4.0.0", "@react-native-community/masked-view": "0.1.11", "@react-native-community/segmented-control": "^2.1.1", "@react-native-community/slider": "^3.0.3", "@react-native-community/viewpager": "^4.1.6", "@react-native-picker/picker": "^1.16.8", "@react-navigation/native": "^6.1.7", "@react-navigation/native-stack": "^6.9.12", "@rneui/base": "^4.0.0-rc.8", "@rneui/themed": "^4.0.0-rc.8", "d3-shape": "^1.3.7", "minio": "^7.0.15", "react": "17.0.2", "react-native": "0.68.0", "react-native-background-timer": "^2.4.1", "react-native-device-info": "^8.1.3", "react-native-elements": "^1.2.7", "react-native-exception-handler": "^2.10.10", "react-native-fs": "^2.18.0", "react-native-gesture-handler": "2.14.0", "react-native-get-location": "^2.1.0", "react-native-get-random-values": "^1.4.0", "react-native-image-picker": "^3.8.1", "react-native-image-zoom-viewer": "^3.0.1", "react-native-linear-gradient": "^2.8.3", "react-native-modal-dropdown": "^1.0.2", "react-native-permissions": "3.8.0", "react-native-reanimated": "2.14.4", "react-native-safe-area-context": "3.3.2", "react-native-screens": "3.15.0", "react-native-signature-capture": "^0.4.12", "react-native-sound": "^0.11.1", "react-native-sqlite-storage": "^4.1.0", "react-native-svg-charts": "5.4.0", "react-native-table-component": "^1.2.2", "react-native-vector-icons": "^9.2.0", "react-native-webview": "^11.26.0", "react-redux": "^7.2.0", "redux": "^4.0.5", "redux-thunk": "^2.3.0" }, "devDependencies": { "@babel/core": "^7.12.9", "@babel/runtime": "^7.12.5", "@react-native-community/cli-doctor": "^10.0.0", "@react-native-community/eslint-config": "^2.0.0", "@react-navigation/native": "^6.1.7", "@react-navigation/native-stack": "^6.9.12", "babel-jest": "^26.6.3", "babel-plugin-import": "^1.13.8", "eslint": "^7.32.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.68.0", "patch-package": "^6.4.7", "react-native-version-check": "^3.5.0", "react-test-renderer": "17.0.2" }, "jest": { "preset": "react-native" } } 为什么 npm i 后就会报错D:\AwesomeProject>npm i npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: AwesomeProject@0.0.1 npm error Found: react-native-gesture-handler@1.10.3 npm error node_modules/react-native-gesture-handler npm error react-native-gesture-handler@"^1.10.3" from the root project npm error npm error Could not resolve dependency: npm error peer react-native-gesture-handler@">=2.14.0" from @ant-design/react-native@5.4.2 npm error node_modules/@ant-design/react-native npm error @ant-design/react-native@"^5.1.0" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error C:\Users\临时\AppData\Local\npm-cache\_logs\2025-07-31T05_28_06_947Z-eresolve-report.txt npm error A complete log of this run can be found in: C:\Users\临时\AppData\Local\npm-cache\_logs\2025-07-31T05_28_06_947Z-debug-0.log
08-01
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值