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下载相关的资料

友情链接