5

我正在使用 jsTree 创建文档列表索引。我使用 JSON 来创建我的树。我有一个问题和一个问题。

我的问题是，文件夹和文件都出现相同的图标（类型中设置的默认图标）。当我更改默认图标时，所有树图标都设置为该图标。如果我不使用类型插件，则默认文件夹图标用于所有图标。

jstree配置：

$("#agac_tutacagi").jstree({
    "plugins" : [ "themes", "json_data", "types", "ui"],

    "core":{
        "animation":500,
        "strings":{
            "loading":"Yükleniyor"
        }
    },

    "types":{
        "types":{
            "max_children" : -2,
            "max_depth" : -2,

            "folder" : {
                "valid_children" : [ "default", "dizin", "dosya" ],
                "icon" : {
                    "image" : "/static/p/js/jsTree/_demo/folder.png"
                }
            },
            "file" : {
                "valid_children" : "none",
                "icon" : {
                    "image" : "/static/p/js/jsTree/_demo/file.png"
                }
            },
            "default" : {
                "icon" : {
                    "image" : "/static/p/js/jsTree/_demo/file.png"
                }
            }
        }
    },

    "json_data" : {
        "ajax" : {
            "url" : "/dokumantasyon/dokumanAgaciOgesiAl/"
        }
    }
});

示例 JSON：

[{
  "data": {
    "icon": "folder",
    "title": "Sıkça Sorulan Sorular"
  },
  "children": [{
    "data": {
      "icon": "file",
      "attr": {
        "onclick": "dokuman_getir(4)"
      },
      "title": "Program makbuz basmadı"
    }
  }]
}]

图标在数据字典中设置，如 sjtree 文档中所示。但这没用。我没有收到任何错误，除了树的图标外，一切都很好。

我的第二个问题是，如何配置 jstree，所以当我单击父节点（文件夹）时，它会像单击展开箭头一样展开。

4

2 回答 2

7

您的响应数据需要如下所示：

[{"attr":{"id":"node_2","rel":"folder"},"data":"root","state":"closed"}]

这是一个具有一个节点的数组，但您可以在数组中返回多个以创建多个节点。

这"state":"closed"是告诉 jsTree 在单击/展开时从您的服务器请求子节点的关键。

"rel" : "folder"告诉 jsTree 使用"types"您在上面的节点中定义的文件夹类型。然后使用为该"folder"类型指定的图标。

于 2010-07-26T01:31:52.727 回答
6

为了创建单击以展开行为，您可以使用 types 插件来覆盖默认的单击行为：

"types":{
    "types":{
        "max_children" : -2,
        "max_depth" : -2,
        "default" : {
            "valid_children" : [ "default"],            
            "select_node" : function (e) {
                this.toggle_node(e);
                return false;
            }
        },
        ...
    "plugins" : [ "themes", "html_data", "ui","types" ]
于 2010-08-24T10:40:54.300 回答