jstree.net json
上一篇我们初步认识了jstree，这一篇就要把它运用到.net的项目中了
一、jstree获取json数据
该插件使jsTree json_data JSON对象转换到互动的树。数据（JSON）的可设置在配置或从服务器（也按需）检索。 1.0版还引入了先进的实验呈现功能，这是为大型，重型在DOM树适合该树形。
1.新建文件json_data.html （Ajax请求）
代码
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsTree v.1.0 - json_data documentation</title>
<script type="text/javascript" src="../_lib/jquery.js"></script>
</head>
<body>
<div id="demo2" class="demo"></div>
<script type="text/javascript" class="source">
$(function () {
$("#demo2").jstree({
"json_data" : {
"ajax" : {
"url" : "json.aspx",
"data" : function (n) {
return { id : n.attr ? n.attr("id") : 0 };
}
}
},
"plugins" : [ "themes", "json_data" ]
});
});
</script>
</body>
</html>
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsTree v.1.0 - json_data documentation</title>
<script type="text/javascript" src="../_lib/jquery.js"></script>
</head>
<body>
<div id="demo2" class="demo"></div>
<script type="text/javascript" class="source">
$(function () {
$("#demo2").jstree({
"json_data" : {
"ajax" : {
"url" : "json.aspx",
"data" : function (n) {
return { id : n.attr ? n.attr("id") : 0 };
}
}
},
"plugins" : [ "themes", "json_data" ]
});
});
</script>
</body>
</html>
2.新建json.aspx页面(当然可以是一般处理程序、webservices、json文件)
1>.去掉页面生产的代码，就留第一句
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2>.后台，就不多说了，直接贴出代码。差不多要睡觉了，
代码
protected void Page_Load(object sender, EventArgs e)
{
Response.ContentType = "application/json";
string test="{\"attr\":{\"id\":\"11\",\"rel\":\"folder\"}, \"children\" : [ { \"data\" : \"彭涛test1\", \"state\" : \"closed\" },{ \"data\" : \"彭涛test2\", \"state\" : \"closed\" } ], \"data\":\"彭涛\",\"state\":\"closed\"}";
{
Response.ContentType = "application/json";
string test="{\"attr\":{\"id\":\"11\",\"rel\":\"folder\"}, \"children\" : [ { \"data\" : \"彭涛test1\", \"state\" : \"closed\" },{ \"data\" : \"彭涛test2\", \"state\" : \"closed\" } ], \"data\":\"彭涛\",\"state\":\"closed\"}";
Response.Write(test);
}
}
这些都是很简单的，因为官方的是php版本的，搞.net的朋友很多也没有去安装php的环境，为了搞jstree，我还特地去安装了php+mysql环境，然后去测试，呵呵，为大家节约的时间吧。
如果有什么不理解的地方，请给本人留言。我们可以互相交流，共同进步。 jstree功能如读取xml格式数据添加、删除节点、异步查找节点并结合.net开发等的功能以后还会继续进行完善，请继续关注。 联系QQ群：161077434
