jsTree 使用 JSON 数据绑定节点

jsTree 使用 JSON 数据绑定节点

编程代码以 C# 为例

JSON 模型

模型结构一

public class JsonModel
{
    public string id { get; set; }
    public string text { get; set; }
    public string icon { get; set; }
    public StateForJsonModel state { get; set; }
    public List<JsonModel> children { get; set; }
    public object li_attr { get; set; }
    public object a_attr { get; set; }
}

public class StateForJsonModel
{
    public bool opened { get; set; }
    public bool disabled { get; set; }
    public bool selected { get; set; }
}

这种模型里的所有字段都可不填。

模型结构二

public class JsonModel
{
    public string id { get; set; }
    public string parent { get; set; }
    public string text { get; set; }
    public string icon { get; set; }
    public StateForJsonModel state { get; set; }
    public object li_attr { get; set; }
    public object a_attr { get; set; }
}

public class StateForJsonModel
{
    public bool opened { get; set; }
    public bool disabled { get; set; }
    public bool selected { get; set; }
}

这种模型里的 id 和 parent 为必填。

注：

• id：节点的 id（不可以重复）
• text：节点显示文本
• icon：节点使用的图标
• children：子节点
• opened：节点是否展开

其他属性为验证。

生成 Json

// 以模型一为例
public ActionResult ActionName()
{
    List<JsonModel> jsons = new List<JsonModel>();

    // 添加节点
    JsonModel jsonModel1 = new JsonModel();
    jsons.Add(jsonModel1);

    // 添加含有子节点的节点
    List<JsonModel> jsons1 = new List<JsonModel>();
    JsonModel jsonModel2 = new JsonModel();
    jsonModel2.children = jsons1;
    jsons.Add(jsonModel2);

    return Json(jsons, JsonRequestBehavior.AllowGet);
}

前端绑定

JS 绑定

$('jstree_div').jstree({
    core : {
        data : {
            type : "json",
            url : "GetJsonUrl"
        }
    }
});

注：

• GetJsonUrl：获取Json Url 地址或 Json 文件地址

参考

• 使用 Json 填充 jsTree