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 文件地址