开发者

JsTree Custom Icons with Json_data plugin

开发者 https://www.devze.com 2023-03-28 13:50 出处:网络
I am using a JsTree on an MVC website. I am using the json_data plugin to populate the tree. My Controller action returns a JsonResult using a class I made to represent the nodes. I have been reading

I am using a JsTree on an MVC website. I am using the json_data plugin to populate the tree. My Controller action returns a JsonResult using a class I made to represent the nodes. I have been reading the documentation on how to specify a custom icon for a specific node, but I can't seem to get it right. It seems to suggest that data should be an object that contains title and icon strings, but this stopped the tree from loading when I tried it. The class structure I am using at the moment is as follows.

public class NodeModel
{
    public string data;
    public NodeAttribute attr;
    public string state = "closed";
    public string icon = "default/file.png";
}

public class ParentNodeModel : NodeModel
{
    public List<NodeModel> children;
}

public class NodeAttribute
{
    public string id;
    public string type;
}

Does anyone know what format the json data should look like to give each node an individual icon? I would like to avoid using the types plugin if possible.

Resolved

Changing my class structure to make the data string into a new object was actually the correct format. But with the new structure another part of my code was crashing (fixed now). So the classes will now lo开发者_如何转开发ok like this

public class NodeModel
{
    public NodeData data;
    public NodeAttribute attr;
    public string state = "closed";
}

public class NodeData
{
    public string title;
    public string icon = "path/file.png";
}


Seems that your objects defined correctly. From jsTree documentation:

if icon contains a slash / it is treated as a file, used for background. otherwise - it is added as a class to the "ins" node

I assume that "default/file.png" has been added as the CSS class to the "ins" node, so maybe slash '/' should be the first symbol, try to set the icon value as "/default/file.png".

Also you can check how we're using jsTree in our project:

  • controller(method LoadCategoryTree)
  • view
0

精彩评论

暂无评论...
验证码 换一张
取 消