首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

jQuery+jQuery zTree+json实现树形结构时页面接收数据解决思路

2012-04-05 
jQuery+jQuery zTree+json实现树形结构时页面接收数据想用jQuery+jQuery zTree+json做一个树形结构,点击父

jQuery+jQuery zTree+json实现树形结构时页面接收数据
想用jQuery+jQuery zTree+json做一个树形结构,点击父节点后其下所有的的子节点可显示出来,现在在Action中获取到了从数据库中查询到的json数据,在页面中的js代码如何获取和操作这个json数据用来在树形结构菜单中显示。希望能有示例代码,如果能有实现树形结构的代码那就更好了,树形结构是采用异步的方法实现的。刚开始学还请大家多指教呢。

[解决办法]
你只需要返回数据,其他zTRee来完成。

HTML code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="left.aspx.cs" Inherits="teachingAndStudy.Html.left" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">    <title>无标题页</title>    <script src="../js/jq1.6.2.min.js" type="text/javascript"></script>    <script src="../js/jquery.ztree-2.6.min.js" type="text/javascript"></script>    <script type="text/javascript">        var zTree;        var setting = {            async: true,   // 需要异步加载zTree            asyncUrl: "../Public/getSubTree.ashx?who=0", // 异步加载时访问的页面            asyncParam: ["id"],    // 异步加载时要传递的参数            isSimpleData: true, // 简单数据模型,必须提供下面的两项            treeNodeKey: "id", // 节点的id            treeNodeParentKey: "pId",  // 父节点的id                        showIcon : false,            showLine: false, // zTree显示连接线            expandSpeed: "",   // 设置 zTree 节点展开、折叠时的动画速度,默认为"fast",""表示无动画            callback: {    // 回调函数               click: zTreeOnClick,    // 单击鼠标时               asyncSuccess:zTreeOnAsyncSuccess               //beforeAsync: zTreeBeforeAsync               //rightClick: zTreeOnRightClick,   // 鼠标右击 zTree               //beforeRemove: zTreeOnBeforeRemove               //remove: zTreeOnRemove            }        };        $(document).ready(function(){            zTree = $("#tree").zTree(setting, null);        });        function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {            zTree.expandAll(true);        }        }                function zTreeOnClick(event, treeId, treeNode) {        }    </script></head><body>    <div>        <ul id="tree" class="tree" style="width:500px; overflow:visible;"></ul>    </div></body></html> 

热点排行