如何使用jquery.treeview.js控件，顯示樹(shù)形菜單

asp.net 內(nèi)容如下：

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、虛擬主機(jī)、營(yíng)銷軟件、網(wǎng)站建設(shè)、行唐網(wǎng)站維護(hù)、網(wǎng)站推廣。

///?summary

///?顯示樹(shù)導(dǎo)航菜單

///?/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");

//創(chuàng)建子節(jié)點(diǎn)

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

strHtml.Append("/li");

}

}

}

///?summary

///?創(chuàng)建子節(jié)點(diǎn)

///?/summary

///?param?name="parentID"父節(jié)點(diǎn)主鍵/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()?+?"'");//判斷是否有下級(jí)菜單

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");

}

//創(chuàng)建子節(jié)點(diǎn)

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

sb_TreeNode.Append("/li");

}

sb_TreeNode.Append("/ul");

}

return?sb_TreeNode.ToString();

}

zTree 如何跟 jquery取得的數(shù)據(jù)生成樹(shù)

zTree的jquery樹(shù)插件就可以生成樹(shù)了。

1、setting 配置信息說(shuō)明

普通使用，無(wú)必須設(shè)置的參數(shù)

與顯示相關(guān)的內(nèi)容請(qǐng)參考 API 文檔中 setting.view 內(nèi)的配置信息

name、children、title 等屬性定義更改請(qǐng)參考 API 文檔中 setting.data.key 內(nèi)的配置信息

2、treeNode 節(jié)點(diǎn)數(shù)據(jù)說(shuō)明

標(biāo)準(zhǔn)的 JSON 數(shù)據(jù)需要嵌套表示節(jié)點(diǎn)的父子包含關(guān)系

例如：

var nodes = [

{name: "父節(jié)點(diǎn)1", children: [

{name: "子節(jié)點(diǎn)1"},

{name: "子節(jié)點(diǎn)2"}

]}

];

默認(rèn)展開(kāi)的節(jié)點(diǎn)，請(qǐng)?jiān)O(shè)置 treeNode.open 屬性

無(wú)子節(jié)點(diǎn)的父節(jié)點(diǎn)，請(qǐng)?jiān)O(shè)置 treeNode.isParent 屬性

其他屬性說(shuō)明請(qǐng)參考 API 文檔中 "treeNode 節(jié)點(diǎn)數(shù)據(jù)詳解"

zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹(shù)插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。

zTree 是開(kāi)源免費(fèi)的軟件（MIT 許可證）。如果您對(duì) zTree 感興趣或者愿意資助 zTree 繼續(xù)發(fā)展下去，可以進(jìn)行捐助。

jquery做一個(gè)簡(jiǎn)單的樹(shù)

你不必自己做了 jquery有很多插件實(shí)現(xiàn)樹(shù)狀分支，只要去jquery網(wǎng)查查插件就有了。可以推薦你一個(gè)ztree 國(guó)產(chǎn)的，功能十分豐富強(qiáng)大。我項(xiàng)目里也是用的它。

jquery 遞歸創(chuàng)建json樹(shù)

$(function () {

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

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

showall(menulist.menulist, showlist);

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

});

});

//menu_list為json數(shù)據(jù)

//parent為要組合成html的容器

function showall(menu_list, parent) {

for (var menu in menu_list) {

//如果有子節(jié)點(diǎn)，則遍歷該子節(jié)點(diǎn)

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

//創(chuàng)建一個(gè)子節(jié)點(diǎn)li

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

//將li的文本設(shè)置好，并馬上添加一個(gè)空白的ul子節(jié)點(diǎn)，并且將這個(gè)li添加到父親節(jié)點(diǎn)中

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

//將空白的ul作為下一個(gè)遞歸遍歷的父親節(jié)點(diǎn)傳入

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

}

//如果該節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)，則直接將該節(jié)點(diǎn)li以及文本創(chuàng)建好直接添加到父親節(jié)點(diǎn)中

else {

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

}

}

}

jquery中如何獲取樹(shù)的節(jié)點(diǎn)的數(shù)據(jù)、id或名字

使用jQuery框架操作HTML DOM是一件極其便捷的事情，如下操作即可獲取相應(yīng)節(jié)點(diǎn)的數(shù)據(jù)，id和名字（下文中引用“$(this)”表示一個(gè)jQuery對(duì)象）：

獲取節(jié)點(diǎn)標(biāo)簽內(nèi)容數(shù)據(jù)： $(this).html( )

獲取表單組件中的值： $(this).val()

獲取節(jié)點(diǎn)中的文本內(nèi)容（例如textarea）: $(this).text()

獲取節(jié)點(diǎn)的id： $(this).attr("id")

獲取節(jié)點(diǎn)的名字： $(this).attr("name")

jquery tree對(duì)象，想獲取某一節(jié)點(diǎn)在整棵樹(shù)中的序列號(hào)

按zTree自帶的那個(gè)例子，它有一個(gè)json數(shù)組zNodes，數(shù)組的每一項(xiàng)都有一個(gè)唯一的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;

}

大致是這么個(gè)意思，太晚了就不測(cè)試了，你自己試試

文章標(biāo)題：jquery樹(shù),jq樹(shù)形控件
分享網(wǎng)址：http://chinadenli.net/article3/dseodos.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、商城網(wǎng)站、App設(shè)計(jì)、網(wǎng)站導(dǎo)航、用戶體驗(yàn)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)