Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

autoHeader

一个用于生成多层复杂表头的jquery插件,可以进行表头和数据的动态生成,动态筛选以及一定的统计分析功能

欢迎使用autoHeader插件

打开index.html即可查看示例列表。

在线演示地址:http://finira.oschina.io/autoheader


autoHeader插件基于jquery开发,目前包含的功能有:

  1. 自动书写复杂多层表头以及表格数据
  2. 在界面中,基于表头进行数据的筛选
  3. 对合计值、平均值、最大值、最小值进行附加显示以及比对(比对不包括合计值)
  4. 对结果集进行排序
  5. 行序列号(支持正序、倒序)
  6. 与预设值进行比较以及统计展示

插件的特性包含:

  1. css无关性:使用者可使用自定义的任何css来定义生成的内容外观
  2. 前后端分离性:后端只需传送json格式数据(或者key:value格式的object对象)作为入参即可完成前端的一系列功能。
  3. 插件通用的易集成性:与zTree树插件,HighCharts报表插件,tablesorter,bootstrap均能进行很好的集成使用,你可以在demo中看到相应的例子。

###当前版本:V1.1


##浏览器支持 IE(9+)
Firefox(最新) Chrome(最新) Opera(最新)


##文件夹说明

  • src:包括插件用到的各种资源和插件本身
  • example:插件使用的具体例子,展示使用bootstrap。base:基础使用,extend:和其他插件的集成使用。

##使用方法 ###插件的引入 在页面中引入jquery文件以及本插件(jquery版本要求在1.6以上,1.6以下的版本无法支持prop属性)

<script src="../../src/js/jquery.autoHeader.all.js"></script>```

如果需要使用插件自带的css,请复制css目录下的style.css文件以及autoHimg图片文件夹到项目路径下,并且在页面中引入css文件:  
`<link rel="stylesheet" type="text/css" href="../../src/css/style.css">` 
 
(请分别更改为你项目中的实际地址)  
(插件提供了压缩版本,建议将jquery.autoHeader.all.js更换为jquery.autoHeader.min.js) 

---------------
###插件的使用

####1. 自动书写表头和数据功能  

####最简单的调用  
html:在你认定的位置,放置用于显示表头和数据的table  
`<table id="tabled" ></table>`  

js:在代码中,传入必要入参,执行init函数即可  

	   $.fn.autoHeader.init({
	   laynum:5,
	   startlay:1,
	   headJson:headstr,
	   dataJson:bodystr,
	   tableid:'tabled'});

*参数说明:*
>**laynum**:表头层数,插件默认为1,超过1层则需要自己设置  
>**startlay**:数据从哪层开始计入表头,默认为1  
>**headJson**:表头树的json数据(数据格式在下方说明)(key:value格式的object数据亦可,但是推荐使用json格式数据,之后不再进行说明)  
>**dataJson**:表格数据的json数据  
>**tableid**:放置表头和数据的表格id  

*headJson表头树数据结构说明:* **(首次使用必看)**


1. json数据中,必须包含层级、树形编号、是否叶子节点、表头节点名称、对应数据字段名这五个属性,可选属性有表头字段描述内容、字段css样式两个属性。
2. 这些属性对应的默认属性名为:层级(level)、树形编号(treeCode)、是否叶子节点(isleaf)、表头节点名称(name)、对应数据字段名(reportColumnName)以及表头字段描述内容(headDesc)、字段css样式(cssstyle)。
3. 属性名可根据实际情况更改,插件以入参形式提供了属性名更改的方式。具体操作方法可看**扩展调用**介绍说明。  
4. 表头树的书写顺序默认按照headJson的顺序正序书写。插件同时也提供了**排序功能**,按照表头树形编码从小到大进行排序,可按需开启,使用方法查阅**扩展调用**对应说明。

*表头样例数据解析说明:* **(首次使用必看)**  
一段表头样例数据:

    [{"cssstyle":"width:80px;height:50px;","headDesc":"表头描述","isleaf":"Y","level":"1","name":"表头名称","reportColumnName":"column1","treeCode":"1010"}]
其中:
>1. **level**:注明该表头节点的层级(从上至下),插件会综合startlay和level对表头数据进行筛选,比startlay数值小的数据不会写入到表头之中。
>2. **isleaf**:注明该节点是否为叶子节点,即直接与数据接触的节点,也就是最底层的表头。本属性值为‘Y’的数据将会被认定为是叶子节点。(在任何层级的节点均可成为叶子节点,插件会进行跨行展示)。
>3. **name**:表头节点名称,显示在表头单元格里的节点名称。
>4. **treeCode**:表头树形编码,该编码是插件的**核心解析**部分,插件根据编码进行上下级关系的解析。子表头的编码必须包含父表头的全部编码,每个表头的编码不可重复。例如中国编码为86,中国北京为8601,中国上海为8602,中国北京海淀区为860109,中国上海静安区为860203。以此类推,对编码大小和位数不做限制,符合树形编码规范即可。
>5. **reportColumnName**:对应数据json的属性名,与dataJson相关,叶子节点的表头需要书写该属性,其他则不需要。插件会根据属性名将数据和表头进行对应书写。
>6. **headDesc**:表头描述,选填字段,如果开启表头描述功能,则表头描述的内容会取此属性的值。
>7. **cssstyle**:表头自定义css样式,选填字段,**开启表头格式指定**并且该属性有值的话,表头的style属性会对应添加指定的css内容值。(某些特定的表头需要指定格式的情况之下考虑使用这个功能,普遍情况下推荐使用css文件)

*dataJson表格数据入参说明:* **(首次使用必看)**  
表格数据的属性名只需和表头树里的**reportColumnName**(该属性名可被更改)属性名对应即可。例表头树里的reportColumnName值为column1,表格数据json里需要有属性名为column1的值,表头对应列下才会有值。


####扩展调用

#####自定义表头树属性名  
插件提供了columConfig这个二级入参,用于自定义表头树的属性名。该入参包含的内容如下:  

    columConfig = {
    			'treecode': 'treeCode', 
    			'level': 'level',
    			'isleaf': 'isleaf',
    			'showname': 'name',
    			'desc': 'headDesc',
    			'datacolumn':'reportColumnName',
    			'thstyle': 'cssstyle'
    		}

如果表头数据里的属性名和默认的并不相同,那么便可以通过这个入参进行更改。例如层级属性名称为lvl,表头节点名称属性为viewname。那么,在调用init方法的时候传入**columConfig**入参即可进行修改:

    $.fn.autoHeader.init({
    laynum:5,
    startlay:1,
    headJson:headstr,
    dataJson:bodystr,
    tableid:'tabled',
    columConfig:{
    level:'lvl',
    showname:'viewname'
    }});
如需提高独立性,亦可将columConfig单独定义,之后进行传参(之后的代码举例说明将采取此方法,提高可阅读性):

    var columConf={
    level:'lvl',
    showname:'viewname'
    }
    $.fn.autoHeader.init({
    laynum:5,
    startlay:1,
    headJson:headstr,
    dataJson:bodystr,
    tableid:'tabled',
    columConfig:columConf
    });



其他属性名的修改也与此相同,不再赘述,需要注意的是,表头树json里的属性名需要和自定义的属性名对应上

#####表头树排序功能
插件默认按照headJson的顺序正序书写,从上至下,从左到右。插件也提供了按照树形编码的排序功能,每个层级单独排序,默认按照编码从小到大进行排列。**即编码最小的,排在最左边**。
  
如果需要启用这个功能,只需将一级入参**needsort**设置为true即可。

    $.fn.autoHeader.init({
    laynum:5,
    startlay:1,
    headJson:headstr,
    dataJson:bodystr,
    tableid:'tabled',
    needsort:true
    });
  
#####css自定义功能
css自定义功能有两种方法,一种是直接在css内容中定义插件所使用的table等容器的格式,例如直接指定#tabled这个元素的css与下属元素的css内容:

    #tabled {text-align:center;}
    #tabled caption{}
    #tabled th{padding:5px;text-align:center; word-break: normal;}
    #tabled td{padding:5px 50px 5px 50px;text-align:center;white-space:nowrap;}
另一种是使用插件的二级入参:**cssConfig**
下方为二级入参的具体定义以及参数含义

	   cssConfig = {
	   				'table': '', //表格的class属性
	   				'caption':'', //表格标题的class属性
	   				'tr': '', //表头tr的class属性
	   				'th': '',//表头th的class属性
	   				'datatr':'',//数据行tr的class属性
	   				'td': ''//数据行td的class属性
	   			}

指定参数并且在init方法中传参之后,插件将会把指定的class属性赋值给对应的表格元素。

    var cssconfig={
    table:'tablecss',
    tr:'trcss'
    }
    $.fn.autoHeader.init({
    laynum:5,
    startlay:1,
    headJson:headstr,
    dataJson:bodystr,
    tableid:'tabled',
    cssConfig:cssconfig
    });

#####表头格式指定功能
如果某些表头需要特定的style格式,那么就可以开启该功能,并且在对应的表头节点数据里将style格式添加到cssstyle属性里(该属性名可修改,详情参见**自定义表头树属性名**)。  
该功能的开启只需指定一级入参thstyle为true即可。

    $.fn.autoHeader.init({
    laynum:5,
    startlay:1,
    headJson:headstr,
    dataJson:bodystr,
    tableid:'tabled',
    thstyle:true
    });

#####表头描述功能 
该功能用于有表头描述需要的场景,该功能以二级入参descConfig进行开启和配置。  
下方为二级入参descConfig的定义、默认值以及参数含义

    descConfig = {
    				'enable':false,//开启状态:默认为关闭
    				'desc_type':'div',//显示方式:可选方式有div、title。div在div处显示,title则会在th内容外包一层span,span的title置为描述值。默认为div
    				'd_target_id':'',//描述信息展示的容器:默认为空,即插件自动生成描述div。如指定描述的容器id,会将信息放入描述容器中.
    				//插件默认的容器,为里外两个div,可重新指定里外div的css格式
    				'css_out': 'descdivdefault_out',//外侧div的css
    				'css_in': 'descdivdefault_in',//里侧div的css
    				'css_title': 'ttitle',//描述的标题css
    				'css_content': 'content',//描述的内容css
    				'css_close': 'close',//关闭按钮的css
    				'showevent':'click',//弹出描述的事件
    				'hideevent':'',//关闭描述的事件
    				'position':'fly',//div显示位置 有absolute和fly两种状态 absolute:div的位置是绝对值,以x和y作为起点。fly:div的位置以鼠标作为起点,x和y为偏移量
    				'pos_x':10,//x位置
    				'pos_y':10,//y位置
    				'desc_th_class':'' //包含描述的表头th的class,如果有值,表头内容包含描述时,class属性将会由这个值覆盖。仅显示方式为div时有效
    			}

插件自带了一个半透明的div描述框来进行描述信息的展示,最简单的调用方式如下:

    var descConfig={
    enable:true
    }
    $.fn.autoHeader.init({
    laynum:5,
    startlay:1,
    headJson:headstr,
    dataJson:bodystr,
    tableid:'tabled',
    descConfig:descConfig
    });
插件会使用默认的半透明的div描述框来进行信息展示,单击事件触发描述框的显示。  

如果需要使用title的方式来展示描述,那么只需这样定义descConfig:

    var descConfig={
    enable:true,
    desc_type:'title'
    }
> 具体调用方法不再赘述

如果需要将描述信息展示到自定义的容器中(div,span等均可),那么只需指定d_target_id即可:

    var descConfig={
    enable:true,
    d_target_id:'tagrgetid'
    }
> tagrgetid为容器的id属性

如果需要更改插件自带描述div的css属性,下列入参可供指定挑选(可单独指定):

    var descConfig={
    enable:true,
    css_out: 'your_out_css',//外侧div的css
    css_in: 'your_in_css',//里侧div的css
    css_title: 'your_title_css',//描述的标题css
    css_content: 'your_content_css',//描述的内容css
    css_close: 'your_close_css'//关闭按钮的css
    }

> 插件自带的描述div的css可以在demo里找到,是半透明效果的显示
> 
    .descdivdefault_out{ height: auto !important;height:300px;min-height:300px;padding:10px;position:absolute;display:none}
    .descdivdefault_in { background:	#d8f8c5;height:100%;overflow:auto;width:300px; position:absolute;color:#3b3b3b;border-radius: 5px; filter:alpha(Opacity=60);-moz-opacity:0.95;opacity: 0.95;position:absolute}
    .descdivdefault_in .close{float:right;cursor:pointer; color:#fff;margin:0px;}
    .descdivdefault_in .content{padding:10px;text-indent:2em; line-height:1.5; padding-bottom:1em;font-size:12px;}
    .descdivdefault_in .ttitle{height:30px;background:#6fce37;color:#fff;line-height:30px;padding:0 10px;font-size:14px;}

如果需要更改描述框出现和消失的事件,指定对应的showevent和hideevent参数即可(可单独指定):

    var descConfig={
    enable:true,
    showevent:'click',//弹出描述的事件
    hideevent:'mouseout'//关闭描述的事件
    }

> 事件均绑定在th元素中

如需更改描述框的显示方式和显示位置,那么可以使用下列入参:

    var descConfig={
    enable:true,
    position:'fly',//div显示位置 有absolute和fly两种状态 absolute:div的位置是绝对值,以x和y作为起点。fly:div的位置以鼠标作为起点,x和y为偏移量
    pos_x:10,//x位置
    pos_y:10//y位置
    }

如果需要将有描述的表头元素和没有描述的表头元素区分开来,那么可以使用desc_th_class参数,该参数指定之后,有描述的表头节点的class将会被置为desc_th_class指定的内容:

    var descConfig={
    enable:true,
    desc_th_class:'got_desc'
    }
> 该功能仅显示方式为div时有效

#####debug性能测试模式 
该功能可用于测试插件的页面数据填充速度(页面填充速度与计算机配置以及浏览器性能有关),该功能有三个相关一级参数:

    'debug':false,//debug模式 会输出数据生成等信息值
    'outspanid':'',//debug输出模式下输出信息的元素 id 信息会书写到这个元素中。一般是span
    'datamulti':0,//测试书写性能的数据,如果开启了debug模式,数据包将会进行翻倍书写,倍数为此值

使用方法类似其他功能:

    $.fn.autoHeader.init({
    laynum:5,
    startlay:1,
    headJson:headstr,
    dataJson:bodystr,
    tableid:tabled,
    datamulti:30,
    debug:true,
    outspanid:'datev'
    });
> 开启debug模式,数据循环30倍书写,并且最后将耗时信息输出到id为datev的元素下。  


--------------------
####2. 基于表头的数据筛选功能  
严格来说,这并不能算是插件的自带功能,因为它的调用接口和生成的接口一样,都是init方法,你只需要重新传入一段过滤之后的headJson即可实现类似页面查询过滤的功能,dataJson的过滤也是同理。可以在demo中看到具体实现方法。

    $.fn.autoHeader.init({
    laynum:5,
    startlay:1,
    headJson:newheadstr,
    dataJson:newbodystr,
    tableid:tabled
    });

> 为什么将这个功能独立起来,因为基于表头的类似excel的勾选功能在插件的设计内容中,该功能可提高用户的感知度和使用流畅感,遗憾的是该功能目前仍处于建设阶段。

--------------------
####3. 统计以及比对功能  
目前包括合计值、平均值、最大值、最小值的显示以及平均值、最大值、最小值与数据行的比对。  
该功能使用anaLyz方法进行调用,调用方式如下:

    $.fn.autoHeader.anaLyz({
    baseJson:bodyjson,
    anatype:'avg',
    tableid:'tabled',
    digit:2});

具有两个二级参数,一个一级参数,可在参数说明中具体查看。

> 统计分析功能针对不同类型的通用性很高,入参具体通用配置将会放在类型之后进行说明。

####合计值
#####合计值统计
调用anaLyz方法,注明anatype值为all即可。

    $.fn.autoHeader.anaLyz({
    baseJson:bodyjson,
    anatype:'all',
    tableid:'tabled',
    digit:2});
> 合计值没有比对功能

####平均值
#####平均值统计
调用anaLyz方法,注明anatype值为avg:

    $.fn.autoHeader.anaLyz({
    baseJson:bodyjson,
    anatype:'avg',
    tableid:'tabled',
    digit:2});

#####平均值比对 
可将页面上数据与平均值进行比较,比平均值大的会使用向上箭头,小的则是向下箭头。箭头css可以自定义。

    var compare={
    'enable':true,//比对开关,默认为关闭
    'followelmt':'span',//跟在td数据后方的标签,默认为span
    'elmthtml':'',//跟在td数据后方的标签的html
    'upclass':'moreThanSpan',//比比对数值大的css
    'lowclass':'lessThanSpan',//比比对数值小的css
    'eqclass':'equalToSpan'//于比对数值相同的css
    }
    
    $.fn.autoHeader.anaLyz({
	anaJson:anajson
    baseJson:basejson,
    anatype:'avg',
    tableid:'tabled',
    digit:2,
    compare:compare
    });
> 如果不需要自定义在后方的标签css,compare的入参只需需定义enable为true即可。  
> 如果不配置baseJson,则默认以anaJson为基准进行比较。有两个json参数的应用场景是比对数据与基准数据有区别的情况:例页面上筛选只剩两条数据,而平均值比对则需要与之前加载来的十条数据的平均值进行比对。  
> 其他比对功能入参情况与此相同,不再赘述。

####最大值
#####最大值统计  
调用anaLyz方法,注明anatype值为max:

    $.fn.autoHeader.anaLyz({
    baseJson:bodyjson,
    anatype:'max',
    tableid:'tabled',
    digit:2});

#####最大值比对 
可将页面上数据与最大值进行比较,与最大值持平的使用右向箭头。箭头css可以自定义。


    var compare={
    'enable':true//比对开关,默认为关闭
    }
    
    $.fn.autoHeader.anaLyz({
	anaJson:anajson
    baseJson:basejson,
    anatype:'max',
    tableid:'tabled',
    digit:2,
    compare:compare
    });

####最小值
#####最小值统计
调用anaLyz方法,注明anatype值为min:

    $.fn.autoHeader.anaLyz({
    baseJson:bodyjson,
    anatype:'min',
    tableid:'tabled',
    digit:2});

#####最小值比对   
可将页面上数据与最小值进行比较,与最小值持平的使用右向箭头。箭头css可以自定义。


    var compare={
    'enable':true//比对开关,默认为关闭
    }
    
    $.fn.autoHeader.anaLyz({
	anaJson:anajson
    baseJson:basejson,
    anatype:'min',
    tableid:'tabled',
    digit:2,
    compare:compare
    });


--------------------
####4. 排序功能  
排序功能集成了`tablesorter`插件,只需在表格初始化时在对应的配置中进行设置即可。

	$.fn.autoHeader.init({
	        laynum:5,
	        headJson:headstr,
	        dataJson:bodystr,
	        tableid:'tabled',
	        needsort:true,
	        columConfig:{
	            level:'lvl',
	            showname:'viewname'
	        },
	        cssConfig:{
	            table:' table-hover  table-striped table-bordered table-responsive',
	            tr:''
	        },
	        sort:{
	            enable:true,
	            rank:1,
	            theme:"bootstrap",
	            debug:0,
	        }
	    });
其中,`sort`参数便是排序的设置参数,具体配置作用可查看最下方的参数说明。
> 排序插件在初始化时略消耗资源


--------------------
####5. 行序列号功能  
功能开启后,将会在对应列显示按照指定配置顺序进行排列的行序列号。
在使用init方法时,配置`serial`参数即可对行序列号功能进行配置。

	serial={
	'enable':true, //是否开启
	'type':'inverse', //序号排序方式 nochange排序后不变 inverse跟随排序方式进行上下倒转排序
	'inverseOrder':'asc',//如果排序方式是inverse,就需要指定倒转的排序类型,asc或者desc
	'order':'asc', //默认顺序 从大往小desc,或者从小往大asc
	'serialColumnName':'排名',//序列号列名
	'serialColumnIndex':0  //序列号列位置
	}
序列号在排序时可保持不变,或者跟随行数据而动。


--------------------
####6. 预设值比对功能  
该功能可以根据表头预设的比对公式,对数据进行比对计算,将计算后的结果以色块覆盖的形式进行展示,并且也可同时进行统计分析。
#####比对数值对象
目前比对的数值对象支持绝对数值(如100)和其他列(插件将会动态获取同一行中对应列的数值)
#####比对公式
比对公式目前支持基础运算符和数学表达式,一个公式的条件只能是一个表达式,一个表头可以有多个公式。
#####比对公式的默认配置
公式默认使用英文分号(;)作为分隔符,使用英文逗号(,)作为单个公式里条件和结果的分隔符,使用英文井号(#)作为字段指代标识符(该符号后的连续字符串会被认作为表头对应列名),使用{this}作为本体指代标识符,用于指代本表头列。
这些配置可以通过修改`transcp`参数下的`listDivide、conditionDivide、columnReference、selfReference`进行自定义。
#####比对公式示例
- 值小于100则为红色:`<100,red`
- 值小于col列则为红色:`<#col,red`
- 值超过col列的一半则为红色:`>#col*0.5,red`
- 值介于90和100之间则为红色:`90<{this}<100,red`
- 值介于90和100之间则为红色,小于90为黄色:`90<{this}<100,red;<90,yellow`
#####比对的使用
使用`transCompare`方法即可开启:

	$.fn.autoHeader.transCompare({anaJson:currentJson,baseJson:bodyjson,tableid:'tabled'});
必须指定的参数为:
- `anaJson` 进行比对的数据
- `baseJson`被比对的基础数据,如果为空,则默认等于`anaJson`
- `tableid`比对后数据的输出表格id
#####比对的描述配置
修改`transcp`参数下的`titleConfig`和`clzConfig`可以进行比对统计标题和对应css的配置:

	'titleConfig':{'red':'不合格','yellow':'警告'}, //比对统计标题的配置,将会根据此配置显示统计的标题,如果没有设置,将会默认使用表头配置里的字符作为标题(如red)
	'clzConfig':{'red':'lever2','yellow':'lever1'},  //比对css的配置,即不同的比对结果,td显示不同的css(背景色等设置)
>插件设置的默认值为不合格和警告,如需自定义,只需修改参数即可。

#####比对的统计
该功能可以根据行维度统计每行数据符合比对公式的总计数量,如第一行数据总共有多少不合格,多少警告。
如果开启数据明细筛选,将会根据触发机制,在总表的每个单元格绑定事件,进行有问题数据列的筛选。(如点击某结果的不合格项,明细表只显示该结果的不合格列和数据)
该功能通过配置`transCountCp`参数进行开启和配置(在使用`transCompare`方法时)。

	transCountCp ={
	'enable':true, //统计表格是否开启,默认为true
	'tgtTableId':'tabledcnt', //展示统计表格数据的容器id
	'table':' table-hover  table-striped table-bordered table-responsive',//表格的css
	'caption':'分析统计结果', //表格标题
	'captionstyle':'',//标题格式css
	'title':'类型/单位', //统计表格的标头,显示在表格左上角区域
	'rowcol':'rep_org_name', //数据行单位的标示字段名,标明该行数据归属的说明,将会横向成为统计表格的表头
	'switchenable':true,//统计表格数据关联明细表数据筛选功能是否开启。
	// 如果开启,将会根据触发机制,在总表的每个单元格绑定事件,进行有问题数据列的筛选。(如点击某结果的不合格项,明细表只显示该结果的不合格列和数据)
	'switchevent':'click'//触发事件,默认为单击
	}

####通用功能
#####表格的css配置  
插件提供了一个二级入参cssConfig,如果在调用init方法的时候指定了这个参数,那么在比对的时候也必须指定这个参数,值同init方法时的入参。
> 比对时会重写表格数据,所以如果定义过了cssConfig,这里就需要也传入一次。

#####比对标签css配置
插件亦提供了比对标签的css自定义功能,使用二级入参compare的相关参数即可进行修改。

	compare={
    'followelmt':'span',//跟在td数据后方的标签,默认为span
    'elmthtml':'',//跟在td数据后方的标签的html
    'upclass':'moreThanSpan',//比比对数值大的css
    'lowclass':'lessThanSpan',//比比对数值小的css
    'eqclass':'equalToSpan'//于比对数值相同的css
    }

> 比对之后的td默认内容为
> `<td>value<span class="moreThanSpan"></span></td>`

#####返回类型配置 
以一级参数returntype指定,默认为this,即返回插件本身,可供链式调用。可选参数为list,这种情况下插件会根据anatype类型,返回对应的比对结果的一维数组。

#####小数保留位数配置  
以一级参数digit指定,默认为0,多用于平均值。

#####自定义抬头描述配置功能 
以descenable等相关参数指定:  

    'descenable':true,//抬头描述开关,默认开启
    'descstr':'',//生成的比对数据的抬头,例合计值 平均值 最大值 等,可自定义输入
    'desccol':0 ,//数据的抬头对应的列位置,默认为0,即第一列

#####书写位置的配置
以writepos参数指定,默认为after,在所有数据之后添加。可选参数before,在所有数据之前添加。

#####统计值css自定义功能  
插件提供了统计值行的css自定义功能,应用场景:统计值行需要与数据行的格式有区别。配置下列参数即可:

	trclass:'',//生成的tr的class
	tdclass:'',//生成的td的class  


##参数说明
这段内容列举了插件的可用参数定义以及默认值


----------


###书写部分

	//列配置参数
	colConfig = {
		'treecode': 'treeCode', //表头树形编码
		'level': 'level',//表头节点的层级
		'isleaf': 'isleaf',//是否为叶子节点
		'showname': 'name',//表头节点名称
		'desc': 'headDesc',//表头描述
		'datacolumn':'reportColumnName',//对应数据json的属性名
		'thstyle': 'cssstyle'//表头自定义css样式
	}

	//表头描述配置
	descConfig = {
		'enable':false,//开启状态:默认为关闭
		'desc_type':'div',//显示方式:可选方式有div、title。div在div处显示,title则会在th内容外包一层span,span的title置为描述值。
		'd_target_id':'',//描述信息展示的容器:默认为空,即插件自动生成描述div。如指定描述的容器id,会将信息放入描述容器中.
		//插件默认的容器,为里外两个div,可重新指定里外div的css格式
		'css_out': 'descdivdefault_out',//外侧div的css
		'css_in': 'descdivdefault_in',//里侧div的css
		'css_title': 'ttitle',//描述的标题css
		'css_content': 'content',//描述的内容css
		'css_close': 'close',//关闭按钮的css
		'showevent':'click',//弹出描述的事件
		'hideevent':'',//关闭描述的事件
		'position':'fly',//div显示位置 有absolute和fly两种状态 absolute:div的位置是绝对值,以x和y作为起点。fly:div的位置以鼠标作为起点,x和y为偏移量
		'pos_x':10,//x位置
		'pos_y':10,//y位置
		'desc_th_class':'' //包含描述的表头th的class,如果有值,表头内容包含描述时,class属性将会由这个值覆盖。仅显示方式为div时有效
	}

	//自定义格式配置
	cssConfig = {
		'table': '',
		'caption':'',
		'tr': '',
		'th': '',
		'datatr':'',
		'td': ''
	}
	//表格排序设置 使用tablesort插件 会影响加载速度,不需要的情况下关闭即可 add by v1.1
	//配置同tablesort插件的配置
	sort={
		'enable':false, //是否开启
		'headerTemplate' : '{content} {icon}',
		'rank':false, //当前实时排名是否开启
		'widgets' : [ "uitheme"], //外观主题
		'sortInitialOrder': 'desc',//初始排序顺序
		'rankdesc':'当前排名:' //排名描述
	},

	//行序列号功能 V1.1
	serial={
		'enable':true, //是否开启
		'type':'inverse', //序号排序方式 nochange排序后不变 inverse跟随排序方式进行上下倒转排序
		'inverseOrder':'asc',//如果排序方式是inverse,就需要指定倒转的排序类型,asc或者desc
		'order':'asc', //默认顺序 从大往小desc,或者从小往大asc
		'serialColumnName':'排名',//序列号列名
		'serialColumnIndex':0  //序列号列位置
	},

	//一级参数,默认配置
	defaults = {
		'laynum': 1, //层数 必填
		'startlay':1,//从哪层开始 默认为1 即lvl=1的数据开始
		'headJson': null,//表头数据 必填
		'dataJson': null,//内容数据 必填
		'caption':'',//表格名称
		'debug':false,//debug模式 会输出数据生成等信息值
		'outspanid':'',//debug输出模式下输出信息的span id 信息会书写到这个span下。
		'datamulti':0,//测试书写性能的数据,如果开启了debug模式,数据包将会进行翻倍书写,倍数为此值
		'tableid': 'tableid',//表格识别符
		'needsort':false,//是否需要排序,默认为false,排序的话会增加时间消耗
		'thstyle':false,//th表头的附带css是否需要激活,默认为false
		'descConfig': this.descConfig,//描述框配置
		'colConfig': this.columConfig, //列名配置,根据配置的列名读取json里的属性字段进行一一对应
		'cssConfig': this.cssConfig //css自定义配置,若不指定,则使用默认的配置
	}

###统计分析部分

	//css配置,进行值比对时所用,如果在init时候指定了cssConfig入参,此处的配置应当同init时的配置
    cssConfig = {
		'tr': '',
		'th': '',
		'datatr':'',
		'td': ''
		}
    
    //比对的配置
    compare={
		'enable':false,//比对开关,默认为关闭
		'followelmt':'span',//跟在td数据后方的标签,默认为span
		'elmthtml':'',//跟在td数据后方的标签的html
		'upclass':'moreThanSpan',//比比对数值大的css
		'lowclass':'lessThanSpan',//比比对数值小的css
		'eqclass':'equalToSpan'//于比对数值相同的css
		}
    
    //默认配置
    default = {
		'anaJson':null,//需要进行比较分析的内容数据
		'baseJson': null,//进行比较分析的基准数据,如果为空,则默认等于anaJson,如果有指定,则按指定值来。(用于在进行比价分析时,内容数据不等于基准数据的场景,如内容只显示两条数据,但是需要比对所有十条数据的平均值)
		'tableid': 'tableid',//表格id 同init方法时的表格id
		'anatype':'', //分析类型 ,平均值avg 最大值max 最小值min 合计值all 等
		'returntype':'this',//返回类型,可返回list:数据比对的结果list,默认为返回this字符,在插件入口处进行判断,是否返回插件自身
		'digit':0 ,//小数保留位数,默认为0
		'descenable':true,//抬头描述开关,默认开启
		'descstr':'',//生成的比对数据的抬头,例如 合计值 平均值 最大值 等,可以被用户自定义
		'desccol':0 ,//数据的抬头对应的列位置,默认为0,即第一列
		'writetotable':true,//是否需要写到表格中去,默认开启
		'writepos':'after', //写到表格中对于table tbody的位置,默认为after,可选参数before,为所有数据之前
		'trclass':'',//生成的tr的class
		'tdclass':'',//生成的td的class
		'compare':this.compare, //比对的配置
		'cssConfig':this.cssConfig //css配置
		}
	//预设值比对的配置,V1.1版本新增
	transcp={
		'titleConfig':{'red':'不合格','yellow':'警告'}, //比对统计标题的配置,将会根据此配置显示统计的标题,如果没有设置,将会默认使用表头配置里的字符作为标题(如red)
		'clzConfig':{'red':'lever2','yellow':'lever1'},  //比对css的配置,即不同的比对结果,td显示不同的css(背景色等设置)
		'listDivide':';', //比对条件的列表分隔符,插件会按照该分隔符将比对字符串分割成几个不同的结果列表,类似 大于10,红色;小于10,黄色
		'conditionDivide':',', //单条比对数据的条件和结果分隔符,前方为条件,后方为结果 ,类似 大于10,红色
		'columnReference':'#', //字段指代标识符,该符号标识的内容,将会通过通过之后跟随的字段名去获取对应数值进行比对
		'selfReference':'{this}', //本体指代标识符,不可与其他字段名重复,将会使用本体值替换该内容进行比较 目前支持a>this>b a<this<b格式
		'count':true, //是否开启总数统计,默认为false
		'd_target_id':'',//描述信息展示的容器:默认为空,即插件自动生成描述div。如指定描述的容器id,会将信息放入描述容器中.
		'css_out': 'descdivdefault_out',//外侧div的css
		'css_in': 'descdivdefault_in',//里侧div的css
		'css_title': 'ttitle',//描述的标题css
		'css_content': 'content',//描述的内容css
		'css_close': 'close',//关闭按钮的css
		'showevent':'click',//弹出描述的事件
		'hideevent':'',//关闭描述的事件
		'position':'fly',//div显示位置 有absolute和fly两种状态 absolute:div的位置是绝对值,以x和y作为起点。fly:div的位置以鼠标作为起点,x和y为偏移量
		'pos_x':-100,//x位置
		'pos_y':0,//y位置

	},
	//预设值比对的统计表格设置,V1.1版本新增
	transCountCp ={
		'enable':true, //统计表格是否开启,默认为true
		'tgtTableId':'tabledcnt', //展示统计表格数据的容器id
		'table':' table-hover  table-striped table-bordered table-responsive',//表格css
		'caption':'分析统计结果', //表格标题
		'captionstyle':'',//标题格式css
		'title':'类型/单位', //统计表格的标头,显示在表格左上角区域
		'rowcol':'rep_org_name', //数据行单位的标示字段名,标明该行数据归属的说明,将会横向成为统计表格的表头
		'switchenable':true,//统计表格数据关联明细表数据筛选功能是否开启。
		// 如果开启,将会根据触发机制,在总表的每个单元格绑定事件,进行有问题数据列的筛选。(如点击某数据的警告项,明细表只显示该单位的警告列和数据)
		'switchevent':'click'//数据筛选触发事件,默认为单击

	},

##License
与jquery相同 - MIT

##更新日志

###V1.1

- 排序功能
- 行序列号功能
- 预设值比对分析

   *2016-5-1*
###V1.0

- 表格生成功能
- 表头动态筛选
- 基础统计分析

	*2016-2-26*

##展望功能

- 根据复杂表头生成输入框功能
- 过长表头的折叠功能

Comments ( 1 )

Sign in for post a comment

About

一个用于生成多层复杂表头的jquery插件,可以进行表头和数据的动态生成,动态筛选以及一定的统计分析功能。--Generate table with complex and multi meter header,with some analytical approach spread retract
JavaScript
MIT
Cancel

Releases

No release

Contributors

All

Activities

load more
can not load any more