jQuery.treeview.js ajax 生成树
2012-02-08 17:39 河蟹社会 阅读(4562) 评论(0) 编辑 收藏 举报真是你怕什么,就撞什么鬼啊. 一直没搞过ajax树,这不,昨天就遇到了.页面是美工做得,树用的就是jquery.treeview,页面能很好的工作,到动态生成树的时候,按照以前的老思路. ajax请求数据,拼个html贴在指定的ul里完事, 没想到搞完后,不显示了. 后来一看页面,完了,美工做得那是,把html直接放在页面上了,在页面加载完后能读到内容. 而我这个是在页面加载完之后,才写到ul里的. 后来google一下,有java的,有php的,当然也找到一个c#的,照着做了个demo,可以工作.呵呵,感谢作者,感谢搜索引擎. 都做完后,发现有点小问题,树那里,根目录那里他在一直转,没有读取到他得子级,而且一直都展开在. 想要的是前面都折叠起来,最后一个打开. 后来在jquery.treeview.async中发现问题.下面贴出代码,以飨咱们的兄弟姐妹们,哈哈.
页面上很简单, 引用一个css,3,4个js文件, 一个<ul></ul>
<ul id="tree" class="filetree treeview">
</ul>
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript" src="Scripts/jquery.treeview.js"></script>
<script type="text/javascript" src="Scripts/jquery.treeview.async.js"></script>
<script type="text/javascript" src="Scripts/jquery.treeview.edit.js"></script>
<script type="text/javascript">
$(function () {
$("#tree").treeview({
animated: "fast",
url: "http://localhost:7734/Somnus/json/TreeData.ashx"
//有些需要跨域的请求,参考下TreeData_test.ashx里,那是项目中拷过来的.就是加个callback就可以了
//http://localhost:7734/Somnus/json/TreeData.ashx?callback=?
});
});
</script>
后台TreeData.ashx:
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
HttpRequest Request = context.Request;
HttpResponse Response = context.Response;
string callback = string.IsNullOrEmpty(Request["callback"]) ? string.Empty : Request["callback"];
string json = string.Empty;
string nodeid = string.Empty; //节点类型 返回source就是第一次加载,返回其他值就是点中节点的id
if (Request["root"] != null)
{
nodeid = Request["root"].ToString();
}
else
{
nodeid = "source";
}
//id, text为显示内容. expanded为这列是否展开
string _children1 = "{\"id\":\"n1_1\",\"text\":\"1.1\",\"classes\":\"file\",\"expanded\":false,\"hasChildren\":false}";
string _children2 = "{\"id\":\"n1_1\",\"text\":\"1.2\",\"classes\":\"file\",\"expanded\":false,\"hasChildren\":false}";
string classes = "folder"; //节点样式
string hasChildren = "true"; //是否存在子节点,如果设置为false,则这个节点你点击后不会执行后台操作
if (nodeid == "source") //第一次加载
{
classes = "folder";
hasChildren = "true";
//我首先建立2个文件夹、并且存在子节点、id为n1,text为1的节点. id为somnus,text为somnus
json = "[{\"id\":\"n1\",\"text\":\"1\",\"classes\":\"" + classes + "\",\"expanded\":false,\"hasChildren\":" + hasChildren + ",\"children\":[" + _children1 + "," + _children2 + "]}"
+ ",{\"id\":\"somnus\",\"text\":\"somnus\",\"classes\":\"" + classes + "\",\"expanded\":true,\"hasChildren\":" + hasChildren + ",\"children\":[" + _children1 + "," + _children2 + "]}]";
}
else
{
if (nodeid == "n1" ) //如果我点中了刚才建立的n1节点,我在他的里面添加一个文件夹样式、并且存在子节点、id为n1_1,text为1.1的节点
{
classes = "folder";
hasChildren = "true";
json = "[" + _children1 + "," + _children2 + "]";
}
if (nodeid == "somnus") //如果我点中了刚才建立的n1_1节点,我在他的里面添加一个文件样式、并且不存在子节点、id为n1_1_1,text为1.1.1的节点
{
classes = "file";
hasChildren = "false";
json = "[{\"id\":\"somnus_1\",\"text\":\"somnus1.1\",\"classes\":\"" + classes + "\",\"expanded\":false,\"hasChildren\":" + hasChildren + "}]";
}
}
Response.Write(string.IsNullOrEmpty(callback) ? json : string.Format("{0}({1})", callback, json));
}
这里json是手动拼的.当然你json用的好的话,你可以通过hashtable ,List转换成json. 手拼的JSON有时候不注意就有些问题,我记录了一些.
1,所有属性字段都要加"".
2,boolean类型的值, 不要加"", 并且都要是小写(我测试过有大写,javascript中转换json就报错. error:parsererror)
jquery.treeview.async.js 改动部分: function createNode(parent)中
function createNode(parent) {
var current = $("<li/>").attr("id", this.id || "").html("<span>" + this.text + "</span>").appendTo(parent);
if (this.classes) {
current.children("span").addClass(this.classes);
}
if (this.expanded) {
current.addClass("open");
}
if (this.hasChildren || this.children && this.children.length) {
var branch = $("<ul/>").appendTo(current);
if(!this.expanded)//这一块有改动
{
branch.attr("style","display:none");
}
if (this.hasChildren) {
current.addClass("hasChildren");
//注释掉得是那个 加载图片
// createNode.call({
// classes: "placeholder",
// text: " ",
// children:[]
// }, branch);
}
if (this.children && this.children.length) {
$.each(this.children, createNode, [branch])
}
}
}
顺便说下,还能跨域请求, 只需要请求地址加callback. example: 你的地址?callback=? . 在后台程序, 返回json的时候,带上你的callback. 你前台是?,他会自己生成个callback名称.callbackName(json数据)
我做得DEMO顺便放上来,为了不可预知的错误,我把项目中用到这块的那个后台ashx也放进来了(treedata_test.ashx).