|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<title>jstree Example</title>
|
|
|
<!-- jstree CSS dosyasını sayfaya dahil edin -->
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/themes/default/style.min.css" />
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
<style>
|
|
|
.jstree-custom-icon {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
background-size: contain;
|
|
|
}</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<!-- Ağaç yapısını gösterecek bir div oluşturun -->
|
|
|
<div id="tree-container"></div>
|
|
|
<button id="save-button" ></button>
|
|
|
<!-- jstree JavaScript dosyalarını sayfaya dahil edin -->
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/jstree.min.js"></script>
|
|
|
<script>
|
|
|
// Ağaç yapısını oluşturmak için gerekli verileri tanımlayın
|
|
|
var treeData = [
|
|
|
{
|
|
|
id:"Node1",
|
|
|
text: "Node 1",
|
|
|
children: [
|
|
|
{
|
|
|
id:"ChildNode1", text: "Child Node 2", icon:"fa fa-python" },
|
|
|
{ id:"ChildNode2", text: "Child Node 2", icon:"/static/public/assets/img/file_types/html3.svg" },
|
|
|
{ id:"ChildNode5", text: "Child Node 2", icon:"/static/public/assets/img/file_types/html3.svg" },
|
|
|
{ id:"ChildNode7", text: "Child Node 2", icon:"/static/public/assets/img/file_types/python.svg" },
|
|
|
{ id:"ChildNode8", text: "Child Node 2", icon:"/static/public/assets/img/file_types/python1.svg" },
|
|
|
{ id:"ChildNode9", text: "Child Node 2", icon:"/static/public/assets/img/file_types/database.svg" },
|
|
|
{ id:"ChildNode6", text: "Child Node 2", icon:"/static/public/assets/img/file_types/js.svg" }
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
|
|
|
id:"Node2",
|
|
|
text: "Node 2",
|
|
|
children: [
|
|
|
{ id:"ChildNode3", text: "Child Node 3" },
|
|
|
{ id:"ChildNode4", text: "Child Node 4" }
|
|
|
]
|
|
|
}
|
|
|
];
|
|
|
|
|
|
// Ağaç yapısını oluşturun ve sayfaya ekleyin
|
|
|
|
|
|
|
|
|
$('#tree-container').jstree({
|
|
|
"core" : {
|
|
|
"check_callback" : true,
|
|
|
"themes" : { "stripes" : true },
|
|
|
"data" : treeData
|
|
|
},
|
|
|
"plugins" : [ "dnd", "contextmenu" ],
|
|
|
|
|
|
"contextmenu": {
|
|
|
"items": function($node) {
|
|
|
var tree = this;
|
|
|
return {
|
|
|
"Create": {
|
|
|
"separator_before": false,
|
|
|
"separator_after": false,
|
|
|
"label": "Ekle",
|
|
|
"action": function(obj) {
|
|
|
var newNode = tree.create_node($node);
|
|
|
tree.edit(newNode);
|
|
|
}
|
|
|
},
|
|
|
"Rename": {
|
|
|
"separator_before": false,
|
|
|
"separator_after": false,
|
|
|
"label": "Değiştir",
|
|
|
"action": function(obj) {
|
|
|
tree.edit($node);
|
|
|
}
|
|
|
},
|
|
|
"Delete": {
|
|
|
"separator_before": false,
|
|
|
"separator_after": false,
|
|
|
"label": "Sil",
|
|
|
"action": function(obj) {
|
|
|
tree.delete_node($node);
|
|
|
}
|
|
|
},
|
|
|
"Copy": {
|
|
|
"separator_before": false,
|
|
|
"separator_after": false,
|
|
|
"label": "Kopyala",
|
|
|
"action": function(obj) {
|
|
|
tree.copy($node);
|
|
|
}
|
|
|
},
|
|
|
"Cut": {
|
|
|
"separator_before": false,
|
|
|
"separator_after": false,
|
|
|
"label": "Kes",
|
|
|
"action": function(obj) {
|
|
|
tree.cut($node);
|
|
|
}
|
|
|
},
|
|
|
"Paste": {
|
|
|
"separator_before": false,
|
|
|
"separator_after": false,
|
|
|
"label": "Yapıştır",
|
|
|
"action": function(obj) {
|
|
|
tree.paste($node);
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
}
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
$('#save-button').click(function() {
|
|
|
var tree = $('#tree-container').jstree(true);
|
|
|
var treeData = tree.get_json();
|
|
|
console.log(treeData);
|
|
|
// kaydetme işlemini burada yapın (örneğin, AJAX ile sunucuya gönderin)
|
|
|
});
|
|
|
|
|
|
$('#tree-container').on('create_node.jstree', function (e, data) {
|
|
|
console.log(data.node.text); // eklenen satırın metnini gösterir
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
//function loadTreeData() {
|
|
|
// $.ajax({
|
|
|
// url: '/path/to/api/method', // .NET Web API metodunun adresi
|
|
|
// type: 'GET',
|
|
|
// success: function(data) {
|
|
|
// // Ağaç yapısı verilerini alın ve jstree nesnesini oluşturun
|
|
|
// $('#tree-container').jstree({
|
|
|
// 'core': {
|
|
|
// 'data': data
|
|
|
// },
|
|
|
// 'plugins': ['contextmenu', 'rename']
|
|
|
// });
|
|
|
// },
|
|
|
// error: function(error) {
|
|
|
// console.log(error);
|
|
|
// }
|
|
|
// });
|
|
|
// }
|
|
|
|
|
|
// // Sayfa yüklendiğinde ağaç yapısı verilerini yükleyin
|
|
|
// $(document).ready(function() {
|
|
|
// loadTreeData();
|
|
|
// });
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
|
|
|
