Tải trọng lười biếng với jsTree

Question

Tôi đang cố gắng tự động tải các nút của một jtree khi chúng được mở rộng. Tài liệu nhỏ tôi tìm thấy là vào cuối this page.

Tôi đã tìm thấy một số giải pháp tạo từng nút một với vòng lặp như this one. Tôi đã không thử nó, nhưng nhìn vào trang tài liệu tôi có cảm giác rằng jstree nên chăm sóc đi xe đạp qua các nút.

Tôi đã tìm thấy nhiều giải pháp sử dụng plugins: ["json_data"], nhưng plugins documentation page không đề cập đến plugin đó chút nào. Đó có phải là một plugin cũ không cần thiết nữa không?

thực hiện hiện tại của tôi sử dụng mã này để tải toàn bộ cây trong một shot:

$.ajax({ 
    var pn = $('#project_number').val(); 
    url : "bomtree?part=" + pn, 
    success : function(tree_content) { 
     var data = $.parseJSON(tree_content); 
     var config = { 
      'core' : { 
       'data' : data 
      } 
     }; 
     $('#bom_tree').jstree(config); 
    } 
}); 

tôi sửa đổi mã trên trang tài liệu như thế này:

$(function() { 
    var pn = $('#project_number').val(); 
    $('#tree').jstree({ 
     'core' : { 
      'data' : { 
       'url' : function(node) { 
        return '/doc/test2'; 
       }, 
       'data' : function(node) { 
        return { 
         'part' : node.id === '#' ? pn : node.id 
        }; 
       } 
      } 
     } 
    }); 
}); 

Văn bản json cùng làm việc với mã đầu tiên, bây giờ với mã thứ hai. Tài liệu nói The format remains the same as the above, vì vậy tôi đã không thay đổi nó.

tôi đã cố gắng cũng trả lại dữ liệu tương tự như trong ví dụ này, này:

[ 
     { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, 
     { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, 
     { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, 
     { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, 
] 

Nhưng kết quả là như nhau: ném jquery một Sizzle.error tại dòng sau:

Sizzle.error = function(msg) { 
    throw new Error("Syntax error, unrecognized expression: " + msg); 
}; 

Trường hợp nội dung của msg là dữ liệu json được máy chủ trả về.

Có vấn đề gì?

Answer 1

Tôi sẽ cung cấp cho bạn tài liệu/ví dụ khá thô. Tôi cũng sẽ thêm rằng nguồn gốc của sự nhầm lẫn của bạn xuất phát từ bản nâng cấp lớn - old version không có nhiều điểm chung với phiên bản mới và tiếc là hầu hết các ví dụ được viết dựa trên phiên bản cũ đó.

Tin tốt là tải lười được hỗ trợ ra khỏi hộp, nó không phải là điều hiển nhiên. Điều quan trọng là nó gọi cấu hình data: của bạn khi mỗi nút được mở rộng. Nhưng để nó hoạt động, hàm URL phải trả về một URL khác cho nút đã cho. Trong mã bên dưới, hãy lưu ý điều kiện trả lại một URL nếu nút là gốc (#) và một điều kiện khác nếu nó không phải là.

$('#TreeDiv') 
    .jstree({ 
    core: { 
     data: { 
     url: function (node) { 
      return node.id === '#' ? '/UserAccount/AccountGroupPermissions' 
           : '/UserAccount/AccountPermissions/' + node.id; 
     }, 
     type: 'POST' 
     } 
    }, 
    plugins : ["checkbox"] 
}); 

Answer 2

"Khi sử dụng AJAX bộ trẻ em để boolean true và jsTree sẽ làm cho nút như đóng và thực hiện một yêu cầu bổ sung cho nút đó khi người dùng mở nó.", đây là tài liệu từ jstree và có thể đạt được yêu cầu của bạn.

Answer 3

Mở rộng câu trả lời của Nathans bằng một ví dụ (rất tối giản): cây Demo với tải chậm.

JS:

$('#the_tree').jstree({ 
    'core' : { 
     'data' : { 
      'url' : "tree/ajax.php", 
       'data' : function (node) { 
        return { 'id' : node.id }; 
       } 
     } 
    }, 

}); 

PHP:

header('Content-Type: application/json'); 

if ($_GET["id"] === "#") { 
    $data = array(
      array("id" => "ajson1", "parent" => "#", "text" => "Simple root node" ), 
      array("id" => "ajson2", "parent" => "#", "text" => "Root node 2", "children" => true), 

    ); 
} 

else if ($_GET["id"] === "ajson2") { 
    $data = array(
     array("id" => "ajson3", "parent" => "ajson2", "text" => "Child 1"), 
     array("id" => "ajson4", "parent" => "ajson2", "text" => "Child 2") 
    ); 
} 

echo json_encode($data); 

chỉ Nodes có "children" : true, sẽ tạo ra một yêu cầu cho trẻ em khi mở ra, các nút khác được coi là lá.

Answer 4

Để thực hiện tải chậm, bạn cần một chương trình phụ trợ trả về một đối tượng JSON với các nút cây có trường thuộc tính con. Tài sản trẻ em phải chứa các phần tử con hoặc boolean đúng (mảng hoặc boolean). Với ngôn ngữ được đánh máy mạnh mẽ trên chương trình phụ trợ của bạn, nó sẽ trở nên xấu xí, vì vậy tốt nhất nên xử lý nó trên giao diện người dùng. Ví dụ về gọi lại thành công AJAX:

$('#tree').jstree({ 
    'core' : { 
     'data' : { 
      'url' : function(node) { 
       return '/doc/test2'; 
      }, 
      'data' : function(node) { 
       return { 
        'part' : node.id === '#' ? pn : node.id 
       }; 
      }, 
      'success' : function(nodes) { 

       var validateChildrenArray = function(node) { 

        if (!node.children || node.children.length === 0) { 
         node.children = true; 
        } 
        else { 
         for (var i = 0; i < node.children.length; i++) { 
          validateChildrenArray(node.children[i]); 
         } 
        } 
       }; 

       for (var i = 0; i < nodes.length; i++) { 
        validateChildrenArray(nodes[i]); 
       } 
      } 
     } 
    } 
}); 

Bằng cách này, bạn sẽ có thể tải cây của mình xuống.

Answer 5

Tôi đã thực hiện việc tải xuống tùy chỉnh của mình bằng cách kết hợp phương thức "select_node.jstree" và phương thức "create_node". Khi chọn mọi nút, trình xử lý sự kiện sẽ kiểm tra xem có con không và thêm phản hồi của máy chủ vào nút đã chọn, nút bằng nút. Phản hồi của máy chủ của tôi không giống hoặc yêu cầu của jstree và chiến lược này đã tiết kiệm cho tôi rất nhiều thời gian và công sức. Hy vọng nó sẽ giúp ai đó.