2011-10-31 34 views
6

tôi làm jsTree bằng cách này:Làm thế nào để khởi tạo jsTree sử dụng JSON

$("#myTree").jstree({ 
       "plugins": ["themes", "json_data", "ui", "crrm", "dnd"], 
       "themes": { 
        "theme": "default", 
        "dots": false, 
        "icons": false, 
        "url": "../../Content/jsTreeThemes/default/style.css" 
       }, 
       "json_data": { 
        "data" : [] 
       } 
}); 

Và người dùng thấy trang với trống jsTree. Tôi phải khởi tạo jsTree của mình khi người dùng thực hiện một số hành động. Nhưng tôi không sử dụng ajax khởi tạo (tôi không sử dụng "ajax" trong "json_data"). Tôi phải khởi tạo jsTree của tôi bằng cách sử dụng chỉ chuỗi như thế này:

var stringJSON = [{ 
    "attr": { 
     "id": "1", 
     "rel": "root", 
     "mdata": null 
    }, 
    "data": "title": "root_jsTree", 
    "icon": null 
}, "state": "open", 
"children": [{ 
    "attr": { 
     "id": "7", 
     "rel": "folder", 
     "mdata": null 
    }, 
    "data": { 
     "title": "1", 
     "icon": null 
    }, 
    "state": "", 
    "children": [{ 
     "attr": { 
      "id": "10", 
      "rel": "folder", 
      "mdata": null 
     }, 
     "data": { 
      "title": "leaf", 
      "icon": null 
     }, 
     "state": "", 
     "children": [] 
    }] 
}, { 
    "attr": { 
     "id": "8", 
     "rel": "folder", 
     "mdata": null 
    }, 
    "data": { 
     "title": "leaf", 
     "icon": null 
    }, 
    "state": "", 
    "children": [{ 
     "attr": { 
      "id": "9", 
      "rel": "folder", 
      "mdata": null 
     }, 
     "data": { 
      "title": "leaf", 
      "icon": null 
     }, 
     "state": "", 
     "children": [] 
    }] 
}] 
}]' 

Không có vấn đề làm thế nào tôi nhận được chuỗi này, khi người dùng muốn xem cây Tôi đã có chuỗi này. Và ở đây tôi nhận được câu hỏi: Làm thế nào tôi có thể khởi tạo jsTree và hiển thị nó cho người dùng chỉ sử dụng chuỗi bên dưới.

Trả lời

5

Có thể bạn muốn một cái gì đó như thế? http://jsfiddle.net/radek/fmn6g/11/

  • Tôi chèn jsTree khi nhấp vào nút.
  • Hàm javascript khi nhấp vào chèn 'jstree' div và cũng chứa định nghĩa jsTree.
  • Như bạn thấy, tôi cũng sử dụng loại dữ liệu json. Thông tin

khác ở câu hỏi của tôi display jsTree on click

Có phải đó là những gì bạn đang sau?

5

Đây là giải pháp của tôi:

var jsTreeSettings = $("#myTree").jstree("get_settings"); 
jsTreeSettings.json_data.data = $.parseJSON(stringJSON); 
$.jstree._reference("myTree")._set_settings(jsTreeSettings); 

// Refresh whole our tree (-1 means root of tree) 
$.jstree._reference("myTree").refresh(-1); 

Giải pháp này sẽ làm việc ngay cả khi chúng tôi thiết lập AJAX cho mô hình tải trước đó.

Từ tài liệu:

Nếu cả dữ liệu và ajax được thiết lập cây ban đầu được trả lại từ chuỗi dữ liệu. Khi mở một nút đóng (không có con đã tải), yêu cầu AJAX được thực hiện.

Thông tin thêm là ở đây http://www.jstree.com/documentation/json_data

tôi quyết định sử dụng giải pháp này bởi vì tôi phải thay đổi stringJSON nhiều lần và xây dựng lại cây sử dụng chuỗi thay đổi này (mà không tải lại trang).

Các vấn đề liên quan