jquerytreejs下載_如何使用jquerytreeviewjs控制項顯示樹形菜單

A. jquery.ztree.all.min.js都需要配合什麼文件

1、下載ztree文件
將需要使用的 zTree v3.x 相關的 js、css、img 文件分別放置到相應目錄，版並且保證相對路徑正確權。
2、引入ztree文件
將下載的ztree文件保留需要用的相關的 js、css、img 文件整個復制到自己的項目相應的文件夾下，如下圖，我習慣將這類插件統一放在common/plugin/下，（其他不需要用的文件可以刪除。

3、html 頁面
分別在<head>和<body>中引入css、js文件，如代碼所示。
按照以下代碼，製作 html 頁面，注意：
zTree 的容器 className 別忘了設置為 "ztree"！！！

B. 如何使用jquery.treeview.js控制項，顯示樹形菜單

asp.net 內容如下：

///<summary>
///顯示樹導航菜單
///</summary>
publicvoidInitInfo()
{
stringUserId=RequestSession.GetSessionUser().UserId.ToString();//用戶ID
DataTabledt=systemi.GetMenuHtml(UserId);
if(DataTableHelper.IsExistRows(dt))
{
DataViewdv=newDataView(dt);
dv.RowFilter="ParentId='0'";
foreach(DataRowViewdrvindv)
{
strHtml.Append("<li>");
strHtml.Append("<div>"+drv["Menu_Name"]+"</div>");
//創建子節點
strHtml.Append(GetTreeNode(drv["Menu_Id"].ToString(),dt));
strHtml.Append("</li>");
}
}
}
///<summary>
///創建子節點
///</summary>
///<paramname="parentID">父節點主鍵</param>
///<paramname="dtMenu"></param>
///<returns></returns>
publicstringGetTreeNode(stringparentID,DataTabledtNode)
{
StringBuildersb_TreeNode=newStringBuilder();
DataViewdv=newDataView(dtNode);
dv.RowFilter="ParentId='"+parentID+"'";
if(dv.Count>0)
{
sb_TreeNode.Append("<ul>");
foreach(DataRowViewdrvindv)
{
sb_TreeNode.Append("<li>");
DataTableIsJudge=DataTableHelper.GetNewDataTable(dtNode,"ParentId='"+drv["Menu_Id"].ToString()+"'");//判斷是否有下級菜單
if(DataTableHelper.IsExistRows(IsJudge))
{
sb_TreeNode.Append("<div>"+drv["Menu_Name"]+"</div>");
}
else
{
sb_TreeNode.Append("<divtitle=""+drv["Menu_Title"]+""onclick="NavMenu('"+drv["NavigateUrl"]+"','"+drv["Menu_Name"]+"')"><imgsrc="/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>");
}
returnsb_TreeNode.ToString();
}

C. （JQuery）如何給JsTree生成的樹的每個節點添加上自定義的右鍵菜單

一個帶有右鍵操作的樹形菜單

$(document).ready(function(){
$.ajaxSetup({cache:false});
$("#browser").tree({
data:{
type:"json",
url:src,
async:true,
async_data:function(NODE){
return{parent_Id:$(NODE).attr("id")||0}
}
},
lang:{
loading:"目錄載入中……"
},
rules:
{
draggable:"all"//這個設置可以使得節點進行拖動操作
},
ui:{
context:[//自定義右鍵操作的可操作內容
{
id:"create",
label:"添加下級目錄",//右鍵彈出菜單的此項操作屏顯字樣
visible:function(NODE,TREE_OBJ){if(NODE.length!=1)returnfalse;returnTREE_OBJ.check("creatable",NODE);},//允許節點被右擊時出現操作菜單
icon:"<%=request.getContextPath()%>/css/themes/default/create.png",//右鍵彈出菜單的此項操作圖標
action:function(NODE,TREE_OBJ){
//進行此項操作，將有這個函數事件被響應
}
},
"separator"//這個是在兩個操作之間畫一條分隔線
,
{
id:"edit",
label:"編輯目錄信息",
visible:function(NODE,TREE_OBJ){if(NODE.length!=1)returnfalse;returnTREE_OBJ.check("creatable",NODE);},
icon:"<%=request.getContextPath()%>/image/reg2.gif",
action:function(NODE,TREE_OBJ){
openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"));});
}
},
"separator"
,
{
id:"privilege",
label:"設置目錄許可權",
visible:function(NODE,TREE_OBJ){if(NODE.length!=1)returnfalse;returnTREE_OBJ.check("creatable",NODE);},
icon:"<%=request.getContextPath()%>/css/themes/default/rename.png",
action:function(NODE,TREE_OBJ){
openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"));});
}
},
"separator",
{
id:"delete",
label:"刪除",
visible:function(NODE,TREE_OBJ){if(NODE.length!=1)returnfalse;returnTREE_OBJ.check("creatable",NODE);},
icon:"<%=request.getContextPath()%>/css/themes/default/remove.png",
action:function(NODE,TREE_OBJ){
vartree=$.tree_reference("browser");
openWindow('myurl','','',function(){
//下邊的.parent()和.refresh()均為v0.9.8版本提供，如果你使用的是其他版本如v0.9.6等，這些將不被支持。
NODE=$(tree.parent(NODE));
if($(NODE).attr("id")==undefined){
tree.refresh();
}else{
TreeRefresh();
}
});
}
},
"separator",
{
id:"others",
label:"其他操作",
visible:function(NODE,TREE_OBJ){if(NODE.length!=1)returnfalse;returnTREE_OBJ.check("creatable",NODE);},
icon:"<%=request.getContextPath()%>/css/images/cut.png",
action:function(NODE,TREE_OBJ){
alert("暫無可提供操作。");
}
}
]
},
callback:{
onselect:function(node){
//(a);

}
}

});
functiontreeRefresh(nodeid){
varrid=nodeid;
vartree=$.tree_reference("browser");
varpar_node=tree.parent($("#"+rid));
tree.refresh(par_node);
}
});

D. 使用JsTree要引入那些js文件和css文件,在哪下載目錄結構是怎樣的

上面有提供下載而且 demo 有例子

<script type="text/javascript" src="../_lib/jquery.js"></script>
<script type="text/javascript" src="../_lib/jquery.cookie.js"></script>
<script type="text/javascript" src="../_lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="../jquery.jstree.js"></script>

<link type="text/css" rel="stylesheet" href="syntax/!style.css"/>
<link type="text/css" rel="stylesheet" href="!style.css"/>
<script type="text/javascript" src="syntax/!script.js"></script>

E. jquery tree控制項需要引入哪些js文件

要顯示所有功能，只需要引入一下文件
<scipt type="text/javascript" src="jquery-1.4.2.min.js"></script>
<scipt type="text/javascript" src="jquery-ui-1.8.11.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.11.custom.css" />
要實現單一功能比如你說的tab功能，可以引入下面內容
<scipt type="text/javascript" src="jquery-1.4.2.min.js"></script>
<scipt type="text/javascript" src="jquery.ui.core.js"></script>
<scipt type="text/javascript" src="jquery.ui.widget.js"></script>

<scipt type="text/javascript" src="jquery.ui.tabs.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.ui.tabs.css" />


對於EasyUI，我不建議使用。現在EasyUI功能還不是很健全。瀏覽器兼容性很差。唯一一點讓人稱道的是EasyUI的DataGrid，不過也是功能不完善。jQueryUI，功能強大，不過你要想實現好的效果，需要你自己手動修改它的css，來重構漂亮的界面！

F. jquery樹形表格treetable插件怎麼用

jquery樹形表格treetable插件使用方法步驟：
第一步：

1.上官網下載。
2.插件引用，當下載的時候，會有很多個文件，但是根據api來看，如果只想做簡單的效果，js除了引用juquery外，只需要引用jquery.treetable.js插件，如果想讓它有默認的外觀樣式還需要引入它們的jquery.treetable.css和jquery.treetable.theme.default.css
第二步：建立table格式
<table id="example-advanced">
<tr data-tt-id="1">
<td>大家電</td>
</tr>
<tr data-tt-id="2" data-tt-parent-id="1">
<td>---電視</td>
</tr>
<tr data-tt-id="3" data-tt-parent-id="1">
<td>---洗衣機</td>
</tr>
<tr data-tt-id="4" data-tt-parent-id="1">
<td>---冰箱</td>
</tr>
</table>

第三步：引入JS

/* 初始化數據 */
$("#example-advanced").treetable({ expandable: true });/* 高亮顯示 */$("#example-advanced tbody").on("mousedown", "tr", function() {

$(".selected").not(this).removeClass("selected");

$(this).toggleClass("selected");

});/* 點擊展開&&關閉 */<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('expandAll'); return false;">展開</a>

<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('collapseAll'); return false;">關閉l</a>

導航:首頁 > 編程語言 > jquerytreejs下載

jquerytreejs下載

與jquerytreejs下載相關的資料

友情鏈接