界面框架初步提交
This commit is contained in:
chiguangxu
@@ -0,0 +1,35 @@
|
||||
@charset "utf-8";
|
||||
html { height:100% }
|
||||
body { font:12px/1.5em "微软雅黑"; }
|
||||
#bg { display:none; width:100%; height:100%; overflow:hidden; position:fixed; top:0; left:0;z-index:10; }
|
||||
body.showBg { overflow:hidden; }
|
||||
body.showBg #bg { display:block;}
|
||||
a { color:#1E9300; }
|
||||
ul.nav { padding:0; margin:0; }
|
||||
ul.nav li { margin:5px 0; list-style:none; }
|
||||
pre { border-left:2px solid #A9EA1E; padding-left:8px; background:#FCFCFC; }
|
||||
pre code { padding:1px; color:#333; background:#EAEAEA; }
|
||||
#page { width:760px; margin:auto; }
|
||||
#page h1 { font-size:1.8em; color:#214FA3; font-weight:700; }
|
||||
#page h1 em { font-size:9px; color:#CCC;}
|
||||
#page fieldset { margin-top:10px; border:solid 1px #EBEBEB; }
|
||||
#page fieldset legend { padding:3px 20px; color:#FFF; background:#214FA3; font-size:1.4em; }
|
||||
#page li { line-height:1.8em; list-style: circle; margin:5px 0; color:#333; }
|
||||
#page fieldset, #page fieldset legend { -moz-border-radius:4px; -webkit-border-radius: 4px; border-radius:4px; }
|
||||
#page button { }
|
||||
#page .content { margin:0 20px; }
|
||||
#page .content h3 { color:#000; }
|
||||
#page .content ol, #page .content ul{ padding-left:0; margin-left:20px; }
|
||||
#page strong { color:#1E9300; margin-right:5px; }
|
||||
#page .tips { color:#666; border-bottom:1px dashed #CCC; }
|
||||
#page label { cursor:pointer; }
|
||||
#page .api { background:#FCFCFC; }
|
||||
#page .api strong { width:5em; display:inline-block; *zoom:1;*display:inline; }
|
||||
#page .api li { border-bottom:1px dashed #CCC; padding:5px 3px; margin:0; }
|
||||
#page .api li:hover { background:#EAEAEA; }
|
||||
#page .runCode { margin-right:4px; }
|
||||
#page .runCode textarea { width:100%; color:#214FA3; font-size:12px; }
|
||||
#page .runCode textarea:focus { border-color:#CCC; border-style:solid; }
|
||||
#page .runCode .btn { text-align:right; }
|
||||
#page .runCode button { cursor:pointer; }
|
||||
#page .about { margin-top:30px; border-top:1px solid #F8F8F8; color:#666; }
|
||||
@@ -0,0 +1,260 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>树表控件</title>
|
||||
<link href="style/demo.css" rel="stylesheet" type="text/css" />
|
||||
<style type="text/css">
|
||||
table,td,th { border: 1px solid #8DB9DB; padding:5px; border-collapse: collapse; font-size:16px; }
|
||||
</style>
|
||||
|
||||
<!--引用的文件 Begin-->
|
||||
<link href="../themes/default/jquery.treeTable.css" rel="stylesheet" type="text/css" />
|
||||
<link href="../themes/vsStyle/jquery.treeTable.css" rel="stylesheet" type="text/css" />
|
||||
<script src="../../../jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../jquery.treeTable.js" type="text/javascript"></script>
|
||||
<!--引用的文件 End-->
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
var option = {
|
||||
theme:'vsStyle',
|
||||
expandLevel : 2,
|
||||
beforeExpand : function($treeTable, id) {
|
||||
//判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
|
||||
if ($('.' + id, $treeTable).length) { return; }
|
||||
//这里的html可以是ajax请求
|
||||
var html = '<tr id="8" pId="6"><td>5.1</td><td>可以是ajax请求来的内容</td></tr>'
|
||||
+ '<tr id="9" pId="6"><td>5.2</td><td>动态的内容</td></tr>';
|
||||
|
||||
$treeTable.addChilds(html);
|
||||
},
|
||||
onSelect : function($treeTable, id) {
|
||||
window.console && console.log('onSelect:' + id);
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
$('#treeTable1').treeTable(option);
|
||||
|
||||
option.theme = 'default';
|
||||
$('#treeTable2').treeTable(option);
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<h1><span>treeTable <em>v 1.4.2</em></span></h1>
|
||||
<fieldset>
|
||||
<legend> 简介</legend>
|
||||
<div class="content">
|
||||
<p>treeTable是跨浏览器、性能很高的jquery的树表组件，它使用非常简单，只需要引用jquery库和一个js文件，接口也很简单。</p>
|
||||
<h3>优点</h3>
|
||||
<ol class="love">
|
||||
<li><strong>兼容主流浏览器</strong>: 支持IE6和IE6+, Firefox, chrome, Opera, Safari</li>
|
||||
<li><strong>接口简洁</strong>: 在普通表格的基础上增加父子关系的自定义标签就可以</li>
|
||||
<li><strong>组件性能高</strong>: 内部实现了只绑定了table的事件、使用了css sprite合并图片等</li>
|
||||
<li><strong>提供两种风格</strong>: 通过参数来设置风格</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>演示</legend>
|
||||
<table id="treeTable1" style="width:100%">
|
||||
<tr>
|
||||
<td style="width:200px;">标题</td>
|
||||
<td>内容</td>
|
||||
</tr>
|
||||
<tr id="1">
|
||||
<td><span controller="true">1</span></td>
|
||||
<td>内容</td></tr>
|
||||
<tr id="2" pId="1">
|
||||
<td><span controller="true">2</span></td>
|
||||
<td>内容</td></tr>
|
||||
<tr id="3" pId="2">
|
||||
<td>3</td>
|
||||
<td>内容</td>
|
||||
</tr>
|
||||
<tr id="4" pId="2">
|
||||
<td>4</td>
|
||||
<td>内容</td>
|
||||
</tr>
|
||||
<tr id="5" pId="4">
|
||||
<td>4.1</td>
|
||||
<td>内容</td>
|
||||
</tr>
|
||||
<tr id="6" pId="1" hasChild="true">
|
||||
<td>5</td>
|
||||
<td>注意这个节点是动态加载的</td>
|
||||
</tr>
|
||||
<tr id="7">
|
||||
<td>8</td>
|
||||
<td>内容</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr/>
|
||||
<table id="treeTable2" style="width:100%">
|
||||
<tr>
|
||||
<td style="width:200px;">标题</td>
|
||||
<td>内容</td>
|
||||
</tr>
|
||||
<tr id="1">
|
||||
<td><span controller="true">1</span></td>
|
||||
<td>内容</td></tr>
|
||||
<tr id="2" pId="1">
|
||||
<td><span controller="true">2</span></td>
|
||||
<td>内容</td></tr>
|
||||
<tr id="3" pId="2">
|
||||
<td>3</td>
|
||||
<td>内容</td>
|
||||
</tr>
|
||||
<tr id="4" pId="2">
|
||||
<td>4</td>
|
||||
<td>内容</td>
|
||||
</tr>
|
||||
<tr id="5" pId="4">
|
||||
<td>4.1</td>
|
||||
<td>内容</td>
|
||||
</tr>
|
||||
<tr id="6" pId="1" hasChild="true">
|
||||
<td>5</td>
|
||||
<td>注意这个节点是动态加载的</td>
|
||||
</tr>
|
||||
<tr id="7">
|
||||
<td>8</td>
|
||||
<td>内容</td>
|
||||
</tr>
|
||||
</table>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>接口</legend>
|
||||
<h3>配置参数</h3>
|
||||
<div>
|
||||
<ul class="love">
|
||||
<li><strong>theme</strong>: string {主题，有两个选项：default、vsStyle. 默认:default}</li>
|
||||
<li><strong>expandLevel</strong>: int {树表的展开层次. 默认:1}</li>
|
||||
<li><strong>column</strong>: int {可控制列的序号. 默认:0，即第一列}</li>
|
||||
<li><strong>onSelect</strong>: function {拥有controller自定义属性的元素的点击事件，return false则中止展开. 默认值:
|
||||
<pre><code>function($treeTable, id) {
|
||||
//$treeTable 当前树表的jquery对象.
|
||||
//id 当前行的id
|
||||
|
||||
//返回false，则直接退出，不会激发后面的beforeExpand和子节点的展开
|
||||
return true;
|
||||
}</code></pre>
|
||||
</li>
|
||||
<li><strong>beforeExpand</strong>: {展开子节点前触发的事件, 默认值：</li>
|
||||
<pre><code>function($treeTable, id) {
|
||||
//$treeTable 当前树表的jquery对象.
|
||||
//id 当前行的id
|
||||
}</code></pre>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>属性说明</h3>
|
||||
<div>
|
||||
<ul class="love">
|
||||
<li><strong>id</strong>: string 行的id</li>
|
||||
<li><strong>pId</strong>: string 父行的id</li>
|
||||
<li><strong>controller</strong>: bool 指定某一个元素是否可以控制行的展开</li>
|
||||
<li><strong>hasChild</strong>: bool 指定某一个tr元素是否有孩子（动态加载需用到）</li>
|
||||
<li><strong>isFirstOne</strong>: bool 指定某一个tr元素是否是第一个孩子（自动生成属性，只读）</li>
|
||||
<li><strong>isLastOne</strong>: bool 指定某一个tr元素是否是最后一个孩子（自动生成属性，只读）</li>
|
||||
<li><strong>prevId</strong>: string 前一个兄弟节点的id（自动生成属性，只读）</li>
|
||||
<li><strong>depth</strong>: string 当前行的深度（自动生成属性，只读）</li>
|
||||
</ul>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>使用方式</legend>
|
||||
<h3> $("#元素id").treeTable({}) 如:</h3>
|
||||
<p>引用的文件</p>
|
||||
<pre><code><script src="/script/jquery.js" type="text/javascript"> </script>
|
||||
<script src="/script/treeTable/jquery.treeTable.js" type="text/javascript"> </script></code></pre>
|
||||
<p>js代码</p>
|
||||
<pre><code>$(function(){
|
||||
var option = {
|
||||
theme:'vsStyle',
|
||||
expandLevel : 2,
|
||||
beforeExpand : function($treeTable, id) {
|
||||
//判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
|
||||
if ($('.' + id, $treeTable).length) { return; }
|
||||
//这里的html可以是ajax请求
|
||||
var html = '<tr id="8" pId="6"><td>5.1</td><td>可以是ajax请求来的内容</td></tr>'
|
||||
+ '<tr id="9" pId="6"><td>5.2</td><td>动态的内容</td></tr>';
|
||||
|
||||
$treeTable.addChilds(html);
|
||||
},
|
||||
onSelect : function($treeTable, id) {
|
||||
window.console && console.log('onSelect:' + id);
|
||||
}
|
||||
|
||||
};
|
||||
$('#treeTable1').treeTable(option);
|
||||
});</code></pre>
|
||||
<p>html结构</p>
|
||||
<pre><code><table id="treeTable1" style="width:100%">
|
||||
<tr>
|
||||
<td style="width:200px;">标题</td>
|
||||
<td>内容</td>
|
||||
</tr>
|
||||
<tr id="1">
|
||||
<td><span controller="true">1</span></td>
|
||||
<td>内容</td></tr>
|
||||
<tr id="2" pId="1">
|
||||
<td><span controller="true">2</span></td>
|
||||
<td>内容</td></tr>
|
||||
<tr id="3" pId="2">
|
||||
<td>3</td>
|
||||
<td>内容</td>
|
||||
</tr>
|
||||
<tr id="4" pId="2">
|
||||
<td>4</td>
|
||||
<td>内容</td>
|
||||
</tr>
|
||||
<tr id="5" pId="4">
|
||||
<td>4.1</td>
|
||||
<td>内容</td>
|
||||
</tr>
|
||||
<tr id="6" pId="1" hasChild="true">
|
||||
<td>5</td>
|
||||
<td>注意这个节点是动态加载的</td>
|
||||
</tr>
|
||||
<tr id="7">
|
||||
<td>8</td>
|
||||
<td>内容</td>
|
||||
</tr>
|
||||
</table></code></pre>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>关于</legend>
|
||||
<div class="content">
|
||||
<h3>作者: benzhan(詹潮江)</h3>
|
||||
<h3>版本变更</h3>
|
||||
<p>1.0版本：创建基本功能。(2011-05-04)</p>
|
||||
<p>1.1版本：(2011-05-08)</p>
|
||||
<pre>这个版本提高了性能，做了以下改进：
|
||||
|
||||
* 1、使用了Css Sprite Tools 合并了分散的图标
|
||||
* 2、使用了.id的方式来代替原来[pId=id]，这样选择孩子效率更高
|
||||
* 3、把css剥离出来，增加动态添加css，每次家在前判断是否添加过
|
||||
|
||||
关于第二点，非常感谢onli同学的提醒。但我并没有直接修改我的接口，直接除去pId，而是在第一次遍历时将pId作为class名添加到节点中。这样有两个好处：
|
||||
（1）接口可读性会比较好，pId比class更容易理解。
|
||||
（2）第二点，如果直接使用class，那节点本来就有样式，这样获取到的className还要去分解空格得到pId，挺麻烦的。</pre>
|
||||
<hr>
|
||||
<p>1.3版本：(2011-05-09)</p>
|
||||
<pre>这个版本扩展了事件，做了以下改进：
|
||||
|
||||
* 1、增加onSelect事件，onSelect: function($treeTable, id){}
|
||||
* 2、增加beforeExpand事件，beforeExpand : function($treeTable, id){}
|
||||
|
||||
动态加载节点就靠beforeExpand 事件了。</pre>
|
||||
<p>1.4.2版本：(2011-09-03)</p>
|
||||
<pre>这个版本修复了bug，做了以下改进：
|
||||
* 1、修复了多个tableTree不在同个页面的bug，并且可以让不同的tableTree使用不同的主题。
|
||||
* 2、增加了controller的自定义标签来控制可点击的区域。</pre>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,249 @@
|
||||
/**
|
||||
* 树表组件
|
||||
* @author benzhan (詹潮江)
|
||||
* @version 1.4.2
|
||||
* @lastUpdateDate 2011-09-03
|
||||
* @mail zhanchaojiang@qq.com
|
||||
*/
|
||||
(function ($) {
|
||||
// window.SITE_URL = window.SITE_URL || '';
|
||||
// if (document.location.href.indexOf('http://') != 0) {
|
||||
// var path = '../themes/';
|
||||
// } else {
|
||||
// var path = SITE_URL + '/themes/';
|
||||
// }
|
||||
|
||||
$.fn.treeTable = function (opts) {
|
||||
opts = $.extend({
|
||||
path: '',
|
||||
theme: 'default',
|
||||
expandLevel: 1,
|
||||
column: 0,
|
||||
onSelect: function($treeTable, id){},
|
||||
beforeExpand: function($treeTable, id){}
|
||||
}, opts);
|
||||
|
||||
var $treeTable = this;
|
||||
$treeTable.addClass('tree_table');
|
||||
|
||||
// //添加需要的样式
|
||||
// if ($('head').find('#tree_table_' + opts.theme).length == 0) {
|
||||
// $('head').append('<link id="tree_table_' + opts.theme + '" href="' + opts.path + 'themes/' + opts.theme + '/treeTable.css" rel="stylesheet" type="text/css" />');
|
||||
// }
|
||||
|
||||
var css = {
|
||||
'N' : opts.theme + '_node',
|
||||
'AN' : opts.theme + '_active_node',
|
||||
'O' : opts.theme + '_open',
|
||||
'LO' : opts.theme + '_last_open',
|
||||
'S' : opts.theme + '_shut',
|
||||
'LS' : opts.theme + '_last_shut',
|
||||
'HO' : opts.theme + '_hover_open',
|
||||
'HS' : opts.theme + '_hover_shut',
|
||||
'HLO' : opts.theme + '_hover_last_open',
|
||||
'HLS' : opts.theme + '_hover_last_shut',
|
||||
'L' : opts.theme + '_leaf',
|
||||
'LL' : opts.theme + '_last_leaf',
|
||||
'B' : opts.theme + '_blank',
|
||||
'V' : opts.theme + '_vertline'
|
||||
};
|
||||
|
||||
var pMap = {}, cMap = {};
|
||||
var $trs = $treeTable.find('tr');
|
||||
initRelation($trs, true);
|
||||
|
||||
$treeTable.click(function (event) {
|
||||
var $target = $(event.target);
|
||||
|
||||
if ($target.attr('controller')) {
|
||||
$target = $target.parents('tr[haschild]').find('[arrow]');
|
||||
//判断是否是叶子节点
|
||||
if ($target.attr('class').indexOf(css['AN']) == -1 && $target.attr('class').indexOf(css['N']) == -1) { return; }
|
||||
var id = $target.parents('tr[haschild]')[0].id;
|
||||
if (opts.onSelect && opts.onSelect($treeTable, id) === false) { return; }
|
||||
}
|
||||
|
||||
if ($target.attr('arrow')) {
|
||||
var className = $target.attr('class');
|
||||
if (className == css['AN'] + ' ' + css['HLO'] || className == css['AN'] + ' ' + css['HO']) {
|
||||
var id = $target.parents('tr[haschild]')[0].id;
|
||||
$target.attr('class', css['AN'] + " " + (className.indexOf(css['HO']) != -1 ? css['HS'] : css['HLS']));
|
||||
|
||||
//关闭所有孩子的tr
|
||||
shut(id);
|
||||
return;
|
||||
} else if (className == css['AN'] + ' ' + css['HLS'] || className == css['AN'] + ' ' + css['HS']) {
|
||||
var id = $target.parents('tr')[0].id;
|
||||
$target.attr('class', css['AN'] + " " + (className.indexOf(css['HS']) != -1 ? css['HO'] : css['HLO']));
|
||||
|
||||
opts.beforeExpand($treeTable, id);
|
||||
//展开所有直属节点，根据图标展开子孙节点
|
||||
open(id);
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$treeTable.mouseover(hoverActiveNode).mouseout(hoverActiveNode);
|
||||
|
||||
function hoverActiveNode(event) {
|
||||
var $target = $(event.target);
|
||||
|
||||
if ($target.attr('controller')) {
|
||||
$target = $target.parents('tr[haschild]').find('[arrow]');
|
||||
}
|
||||
|
||||
if ($target.attr('arrow')) {
|
||||
var className = $target.attr('class');
|
||||
if (className && !className.indexOf(css['AN'])) {
|
||||
var len = opts.theme.length + 1;
|
||||
className = className.split(' ')[1].substr(len);
|
||||
if (className.indexOf('hover_') === 0) {
|
||||
className = opts.theme + '_' + className.substr(6);
|
||||
} else {
|
||||
className = opts.theme + '_hover_' + className;
|
||||
}
|
||||
|
||||
$target.attr('class', css['AN'] + ' ' + className);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化节点关系 */
|
||||
function initRelation($trs, hideLevel) {
|
||||
//构造父子关系
|
||||
$trs.each(function (i) {
|
||||
var pId = $(this).attr('pId') || 0;
|
||||
pMap[pId] || (pMap[pId] = []);
|
||||
pMap[pId].push(this.id);
|
||||
cMap[this.id] = pId;
|
||||
|
||||
//给这个tr增加类为了提高选择器的效率
|
||||
$(this).addClass(pId);
|
||||
}).find('[controller]').css('cursor', 'pointer');
|
||||
|
||||
//标识父节点是否有孩子、是否最后一个节点
|
||||
$trs.each(function (i) {
|
||||
if (!this.id) { return; }
|
||||
var $tr = $(this);
|
||||
|
||||
pMap[this.id] && $tr.attr('hasChild', true);
|
||||
var pArr = pMap[cMap[this.id]];
|
||||
if (pArr[0] == this.id) {
|
||||
$tr.attr('isFirstOne', true);
|
||||
} else {
|
||||
var prevId = 0;
|
||||
for (var i = 0; i < pArr.length; i++) {
|
||||
if (pArr[i] == this.id) { break; }
|
||||
prevId = pArr[i];
|
||||
}
|
||||
$tr.attr('prevId', prevId);
|
||||
}
|
||||
|
||||
pArr[pArr.length - 1] == this.id && $tr.attr('isLastOne', true);
|
||||
|
||||
var depth = getDepth(this.id);
|
||||
$tr.attr('depth', depth);
|
||||
|
||||
//格式化节点
|
||||
formatNode(this);
|
||||
|
||||
//判断是否要隐藏限制的层次
|
||||
if (hideLevel) {
|
||||
depth > opts.expandLevel && $tr.hide();
|
||||
//判断是否小于深度，如果小于深度则要换成展开的图标
|
||||
if ($tr.attr('hasChild') && $tr.attr('depth') < opts.expandLevel) {
|
||||
var className = $tr.attr('isLastOne') ? css['LO'] : css['O'];
|
||||
$tr.find('.' + css['AN']).attr('class', css['AN'] + ' ' + className);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//递归获取深度
|
||||
function getDepth(id) {
|
||||
if (cMap[id] == 0) { return 1; }
|
||||
var $parentDepth = getDepth(cMap[id]);
|
||||
return $parentDepth + 1;
|
||||
}
|
||||
}
|
||||
|
||||
//递归关闭所有的孩子
|
||||
function shut(id) {
|
||||
if (!pMap[id]) { return false; }
|
||||
for (var i = 0; i < pMap[id].length; i++) {
|
||||
shut(pMap[id][i]);
|
||||
}
|
||||
$('tr.' + id, $treeTable).hide();
|
||||
}
|
||||
|
||||
//根据历史记录来展开节点
|
||||
function open(id) {
|
||||
$('tr.' + id, $treeTable).show();
|
||||
if (!pMap[id]) { return false; }
|
||||
for (var i = 0; i < pMap[id].length; i++) {
|
||||
var cId = pMap[id][i];
|
||||
if (pMap[cId]) {
|
||||
var className = $('#' + cId, $treeTable).find('.' + css['AN']).attr('class');
|
||||
//如果子节点是展开图表的，则需要展开此节点
|
||||
(className == css['AN'] + ' ' + css['O'] || className == css['AN'] + ' ' + css['LO']) && open(cId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function formatNode(tr) {
|
||||
var $cur = $(tr);
|
||||
var id = tr.id;
|
||||
|
||||
//-------------下面一大段都是获取$preSpan---------
|
||||
if (cMap[id] == 0) {
|
||||
//如果是顶级节点，则没有prev_sp
|
||||
var $preSpan = $('<span class="prev_sp"></span>');
|
||||
} else {
|
||||
//先判断是否有上一个兄弟节点
|
||||
if (!$cur.attr('isFirstOne')) {
|
||||
var $preSpan = $('#' + $cur.attr('prevId'), $treeTable).children("td").eq(opts.column).find('.prev_sp').clone();
|
||||
} else {
|
||||
var $parent = $('#' + cMap[id], $treeTable);
|
||||
//没有上一个兄弟节点，则使用父节点的prev_sp
|
||||
var $preSpan = $parent.children("td").eq(opts.column).find('.prev_sp').clone();
|
||||
|
||||
//如果父亲后面没有兄弟，则直接加空白，若有则加竖线
|
||||
if ($parent.attr('isLastOne')) {
|
||||
$preSpan.append('<span class="' + css['N'] + ' ' + css['B'] + '"></span>');
|
||||
} else {
|
||||
$preSpan.append('<span class="' + css['N'] + ' ' + css['V'] + '"></span>');
|
||||
}
|
||||
}
|
||||
}
|
||||
//------------------------------------------------
|
||||
|
||||
if ($cur.attr('hasChild')) {
|
||||
//如果有下一个节点，并且下一个节点的父亲与当前节点的父亲相同，则说明该节点不是最后一个节点
|
||||
var className = $cur.attr('isLastOne') ? css['LS'] : css['S'];
|
||||
className = css['AN'] + ' ' + className;
|
||||
} else {
|
||||
var className = css['N'] + ' ' + ($cur.attr('isLastOne') ? css['LL'] : css['L']);
|
||||
}
|
||||
|
||||
var $td = $cur.children("td").eq(opts.column);
|
||||
$td.prepend('<span arrow="true" class="' + className + '"></span>').prepend($preSpan);
|
||||
};
|
||||
|
||||
$treeTable.addChilds = function(trsHtml) {
|
||||
var $trs = $(trsHtml);
|
||||
if (!$trs.length) { return false; }
|
||||
|
||||
var pId = $($trs[0]).attr('pId');
|
||||
if (!pId) { return false; }
|
||||
|
||||
//插入到最后一个孩子后面，或者直接插在父节点后面
|
||||
var insertId = pMap[pId] && pMap[pId][pMap[pId].length - 1] || pId;
|
||||
$('#' + insertId, $treeTable).after($trs);
|
||||
initRelation($trs);
|
||||
};
|
||||
|
||||
return $treeTable;
|
||||
};
|
||||
})(jQuery);
|
||||
|
||||
2
src/main/webapp/static/global/plugins/treeTable/jquery.treeTable.min.js
vendored
Normal file
2
src/main/webapp/static/global/plugins/treeTable/jquery.treeTable.min.js
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
(function(a){a.fn.treeTable=function(b){b=a.extend({path:"",theme:"default",expandLevel:1,column:0,onSelect:function(m,n){},beforeExpand:function(m,n){}},b);var l=this;l.addClass("tree_table");var g={N:b.theme+"_node",AN:b.theme+"_active_node",O:b.theme+"_open",LO:b.theme+"_last_open",S:b.theme+"_shut",LS:b.theme+"_last_shut",HO:b.theme+"_hover_open",HS:b.theme+"_hover_shut",HLO:b.theme+"_hover_last_open",HLS:b.theme+"_hover_last_shut",L:b.theme+"_leaf",LL:b.theme+"_last_leaf",B:b.theme+"_blank",V:b.theme+"_vertline"};var j={},d={};var c=l.find("tr");e(c,true);l.click(function(o){var m=a(o.target);if(m.attr("controller")){m=m.parents("tr[haschild]").find("[arrow]");if(m.attr("class").indexOf(g.AN)==-1&&m.attr("class").indexOf(g.N)==-1){return}var p=m.parents("tr[haschild]")[0].id;if(b.onSelect&&b.onSelect(l,p)===false){return}}if(m.attr("arrow")){var n=m.attr("class");if(n==g.AN+" "+g.HLO||n==g.AN+" "+g.HO){var p=m.parents("tr[haschild]")[0].id;m.attr("class",g.AN+" "+(n.indexOf(g.HO)!=-1?g.HS:g.HLS));i(p);return}else{if(n==g.AN+" "+g.HLS||n==g.AN+" "+g.HS){var p=m.parents("tr")[0].id;m.attr("class",g.AN+" "+(n.indexOf(g.HS)!=-1?g.HO:g.HLO));b.beforeExpand(l,p);f(p);return}}}});l.mouseover(h).mouseout(h);function h(p){var n=a(p.target);if(n.attr("controller")){n=n.parents("tr[haschild]").find("[arrow]")}if(n.attr("arrow")){var o=n.attr("class");if(o&&!o.indexOf(g.AN)){var m=b.theme.length+1;o=o.split(" ")[1].substr(m);if(o.indexOf("hover_")===0){o=b.theme+"_"+o.substr(6)}else{o=b.theme+"_hover_"+o}n.attr("class",g.AN+" "+o);return}}}function e(n,m){n.each(function(q){var p=a(this).attr("pId")||0;j[p]||(j[p]=[]);j[p].push(this.id);d[this.id]=p;a(this).addClass(p)}).find("[controller]").css("cursor","pointer");n.each(function(q){if(!this.id){return}var s=a(this);j[this.id]&&s.attr("hasChild",true);var p=j[d[this.id]];if(p[0]==this.id){s.attr("isFirstOne",true)}else{var u=0;for(var q=0;q<p.length;q++){if(p[q]==this.id){break}u=p[q]}s.attr("prevId",u)}p[p.length-1]==this.id&&s.attr("isLastOne",true);var t=o(this.id);s.attr("depth",t);
|
||||
k(this);if(m){t>b.expandLevel&&s.hide();if(s.attr("hasChild")&&s.attr("depth")<b.expandLevel){var r=s.attr("isLastOne")?g.LO:g.O;s.find("."+g.AN).attr("class",g.AN+" "+r)}}});function o(q){if(d[q]==0){return 1}var p=o(d[q]);return p+1}}function i(n){if(!j[n]){return false}for(var m=0;m<j[n].length;m++){i(j[n][m])}a("tr."+n,l).hide()}function f(p){a("tr."+p,l).show();if(!j[p]){return false}for(var n=0;n<j[p].length;n++){var m=j[p][n];if(j[m]){var o=a("#"+m,l).find("."+g.AN).attr("class");(o==g.AN+" "+g.O||o==g.AN+" "+g.LO)&&f(m)}}}function k(o){var m=a(o);var s=o.id;if(d[s]==0){var q=a('<span class="prev_sp"></span>')}else{if(!m.attr("isFirstOne")){var q=a("#"+m.attr("prevId"),l).children("td").eq(b.column).find(".prev_sp").clone()}else{var p=a("#"+d[s],l);var q=p.children("td").eq(b.column).find(".prev_sp").clone();if(p.attr("isLastOne")){q.append('<span class="'+g.N+" "+g.B+'"></span>')}else{q.append('<span class="'+g.N+" "+g.V+'"></span>')}}}if(m.attr("hasChild")){var n=m.attr("isLastOne")?g.LS:g.S;n=g.AN+" "+n}else{var n=g.N+" "+(m.attr("isLastOne")?g.LL:g.L)}var r=m.children("td").eq(b.column);r.prepend('<span arrow="true" class="'+n+'"></span>').prepend(q)}l.addChilds=function(p){var m=a(p);if(!m.length){return false}var o=a(m[0]).attr("pId");if(!o){return false}var n=j[o]&&j[o][j[o].length-1]||o;a("#"+n,l).after(m);e(m)};return l}})(jQuery);
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 239 B |
Binary file not shown.
|
After Width: | Height: | Size: 383 B |
@@ -0,0 +1,9 @@
|
||||
.tree_table .default_node, .tree_table .default_active_node {width:16px;height:16px;border: medium none; margin: 0; padding: 0;display: inline-block;}
|
||||
.tree_table .default_active_node {cursor: pointer;}
|
||||
.tree_table .default_leaf{background:url(./allbgs.gif) no-repeat -16px 0px;width:16px;}
|
||||
.tree_table .default_last_leaf{background:url(./allbgs.gif) no-repeat -64px 0px;width:16px;}
|
||||
.tree_table .default_vertline{background:url(./allbgs.gif) no-repeat -32px 0px;width:16px;}
|
||||
.tree_table .default_open, .tree_table .default_hover_open{background:url(./allbgs.gif) no-repeat 0px 0px;width:16px;}
|
||||
.tree_table .default_shut, .tree_table .default_hover_shut{background:url(./allbgs.gif) no-repeat -48px 0px;width:16px;}
|
||||
.tree_table .default_last_shut, .tree_table .default_hover_last_shut{background:url(./allbgs.gif) no-repeat -96px 0px;width:16px;}
|
||||
.tree_table .default_last_open, .tree_table .default_hover_last_open{background:url(./allbgs.gif) no-repeat -112px 0px;width:16px;}
|
||||
1
src/main/webapp/static/global/plugins/treeTable/themes/default/treeTable.min.css
vendored
Normal file
1
src/main/webapp/static/global/plugins/treeTable/themes/default/treeTable.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.tree_table .default_node,.tree_table .default_active_node{width:16px;height:16px;border:medium none;margin:0;padding:0;display:inline-block}.tree_table .default_active_node{cursor:pointer}.tree_table .default_leaf{background:url(./allbgs.gif) no-repeat -16px 0;width:16px}.tree_table .default_last_leaf{background:url(./allbgs.gif) no-repeat -64px 0;width:16px}.tree_table .default_vertline{background:url(./allbgs.gif) no-repeat -32px 0;width:16px}.tree_table .default_open,.tree_table .default_hover_open{background:url(./allbgs.gif) no-repeat 0 0;width:16px}.tree_table .default_shut,.tree_table .default_hover_shut{background:url(./allbgs.gif) no-repeat -48px 0;width:16px}.tree_table .default_last_shut,.tree_table .default_hover_last_shut{background:url(./allbgs.gif) no-repeat -96px 0;width:16px}.tree_table .default_last_open,.tree_table .default_hover_last_open{background:url(./allbgs.gif) no-repeat -112px 0;width:16px}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
@@ -0,0 +1,6 @@
|
||||
.tree_table .default_node, .tree_table .default_active_node {width:16px;height:16px;border: medium none; margin: 0; padding: 0;display: inline-block;}
|
||||
.tree_table .default_active_node {cursor: pointer;}
|
||||
.tree_table .default_open, .tree_table .default_last_open{background:url(./allbgs.gif) no-repeat 0px 1px;width:16px;}
|
||||
.tree_table .default_shut, .tree_table .default_last_shut{background:url(./allbgs.gif) no-repeat -16px 1px;width:16px;}
|
||||
.tree_table .default_hover_open, .tree_table .default_hover_last_open{background:url(./allbgs.gif) no-repeat -32px 1px;width:16px;}
|
||||
.tree_table .default_hover_shut, .tree_table .default_hover_last_shut{background:url(./allbgs.gif) no-repeat -48px 1px;width:16px;}
|
||||
1
src/main/webapp/static/global/plugins/treeTable/themes/vsStyle/treeTable.min.css
vendored
Normal file
1
src/main/webapp/static/global/plugins/treeTable/themes/vsStyle/treeTable.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.tree_table .default_node,.tree_table .default_active_node{width:16px;height:16px;border:medium none;margin:0;padding:0;display:inline-block}.tree_table .default_active_node{cursor:pointer}.tree_table .default_open,.tree_table .default_last_open{background:url(./allbgs.gif) no-repeat 0 1px;width:16px}.tree_table .default_shut,.tree_table .default_last_shut{background:url(./allbgs.gif) no-repeat -16px 1px;width:16px}.tree_table .default_hover_open,.tree_table .default_hover_last_open{background:url(./allbgs.gif) no-repeat -32px 1px;width:16px}.tree_table .default_hover_shut,.tree_table .default_hover_last_shut{background:url(./allbgs.gif) no-repeat -48px 1px;width:16px}
|
||||
Reference in New Issue
Block a user