- 浏览: 438941 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
ubuntu的疯狂:
推荐一份完整的教程:http://blog.ddlisting ...
Emberjs学习 -
ptz19:
请问,如果把合并前的文件,不要dest 目标目录来。如: js ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
楼主,还有个问题,<a href="" ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
感谢楼主,用到了您的代码, 但现在好像有改动 否则会报错:修改 ...
gulp下静态资源的合并、压缩、MD5后缀 -
denverj:
感谢分享~
Emberjs学习
插件的文档写得不是很好,为了能弄出异步加载的功能,小折腾了一番。
插件地址:
https://github.com/ludo/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>
发表评论
-
webpack简单打包PC网站前端资源
2016-02-23 14:30 1624:arrow: 1. 纯前端的打包输出,比较有局限 2 ... -
grunt构建基于seajs的网站实现
2015-06-16 16:49 1090Gruntfile.js module.exports ... -
js平滑滚动回到顶部
2015-06-10 11:42 3950优先使用 requestAnimationFrame实现。 实 ... -
fis-amd 的使用与修改
2015-05-26 16:14 3908https://github.com/fex-team/fis ... -
scrollMagic 视差与滚动动画GSAP
2015-05-19 18:14 4248scrollMagic(https://github.com/ ... -
skrollr-视差滚动动画插件
2015-05-19 14:18 1696skrollr ( https://github.com/Pr ... -
stellar插件的使用
2015-05-18 17:30 1671<!DOCTYPE html> < ... -
icon font VS svg font
2015-05-14 15:21 1156关于字体图标和SVG图标,CSS TRICK网站有较好的说明。 ... -
gulp下静态资源的合并、压缩、MD5后缀
2015-05-05 15:48 22529var gulp = require('gulp'); ... -
DOMContentLoaded VS onload VS onreadystatechange
2015-04-30 14:50 69361. DOMContentLoaded 在页面html、scr ... -
简单的css3全屏滚动
2015-04-27 16:41 1400<!DOCTYPE html> <ht ... -
sublime 侧边栏字体大小修改
2015-04-16 10:46 3778【转载自:http://jekhy.com ... -
移动端的“点透”问题
2015-04-15 14:13 1604移动端的“点透”问题,这篇博文有较好的说明: http://w ... -
scheme缺少,ie的bug
2015-04-01 17:34 499在页面上定位一个资源(JS/CSS/image),通常的url ... -
大整数相加
2015-03-26 22:18 878function repeatStr(ch, n){ ... -
getBoundingClientRect 跨浏览器实现
2015-03-18 18:30 1059<head> <script ... -
window.name 跨域
2015-03-18 17:29 845window.name跨域的基础是:iframe页面在其url ... -
window.name 跨域
2015-03-18 17:27 1window.name跨域的基础是:iframe页面在其ur ... -
HTML History API
2015-03-13 18:05 1082// 替换当前浏览器history的最后一项记录。 hi ... -
Emberjs学习
2015-01-27 17:13 4049断断续续看了3周,还是一头雾水,文档不是很友好,这个框架,太多 ...
相关推荐
treetable这个jquery插件 的演示demo,带完整的jquery,treetable和css依赖
treeTable V1.0 博文链接:https://zhanchaojiang.iteye.com/blog/1036454
treetable这个jquery插件 的演示demo,带完整的jquery,treetable和css依赖
使用起来代码很简单 效果很不错 快下吧
NULL 博文链接:https://zhaozhi3758.iteye.com/blog/1399229
jquery.treetable,.js下载.基于jquery的表格插件,table,表格,treetable,资源下载
jquery treetable树形表格菜单插件
。
。
jQuery treeTable 插件的功能跟 JQTreeTable 类似,是在一个表格内显示树状结果
不适用于最新的jquery-treetable插件 如果您仍然有兴趣,我确实创建了一个在线示例,希望这可以使您弄清楚。 要使用此插件,请检查前2点,并在第3点使用API: 在"sDom"的初始设置中,将功能"sDom" 'T'添加到...
jQuery treeTable AJAX 示例此示例演示了将 jQuery treeTable 插件 ( ) 用于启用 AJAX 的树。 它在服务器端使用 Ruby on Rails 和 SQLite。 文件 app/views/nodes/index.html.erb 包含有趣的 Javascript 位。 当节点...
jQuery treetable是jQuery的插件,“少写,多做,JavaScript库”。 使用此插件,您可以在HTML表中显示树,例如目录结构或嵌套列表。 您为什么不使用列表? 因为列表非常适合显示树,而表却不适合。 哦,等等,但是...
数据表格拖拽的jquery数据表格插件
简单的树形表格组件 jQuery treeTable 插件的功能跟 JQTreeTable 类似,是在一个表格内显示树状结果
插件+Demo+源码 亲测可用! 可中文排序,数字排序,字符串等
整理的27款jQuery Tree 插件,内容包括适应浏览器,是否开源,优缺点,使用方法,效果图等,供大家查阅。
jqtreeTable jquery 插件jqtreeTable jquery 插件 jqtreeTable jquery 插件 jqtreeTable jquery 插件
基于JQuery的表格树插件,按 data-id和data-pid计算布局,在...JQuery TreeTable n基于JQuery的表格树插件,按data-id和data-pid计算布局,在表格中展现树型结构。附加展开、关闭、查询、删除、注销、重置等公共函数。
还有插件叫sortElements,很小巧,只有3KB,兼容性也不错,而且在Github上有818个星。 最后我选择用sortElements,实现很简单: 1. 引入jQuery 代码如下: [removed][removed] 2. 引入sortElements.js