功能：jquery实现树形表格，实现维度的层次展示
原理：通过区分维度的层级关系实现上下级展示，
如地区代码44-03-04的层级结构为2-2-2
创建一个树形表格控件dimtable，可以用于展示维度码表的层级结构
最后效果如下图所示：点击“+”展开下级，点击“-”隐藏下级
配置属性：
dim维度名称：djzclx,此维度名称作为td的属性来实现上下级展示
levelFormat维度层级结构：如地区代码结构为２-２-２;
indentPx层级缩进像素值:20,不要带px,不要带px 通过控制TD的padding-left实现层次缩进
data数据格式：[ { dim:44,dimValue:"广东" ,gdp:124,cpi:125},
{ dim:4403,dimValue:"深圳" ,gdp:124,cpi:125},
{ dim:440303,dimValue:"深圳罗湖" ,gdp:124,cpi:125},
{ dim:440304,dimValue:"深圳福田" ,gdp:124,cpi:125},
{ dim:44030401,dimValue:"深圳福田梅林" ,gdp:124,cpi:125},
{ dim:44030402,dimValue:"深圳福田莲花" ,gdp:124,cpi:125},
{ dim:4405,dimValue:"汕头" ,gdp:124,cpi:125},
{ dim:440501,dimValue:"汕头潮阳" ,gdp:124,cpi:125},
{ dim:440502,dimValue:"汕头潮南" ,gdp:124,cpi:125},
{ dim:43,dimValue:"北京" ,gdp:124,cpi:125} ,
{ dim:4301,dimValue:"北京朝阳" ,gdp:124,cpi:125},
{ dim:42,dimValue:"上海" ,gdp:124,cpi:125}
]
数据要求：1.数组的顺序要按照父子顺序排好
2.json中dim和dimValue两个名称不能改变
genTr(rec)函数：定义生成表格行的函数，由用户自己实现，rec参数表示json的一条记录，由用户把自己的数据生成符合要求的TR
设计思路：
如何区分维度的上下级关系：通过层级结构，应用jquery提供的属性以什么开始，来区分上下级关系，
$("[href^='.jpg']") 选取所有 href 值以 ".jpg" 开始的元素。
------------------------以下是js代码实现 dimtable.js----------------------------------------------
(function($) {
// 插件的定义 所有的元素可以通过选择器调用$("#myDiv").dimtable（...）
$.fn.dimtable = function(options) {
//内部常量
// build main options before element iteration
var opts = $.extend({}, $.fn.dimtable.defaults, options);
// iterate and reformat each matched element
// 迭代每个元素执行该函数：把内容加上strong标签使高亮
return this.each(function() {
var $table=$(this);// $table 此变量不能为全局变量，否则在多个表格存在时会有错，通过传递给expand实现共用
/*第一步：根据data初始化table的内容
1.对于json格式的data数据，提供函数给用户自己实现json数据中各字段应该给哪个td，由用户实现
2.第一个td必须是维度，同时加入levelDeep属性供后续使用，这个不能改变
*/
$.each(opts.data,function(i,v){
return $table.append("<tr>"+"<td dim="+v.dim+" levelDeep=1>"+v.dimValue+"</td>"+opts.genTr(v)+"</tr>");
} );
/*第二步：对table进行树形结构处理
1.只显示第一层级节点（不存在parentDim属性），其它层维隐藏，不须通过层去控制
2.如果有子节点(parentDim为它)，增加‘+’图标
3.给'+'增加click事件 ，
3.1展开下级
a.判断下级，parentDim为dim值的td，则显示并设置缩进为父节点递增20px
b.对显示的节点进行处理，
3.2收起下级
隐藏子节点
*/
//１先计算好各层级深度的总长度
var deeps=opts.levelFormat.split("-"); //此数组存储每级层级的长度
var deepLens=new Array(deeps.length) //此数组存储第Ｎ级层级的总长度
for(var i=0;i<deeps.length;i++){
if(i==0){
deepLens[i]=parseInt(deeps[i]);
} else{
deepLens[i]=parseInt(deepLens[i-1])+parseInt(deeps[i]);
}
}
// 隐藏第二层级以上行
$(this).find("td[Dim]").filter(function(index){
//给每个td加上levelDeep值
for(var i=0;i<deepLens.length;i++){
if($(this).attr("dim").length==deepLens[i]){
$(this).attr("levelDeep",i+1) ;
}
}
//找出dim长度大于第一级长度的结点隐藏
return $(this).attr("dim").length>deepLens[0];
}) //此css属性用于标识td是否须初始化
.parent().css("display","none");
//2找出第一层node结点,增加“+”，即具有dim 并有子结点的parentDim等于它的dim
var $node=$(this).find("td[dim][levelDeep=1]")//.not($(this).find("td[parentDim]"))不须排除
.filter(function(index){
//找是否存在子结点,即parentDim为此dim的值,且level
var dim=$(this).attr("dim") ;
return $table.find("td[levelDeep=2][dim^="+dim+"]").size()>0;
} ).addClass("expand").prepend("<a></a>"); //给a增加展开和收起处理
$node.children("a")
.toggle(function(){expand($(this),opts.indentPx,$table);},
function(){collapse($(this),$table);}
); //
//3 找出第一层结点，设置缩进， 不须排除非叶子结点，非叶子结点的“a“有margin-left刚好与padding-left抵消
var $leaf=$(this).find("td[dim]");//.not($(this).find("td[parentDim]")).not($node);
var pIndent=$node.css("padding-left"); //单位为px,去掉px
pIndent=pIndent.substring(0,pIndent.length-2) ;
$leaf.css("padding-left",parseInt(pIndent)+parseInt(opts.indentPx));
}); // each end;
};
//收起函数
function collapse($a,$table){
// alert("collapse"+$a.html());
var $td=$a.parent();
var dim=$td.attr("dim");
//1.隐藏子节点
$table.find("td[dim^="+dim+"]").not($td).parent().css("display","none");
$td.removeClass("collapse").addClass("expand");
}
/*展开函数
传入参数：点击的a,opts.indentPx,
由于内部函数无法引用到opts，所以传入该参数*/
function expand($a,indentPx,$table){
// alert("expand"+$a.html());
var $td=$a.parent();
var nextlevel=$td.attr("levelDeep")+1;
var dim=$td.attr("dim");
//1.显示子节点
var $allNode= $table.find("td[levelDeep="+nextlevel+"][dim^="+dim+"]");
var paddinleft=$td.css("padding-left");
paddinleft=paddinleft.substring(0,paddinleft.length-2);
//2.子节点的padding-left为父结点的值加上缩进值
$allNode.css("padding-left",parseInt(paddinleft)+parseInt(indentPx)).parent().css("display","block");
//2.生成子节点结构
generateNode($allNode,indentPx,$table);
//3.展开图标切换
$td.removeClass("expand").addClass("collapse");
}
//nodes传入点击节点下的所有子节点，
function generateNode($allNode,indentPx,$table){
//1.找出nodes中的还有子节点的节点
var $node= $allNode.filter(function(index){
//找是否存在子结点,即parentDim为此dim的值,且levelDeep大于它
var dim=$(this).attr("dim") ;
var nextlevel=$(this).attr("levelDeep")+1;
return $table.find("td[levelDeep="+nextlevel+"][dim^="+dim+"]").size()>0;
} );
//如果存在节点，则生成展开结构
if($node.size()>0){
$node.find("a").remove();//如果存在a则先删除
$node.removeClass("collapse").addClass("expand").prepend("<a ></a>")
.children("a").toggle(function(){expand($(this),indentPx,$table);},
function(){collapse($(this),$table);}
);//给a增加展开和收起处理
}
//2.找出nodes中的叶子结点,但不须处理
// var $leaf= $allNode.not($node);
}//
// 插件的defaults
$.fn.dimtable.defaults = {
dim:"dim",
indentPx: "20",
genTr: function (rec){ }
};
// 闭包结束
})(jQuery); html使用该控件的引用格式：
<script>
$(document).ready(function(){
$("table").dimtable({
levelFormat:"2-2-2-2",
data: [ { dim:44,dimValue:"广东" ,gdp:124,cpi:125},
{ dim:4403,dimValue:"深圳" ,gdp:124,cpi:125},
{ dim:440303,dimValue:"深圳罗湖" ,gdp:124,cpi:125},
{ dim:440304,dimValue:"深圳福田" ,gdp:124,cpi:125},
{ dim:44030401,dimValue:"深圳福田梅林" ,gdp:124,cpi:125},
{ dim:44030402,dimValue:"深圳福田莲花" ,gdp:124,cpi:125},
{ dim:4405,dimValue:"汕头" ,gdp:124,cpi:125},
{ dim:440501,dimValue:"汕头潮阳" ,gdp:124,cpi:125},
{ dim:440502,dimValue:"汕头潮南" ,gdp:124,cpi:125},
{ dim:43,dimValue:"北京" ,gdp:124,cpi:125} ,
{ dim:4301,dimValue:"北京朝阳" ,gdp:124,cpi:125},
{ dim:42,dimValue:"上海" ,gdp:124,cpi:125}
] ,
genTr:myGentTr
});
/*重载生成Tr的函数*/
function myGentTr(rec){
return "<td>"+rec.gdp+"</td>"+"<td>"+rec.cpi+"</td>";
}
});
</script><style>
/* TABLE
* ========================================================================= */
table {
border: 1px solid #888;
border-collapse: collapse;
line-height: 1;
margin: 1em auto;
width: 90%;
}
/* Caption
* ------------------------------------------------------------------------- */
table caption {
font-size: .9em;
font-weight: bold;
}
/* Header
* ------------------------------------------------------------------------- */
table thead {
background: #aaa url(../images/bg-table-thead.png) repeat-x top left;
font-size: .9em;
}
table thead tr th {
border: 1px solid #888;
font-weight: normal;
padding: .3em 1.67em .1em 1.67em;
text-align: left;
}
/* Body
* ------------------------------------------------------------------------- */
table tbody tr td { ;
border: 1px solid #888;
}
/***************************************/
td.dim{
padding-left:0px;
width:200px;
}
td.expand a{
display:block;
float:left;
width:15px;
height:15px;
vertical-align:middle;
background-image: url(plus.png) ;/*图片大小15*15 */
background-repeat:no-repeat;
margin-left: -10px;/* 对IE，这个值要改为-10px ? chrome浏览器是20*/
}
td.collapse a {
display:block;
float:left;
width:15px;
height:15px;
background-image: url(minus.png) ;/*图片大小15*15 */
background-repeat:no-repeat;
margin-left: -10px;
/* 这个属性很重要，td的左边距设定为20,但设置 a的左边距为-20刚好和它抵消，加上‘+’号长度为20,正好实现缩进*/
}
</style>
源码以后再上传！
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
