jstree问题

Question

我想通过jstree(asp.net环境)实现树形菜单，基本用法看了一下，要求实现效果及问题如下：
1:异步或者一次性加载所有树节点
2：使用ashx返回json格式失败，使用webmethod(webservice）方法失败
3: 看了jstree提供的官方例子：直接写json格式和访问xxx.json文件的方法都能领会，但是通过ajax来访问
ashx或者xx.aspx下用[webmethod]方法不行
4：数据库读取的数据如何转换成json格式不知如何是好。
5：树形菜单显示出来以后给每个节点添加单击或者双击事件时传递该节点的编号(id)不知如何实现

Answer 1

ashx或者xx.aspx  返回的是正确的 json 格式吗？上网搜一下 DataSet DataTable 什么的 转 json 的方法 有好多

Answer 2

我也在研究这东西，http://www.51aspx.com/Code/JQTreeView这个去下载来看看吧，和你的要求差不多只是把JS换为JQ。研究出心得了回复下帖子哦O(∩_∩)O哈哈~

Answer 3

你可以读出数据后拼成jstree需要的json字符串然后返回，利用JS转换一下id 完全可以在加载 也就是获取数据的时候绑定在节点上

Answer 4

 public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //递归加载树
            TreeNode root = new TreeNode("0", "root");
            //root的孩子
            TreeNode _root = new TreeNode("01", "root的孩子");
            //root的孙子
            TreeNode __root = new TreeNode("0101", "root的孙子");            _root.ChildNodes.Add(__root);
            root.ChildNodes.Add(_root);            System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
            string json = js.Serialize(root);            Response.Write(json);
            Response.End();
        }
    }    /// <summary>
    /// 节点树
    /// </summary>
    public class TreeNode
    {
        public TreeNode()
        {
        }
        public TreeNode(string _nodeID, string _nodeName)
        {
            this.nodeName = _nodeName;
            this.nodeID = _nodeID;
        }        string nodeID;        /// <summary>
        /// 节点编号
        /// </summary>
        public string NodeID
        {
            get { return nodeID; }
            set { nodeID = value; }
        }        string nodeName;        /// <summary>
        /// 节点名称
        /// </summary>
        public string NodeName
        {
            get { return nodeName; }
            set { nodeName = value; }
        }        List<TreeNode> childNodes;        /// <summary>
        /// 孩子节点
        /// </summary>
        public List<TreeNode> ChildNodes
        {
            get { return childNodes; }
            set
            {
                if (childNodes == null)
                {
                    childNodes = new List<TreeNode>();
                }
                childNodes = value;
            }
        }
    } 

Answer 5

$(function () {
            $("#test").jstree({
                "json_data": {
                    data: [{ data: "好的" }, {data:"坏的"}]
                    //"ajax": {
                       //"url": "jstree.ashx",
                    //}
                },
                "plugins": ["themes", "json_data"]
            });
});
使用data:方式可以显示树（但是这是静态的）
使用ajax方式无法显示树
jstree.ashx如下：
public class jstree : IHttpHandler
    {        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("data: [{ data: \"好的\" }, {data:\"坏的\"}]");
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
把text/plain 改为application/json 也无法显示树

Answer 6

你的json格式属性没描述对
你看看官方要求的josn格式是什么

Answer 7

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("\"data\": [{\"data\": \"A node\",\"metadata\": { id: 23 },\"children\": [\"Child 1\", \"A Child 2\"]}]");
        }
这是官方格式 拷贝下来 一样不行

Answer 8

用ajax 不行  直接写到前提是行的

Answer 9

$(function () {
            $("#test").jstree({
                "json_data": {
                    //"data": [{"data": "A node","metadata": { id: 23 },"children": ["Child 1", "A Child 2"]}]
                    "ajax": {
                        "url": "jstree.ashx",
                        "data": function (n) {
                            return { id: n.attr ? n.attr("id") : 0 };
                        }
                    }
                },
                "plugins": ["themes", "json_data"]
            });
        });