jquery插件treetable 的使用

mutongwu

浏览: 449817 次
性别:
来自: 广州

最近访客更多访客>>

lxswfc

xjg9083

oszerone

micai_1234

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

jquery treetable

插件的文档写得不是很好，为了能弄出异步加载的功能，小折腾了一番。

插件地址：
https://github.com/ludo/jquery-treetable

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery treetable</title>
    <link rel="stylesheet" href="css/screen.css" media="screen" />
    <link rel="stylesheet" href="css/jquery.treetable.css" />
    <link rel="stylesheet" href="css/jquery.treetable.theme.default.css" />
    <style type="text/css">
    	table{font-size:16px;}
    	table.treetable thead tr th,table.treetable tbody tr td{padding:10px 1em;}
    	table.treetable tbody tr td{border-top:1px solid #ccc;}
    	table tr:hover{background:#F7F6A5 !important;}
    	table td a.del{color:#f00;}
    	table td a.add{color:green;}
    </style>
  </head>
  <body>
    <div id="main">
      <h1>jQuery treetable</h1>

      <p><b><a href="http://plugins.jquery.com/treetable">Download</a> the latest release from the jQuery Plugin Registry or grab the <a href="https://github.com/ludo/jquery-treetable">source code</a> from Github.</b> Please <a href="https://github.com/ludo/jquery-treetable/issues">report issues</a> through Github issues. This plugin is released under both the MIT and the GPLv2 license by <a href="http://ludovandenboom.com">Ludo van den Boom</a>.</p>

      <table id="example-basic">
        <caption>Basic jQuery treetable Example</caption>
        <thead>
          <tr>
            <th>Tree column</th>
            <th>Additional data</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr data-node-id="1">
            <td><span class='folder'></span>Node 1: Click on the icon in front of me to expand this branch.</td>
            <td>I live in the second column.</td>
            <td><a href="#" class="del">删除</a> <a href="#" class="add">添加子节点</a></td>
          </tr>
          <tr data-node-id="12" data-parent-id="1">
            <td><span class='folder'></span>Node 1.1: Look, I am a table row <em>and</em> I am part of a tree!</td>
            <td>Interesting.</td>
            <td><a href="#" class="del">删除</a> <a href="#" class="add">添加子节点</a></td>
          </tr>
          <tr data-node-id="13" data-parent-id="12">
            <td><span class='file'></span>Node 1.1.1: I am part of the tree too!</td>
            <td>That's it!</td>
            <td><a href="#" class="del">删除</a> <a href="#" class="add">添加子节点</a></td>
          </tr>
          <tr data-node-id="14" data-parent-id="1">
            <td><span class='file'></span>Node 1.2: Look, I am a table row <em>and</em> I am part of a tree!</td>
            <td>Interesting.</td>
            <td><a href="#" class="del">删除</a> <a href="#" class="add">添加子节点</a></td>
          </tr>
          <tr data-node-id="2">
            <td><span class='file'></span>Node 2: I am another root node, but without children</td>
            <td>Hurray!</td>
            <td><a href="#" class="del">删除</a> <a href="#" class="add">添加子节点</a></td>
          </tr>
        </tbody>
      </table>
	</div>
	<script src="../lib/jquery.js"></script>
	<script src="jquery.treetable.js"></script>
	<script type="text/javascript">
	
		var counter = 100;
		function getJSON(id){
			return [{"name":"节点" + counter,id:counter++,leaf:true},
			        {"name":"节点" + counter,id:counter++,leaf:false},
			        {"name":"节点" + counter,id:counter++,leaf:true}]
		}
		function loadHtml(id){
			var data = getJSON(id);
			var str = '';
			$.each(data,function(i,item){
				str += '<tr data-node-id="' + item.id + '" data-parent-id="'+id+'"  data-tt-branch="' + (item.leaf ? "false" : "true")+ '">' + 
						'<td>' + 
						(item.leaf ? '<span class="file"></span>' :'<span class="folder"></span>') +
						item.name + '</td>' + 
						'<td>(' +  item.name + '</td>)' + 
						'<td><a href="#" class="del">删除</a> <a href="#" class="add">添加子节点</a></td>' + 
						'</tr>';
			});
			return str;
		}
		$(function(){
			$("#example-basic").treetable({
				nodeIdAttr: "nodeId",
				parentIdAttr: "parentId",
				stringCollapse: "收起",
				stringExpand: "展开",
				expandable: true,
				
				//展开
				onNodeExpand: function(){
					var node = this;
					//是否已经加载
					if(node.children && !node.children.length ){
						var html = loadHtml(node.id);
						$("#example-basic").treetable("loadBranch",node,html);	
					}
					
				}
			}).on("click",".del",function(e){
				e.preventDefault();
				var id = $(this).closest("tr").data("node-id");				
				$("#example-basic").treetable("removeNode",id);
			}).on("click",".add",function(e){
				e.preventDefault();
				var id = $(this).closest("tr").data("node-id");
				var html = loadHtml(id);
				var node = $("#example-basic").treetable("node",id);

				$("#example-basic").treetable("loadBranch",node,html);
				
				//修改节点图标
				$(this).closest("tr").find("td .file").removeClass("file").addClass("folder");
				
			});
		})
	</script>
  </body>
</html>

查看图片附件

分享到：

简单的css3全屏滚动 | 纯CSS3的图片slider

2015-04-20 16:12
浏览 12010
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery插件treetable 的使用

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery插件treetable 的使用

评论

发表评论

相关推荐

webpack简单打包PC网站前端资源

grunt构建基于seajs的网站实现

js平滑滚动回到顶部

fis-amd 的使用与修改

scrollMagic 视差与滚动动画GSAP

skrollr-视差滚动动画插件

stellar插件的使用

icon font VS svg font

gulp下静态资源的合并、压缩、MD5后缀

DOMContentLoaded VS onload VS onreadystatechange

简单的css3全屏滚动

sublime 侧边栏字体大小修改

移动端的“点透”问题

scheme缺少,ie的bug

大整数相加

getBoundingClientRect 跨浏览器实现

window.name 跨域

window.name 跨域

HTML History API

Emberjs学习

最近访客更多访客>>