jquery树,jq树形控件

如何使用jquery.treeview.js控件，显示树形菜单

asp.net 内容如下：

        /// summary

        /// 显示树导航菜单

        /// /summary

        public void InitInfo()

        {

            string UserId = RequestSession.GetSessionUser().UserId.ToString();//用户ID

            DataTable dt = systemidao.GetMenuHtml(UserId);

            if (DataTableHelper.IsExistRows(dt))

            {

                DataView dv = new DataView(dt);

                dv.RowFilter = "ParentId = '0'";

                foreach (DataRowView drv in dv)

                {

                    strHtml.Append("li");

                    strHtml.Append("div" + drv["Menu_Name"] + "/div");

                    //创建子节点

                    strHtml.Append(GetTreeNode(drv["Menu_Id"].ToString(), dt));

                    strHtml.Append("/li");

                }

            }

        }

        /// summary

        /// 创建子节点

        /// /summary

        /// param name="parentID"父节点主键/param

        /// param name="dtMenu"/param

        /// returns/returns

        public string GetTreeNode(string parentID, DataTable dtNode)

        {

            StringBuilder sb_TreeNode = new StringBuilder();

            DataView dv = new DataView(dtNode);

            dv.RowFilter = "ParentId = '" + parentID + "'";

            if (dv.Count  0)

            {

                sb_TreeNode.Append("ul");

                foreach (DataRowView drv in dv)

                {

                    sb_TreeNode.Append("li");

                    DataTable IsJudge = DataTableHelper.GetNewDataTable(dtNode, "ParentId = '" + drv["Menu_Id"].ToString() + "'");//判断是否有下级菜单

                    if (DataTableHelper.IsExistRows(IsJudge))

                    {

                        sb_TreeNode.Append("div" + drv["Menu_Name"] + "/div");

                    }

                    else

                    {

                        sb_TreeNode.Append("div title=\"" + drv["Menu_Title"] + "\" onclick=\"NavMenu('" + drv["NavigateUrl"] + "','" + drv["Menu_Name"] + "')\"img src=\"/Themes/Images/32/" + drv["Menu_Img"] + "\" width=\"16\" height=\"16\" /" + drv["Menu_Name"] + "/div");

                    }

                    //创建子节点

                    sb_TreeNode.Append(GetTreeNode(drv["Menu_Id"].ToString(), dtNode));

                    sb_TreeNode.Append("/li");

                }

                sb_TreeNode.Append("/ul");

            }

            return sb_TreeNode.ToString();

        }

相关问答

Q1: zTree 如何跟 jquery取得的数据生成树

zTree的jquery树插件就可以生成树了。

1、setting 配置信息说明

普通使用，无必须设置的参数

与显示相关的内容请参考 API 文档中 setting.view 内的配置信息

name、children、title 等属性定义更改请参考 API 文档中 setting.data.key 内的配置信息

2、treeNode 节点数据说明

标准的 JSON 数据需要嵌套表示节点的父子包含关系

例如：

var nodes = [

{name: "父节点1", children: [

{name: "子节点1"},

{name: "子节点2"}

]}

];

默认展开的节点，请设置 treeNode.open 属性

无子节点的父节点，请设置 treeNode.isParent 属性

其他属性说明请参考 API 文档中 "treeNode 节点数据详解"

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。

Q2: jquery做一个简单的树

你不必自己做了 jquery有很多插件实现树状分支，只要去jquery网查查插件就有了。可以推荐你一个ztree 国产的，功能十分丰富强大。我项目里也是用的它。

Q3: jquery 递归创建json树

$(function () {

$("#btn_bianli").click(function () {

var showlist = $("ul/ul");

showall(menulist.menulist, showlist);

$("#div_menu").append(showlist);

});

});

//menu_list为json数据

//parent为要组合成html的容器

function showall(menu_list, parent) {

for (var menu in menu_list) {

//如果有子节点，则遍历该子节点

if (menu_list[menu].menulist.length 0) {

//创建一个子节点li

var li = $("li/li");

//将li的文本设置好，并马上添加一个空白的ul子节点，并且将这个li添加到父亲节点中

$(li).append(menu_list[menu].MName).append("ul/ul").appendTo(parent);

//将空白的ul作为下一个递归遍历的父亲节点传入

showall(menu_list[menu].menulist, $(li).children().eq(0));

}

//如果该节点没有子节点，则直接将该节点li以及文本创建好直接添加到父亲节点中

else {

$("li/li").append(menu_list[menu].MName).appendTo(parent);

}

}

}

Q4: jquery中如何获取树的节点的数据、id或名字

使用jQuery框架操作HTML DOM是一件极其便捷的事情，如下操作即可获取相应节点的数据，id和名字（下文中引用“$(this)”表示一个jQuery对象）：

获取节点标签内容数据： $(this).html( )

获取表单组件中的值： $(this).val()

获取节点中的文本内容（例如textarea）: $(this).text()

获取节点的id： $(this).attr("id")

获取节点的名字： $(this).attr("name")

Q5: jquery tree对象，想获取某一节点在整棵树中的序列号

按zTree自带的那个例子，它有一个json数组zNodes，数组的每一项都有一个唯一的id值。

所以可以

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getSelectedNodes();

if (nodes.length0) {

var nid = nodes[0].id;

var index = findIdByKeyValue(zNodes,'id', nid);

}

function findIdByKeyValue(obj, key, value)

{

for(vari = 0; i obj.length; i++) {

if(obj[i][key] == value) {

return i;

}

}

return null;

}

大致是这么个意思，太晚了就不测试了，你自己试试