first commit

2 years ago · 5d3884cdf1
commit 5d3884cdf1
4 changed files with 179 additions and 0 deletions
--- a/JsTree.html
+++ b/JsTree.html
@ -0,0 +1,163 @@
+<!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 1", 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>
+
--- a/README.md
+++ b/README.md
--- a/a.js
+++ b/a.js
--- a/index.html
+++ b/index.html
@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Hackercan Website Template</title>
+  <meta name="description" content="A simple HTML5 Template for new projects.">
+</head>
+<body>
+    <a>
+        Deneme
+    </a>
+  <!-- your content here... -->
+</body>
+</html>
+