jQuery plugin: Treeview
插件地址:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="<c:url value='/js/jquery-plugin/jquery.treeview.css'/>" rel="stylesheet" type="text/css" />
<script type="text/javascript">
/****************操作*******************/
//展开节点,异步加载子节点子节点格式为json串数组[{id:,name:},{id:,name:},{id:,name:}]
function extend(menuId){ //menuId 为父节点ul的id
if($("#ul_"+menuId).html()=="") //如果存在 单击的时候不增加
{
$.getJSON("<c:url value='/html/manage/tree.ao?method=extendTree'/>", //从后台获取json数组
{data:new Date(),pid:menuId},function(json){
var html = ""; //准备插入的内容
if($(json).size()>0){
for(var obj in json)//拼html串用于展示子节点
{
if(obj!='indexOf'){
html+="<li onclick='extend(\""+json[obj][0]+"\")'>"
+"<input id='"+json[obj][0]+"' type='radio' name='groups' /><span>"+json[obj][1]+"</span>"+" ("+json[obj][2]+")";
if(json[obj][2]>0){//存在子节点,则插入空ul以接下一级节点 此列存放子节点数
html+="<ul id='ul_"+json[obj][0]+"' style='display:none' class='er_list' ></ul>"
}
html+="</li>";
}
}
var branches=$(html).prependTo("#ul_"+menuId) //将拼装的字符串插入到父节点中
$("#ul_"+menuId).treeview();//展开该节点
}
});
}
}
</script>
</head>
<body>
<!-- JSP操作 -->
<div>
<div class="gzsht_tcxn" style="height: 218px; overflow: auto;" >
<ul id="groupEdit">
<logic:iterate id="item" name="userForm" property="groups" indexId="index">
<li onclick="extend('${item[0]}')" > //单击节点的时候执行js
<span>${item[1] } (${item[2]})</span> //此插件特性,默认span被单击时对节点进行Toggle操作
<c:if test="${item[2]>0}"> //item[2]这个字段存子节点数,如果优子节点,则放一个空的ul以便异步加载子节点
<ul id="ul_${item[0] }" class='er_list'></ul> //便于从数据库中找到页面上节点,用记录id和前缀命名
</c:if>
</li>
</logic:iterate>
</ul>
</div>
</div>
script type="text/javascript">
$("#groupEdit").treeview({animated:"fast"});
extend('<%=ConstantEnumDefine.MANAGE_ID.全国.getValue()%>') //初始化,将根节点展开
</script>
</body>
</html>
- 大小: 16.9 KB
分享到:
相关推荐
NULL 博文链接:https://zhoupuyue.iteye.com/blog/794830
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
Jquery TreeView支持大数据加载树,全源码,自己测试通过,性能良好。
jQuery Treeview异步树实现,注明只能在.net3.5以上运行,
ASP.NET treeView 异步加载事例代码 适用于自引用表
jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery...
但是在开发的时候我种想找个例子来参考下,发现有很多这样的例子,包括extjs和jquery treeview的官方也有,但结合java后台实现的不多。 这里我做了一个例子,是一个完整的应用例子,可以动态的对这棵树进行维护
jquery treeview demo
Jquery TreeView 树形插件 美观方便使用的第三方插件
内部有修改 博文链接:https://laoqian9527.iteye.com/blog/1404165
1.节点是异步加载的(解决效率问题) 2.节点是无限级别的(递归的,这样可复用与目录结构、组织架构等数据类型) 3.节点是可以多选的(用CheckBox选择) 4.XAML方式绑定(减少UI上Code量) 5.方便得获取选中项信息
WPF制作的DataGrid异步加载程序,使用MVVM设计模式
jquery treeview树控件是一款非常实用的jquery插件treeview。
使用java + servlet实现jquery treeview async动态加载树菜单
Jquery TreeView拖拽树,可供参考。
jQuery的高性能TreeView源码(带CheckBox) 1:支持静态的树,即一次性将全部数据加载到客户端。 2:异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据。 3:Checkbox树(可能是静态树也可能是异步树...
tree控件jquery-treeview
用jquery实现的treeview效果,非常方便。
这个是“动态树的管理程序(基于jQuery Treeview实现)”java源代码程序。请先下载“动态树的管理程序(基于jQuery Treeview实现)”演示程序,如果您需要再来下载这个程序。