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>