简单的table收缩（二）laytpl.js+Jquery+原生Js实现
符国安
1、准备所需的js
1.1数据js
datas={
"code": 1000,
"data": {
"total": {
"fund": [
{
"name": "小李",
"flag": 0,
"sex": "nv",
"sg": "170",
"tz": 120
},
{
"ck": "语文",
"flag": 1,
"sex": "nv",
"sg": "170",
"tz": 120,
"fs": 60
},
{
"ck": "数学",
"flag": 1,
"sex": "nv",
"sg": "170",
"tz": 120,
"fs": 90
}
{
"name": "小网",
"flag": 0,
"sex": "nv",
"sg": "170",
"tz": 120
},
{
"ck": "数学",
"flag": 1,
"sex": "nv",
"sg": "170",
"tz": 120,
"fs": 95
},
{
"name": "小红",
"flag": 0,
"sex": "nv",
"sg": "170",
"tz": 120,
},
{
"ck": "数学",
"flag": 1,
"sex": "nv",
"sg": "170",
"tz": 120,
"fs": 65
}
{
"fs": 300,
"name": "合计"
}
]
},
},
"empty": false,
"message": "success",
"success": true
}1.2公共js
var test = 0;
var gp_hj = [];//股票
var jj_hj = [];//基金
var zq_hj = [];//债券
localStorage.setItem('gp_hj', JSON.stringify(gp_hj));
localStorage.setItem('jj_hj', JSON.stringify(jj_hj));
localStorage.setItem('zq_hj', JSON.stringify(zq_hj));
var test_row2 = 0;
var myTest = function(count,flag){
if(count == -1){
return test;
}
if(flag== "gp"){
var gp_hj_arr = localStorage.getItem('gp_hj');
if(gp_hj_arr == null){
localStorage.setItem('gp_hj', JSON.stringify(gp_hj));
}else{
var jsarr = JSON.parse(gp_hj_arr);
jsarr.push(count);
localStorage.setItem('gp_hj', JSON.stringify(jsarr));
}
}
if(flag== "jj"){
var jj_hj_arr = localStorage.getItem('jj_hj');
if(jj_hj_arr == null){
localStorage.setItem('jj_hj', JSON.stringify(jj_hj));
}else{
var jsarr = JSON.parse(jj_hj_arr);
jsarr.push(count);
localStorage.setItem('jj_hj', JSON.stringify(jsarr));
}
}
if(flag== "zq"){
var zq_hj_arr = localStorage.getItem('zq_hj');
if(zq_hj_arr == null){
localStorage.setItem('zq_hj', JSON.stringify(zq_hj));
}else{
var jsarr = JSON.parse(zq_hj_arr);
jsarr.push(count);
localStorage.setItem('zq_hj', JSON.stringify(jsarr));
}
}
test = count;
return test;
};
var myTestRow2 = function(count){
if(count == -1){
return test_row2;
}
test_row2 = count;
return test_row2;
};
var objectIsNotEmpty = function(objectValue) {
if (objectValue === "" || objectValue === undefined || objectValue === null || objectValue.length === 0) {
return false;
}
return true;
};
var initValue = function(objectValue) {
if(!objectIsNotEmpty(objectValue))
return "";
if (typeof(objectValue) == 'undefined' || objectValue === null) {
return "";
}
return objectValue;
};
var initStrValue = function(objectValue) {
if(!objectIsNotEmpty(objectValue))
return "-";
if (typeof(objectValue) == 'undefined' || objectValue === null) {
return "-";
}
return objectValue;
};
/**
* 初始化数据，如果为空返回0
* @param objectValue
* @returns {*}
*/
var initIntValue = function(objectValue) {
if (typeof(objectValue)=='undefined'||objectValue === null || objectValue === undefined) {
return 0;
}
return objectValue;
};
var iniRateValue = function(objectValue) {
if (typeof(objectValue) == 'undefined' || objectValue === null || objectValue === "") {
return "";
}
if (objectValue == '0.0000' || objectValue === 0.0000 ) {
return 0;
}
return objectValue + "%";
};
//数字千位符号
var toThousands = function(numval) {
if(initValue(numval)=="" || !objectIsNotEmpty(numval))
return "";
var strnumval = (numval || 0).toString();
var strnumvalold = strnumval;
if (strnumvalold.indexOf("-") != -1) {
strnumval = strnumval.split("-")[1];
}
var num = strnumval.split(".")[0];
var endNum = "";
if (strnumval.split(".").length > 1) {
endNum = "." + strnumval.split(".")[1];
}
var result = '',
counter = 0;
// num = (num || 0).toString();
for (var i = num.length - 1; i >= 0; i--) {
counter++;
result = num.charAt(i) + result;
if (!(counter % 3) && i != 0) {
result = ',' + result;
}
}
if (strnumvalold.indexOf("-") != -1) {
return '-' + result + endNum;
}
return result + endNum;
}
//数字保留n位小数，number: 数字，n 保留位数
var getFloat = function(number, n) {
if(number === 'undefined' || number === null || number === ""){
return "";
}
n = n ? parseInt(n) : 0;
if (n <= 0) {
return Math.round(number);
}
number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n); //四舍五入
number = Number(number).toFixed(n); //补足位数
return number;
};
//数字除以一万
var numcw = function(number) {
if(number === 'undefined' || number === null || number === ""){
return "";
}
return number/10000;
};
//初始化图表
var initEcharts = function(divId,option){
// 清除DIV内容
var curTheme = "shine";
// 初始化显示图表信息
if(option){
show(divId)
hide(divId+"n")
var tempEcharts = echarts.init(document.getElementById(divId),curTheme);
tempEcharts.setOption(option,true);
}
else{
show(divId+"n")
hide(divId)
}
};
var ajaxOutime=60000;
var getToken = function(){
var myToken = localStorage.getItem('$user_token');
if(objectIsNotEmpty(myToken)){
return myToken;
}
return "";
}
var isLogin = function(){
return objectIsNotEmpty(getToken());
}
var getNowDate = function(){
var now_date = localStorage.getItem('$now_date');
if(objectIsNotEmpty(now_date)){
return now_date;
}
return "";
}
var show = function(divId)
{
document.getElementById(divId).style.display = "block";
}
var hide = function(divId)
{
document.getElementById(divId).style.display = "none";
}
var common = {
};
common.getIndex = function(array, item) {
for (var i = 0; i < array.length; i++) {
if (array[i] == item) return i;
}
}
common.getCtrlKey = function(n) {
var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
];
var key = "";
for (var i = 0; i < n; i++) {
var id = Math.ceil(Math.random() * 35);
key += chars[id];
}
var timestamp = new Date().getTime().toString() + key;
return timestamp;
}
common.inArray = function(arrarObj, element) {
for (var i = 0; i < arrarObj.length; i++) {
if (arrarObj[i] == element) return true;
}
return false;
}
common.getState = function() {
var stateText = localStorage.getItem('$state') || "{}";
return JSON.parse(stateText);
}
1.3 laytpl.js
/*! laytpl-v1.2.0 JavaScript模板引擎 MIT License By http://www.layui.com/doc/modules/laytpl.html */
;!function(){"use strict";var e={open:"{{",close:"}}"},r={exp:function(e){return new RegExp(e,"g")},query:function(r,t,c){var o=["#([\\s\\S])+?","([^{#}])*?"][r||0];return n((t||"")+e.open+o+e.close+(c||""))},escape:function(e){return String(e||"").replace(/&(?!#?[a-zA-Z0-9]+;)/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/'/g,"'").replace(/"/g,""")},error:function(e,r){var n="Laytpl Error：";return"object"==typeof console&&console.error(n+e+"\n"+(r||"")),n+e}},n=r.exp,t=function(e){this.tpl=e};t.pt=t.prototype,window.errors=0,t.pt.parse=function(t,c){var o=this,p=t,a=n("^"+e.open+"#",""),l=n(e.close+"$","");t=t.replace(/\s+|\r|\t|\n/g," ").replace(n(e.open+"#"),e.open+"# ").replace(n(e.close+"}"),"} "+e.close).replace(/\\/g,"\\\\").replace(/(?="|')/g,"\\").replace(r.query(),function(e){return e=e.replace(a,"").replace(l,""),'";'+e.replace(/\\/g,"")+';view+="'}).replace(r.query(1),function(r){var t='"+(';return r.replace(/\s/g,"")===e.open+e.close?"":(r=r.replace(n(e.open+"|"+e.close),""),/^=/.test(r)&&(r=r.replace(/^=/,""),t='"+_escape_('),t+r.replace(/\\/g,"")+')+"')}),t='"use strict";var view = "'+t+'";return view;';try{return o.cache=t=new Function("d, _escape_",t),t(c,r.escape)}catch(u){return delete o.cache,r.error(u,p)}},t.pt.render=function(e,n){var t,c=this;return e?(t=c.cache?c.cache(e,r.escape):c.parse(c.tpl,e),console.log(),n?void n(t):t):r.error("no data")};var c=function(e){return"string"!=typeof e?r.error("Template not found"):new t(e)};c.config=function(r){r=r||{};for(var n in r)e[n]=r[n]},c.v="1.2","function"==typeof define?define(function(){return c}):"undefined"!=typeof exports?module.exports=c:window.laytpl=c}();2、页面加实现
<script id="tmp_mb_cc_jj" type="text/html">
<table class="table table-hover">
<thead>
<tr class="info td_V_algin_middle">
<td>行业</td>
<td align="right">姓名<br /></td>
<td align="right">性别</td>
<td align="right">身高</td>
<td align="right">体重<br />(万)</td>
<td align="right">课程</td> -->
<td align="right">成绩</td>
</tr>
</thead>
<tbody>
{{# for(var i = d.length-1, len = d.length; i < len; i++){ }}
<tr style="background-color: #F4F4F4;" class="fbd ccmx_hj" id="ccmx_jj_hj" dataid="2">
<td>
{{# if(d[i].flag == "1"){ }}
{{#}}}
<span id="ccmx_hj_jj_span">+</span>
<span>{{initValue(d[i].name)}}</span>
</td>
<td align="right">{{initValue(d[i].sex}}</td>
<td align="right">{{initValue(d[i].sg}}</td>
<td align="right">{{initValue(d[i].tg}}</td>
<td align="right">{{initValue(d[i].kc}}</td>
<td align="right">{{initValue(d[i].fs}}</td>
</td>
</tr>
{{# } }}
{{# for(var i = 0, len = d.length; i < len-1; i++){ }}
{{# if(d[i].flag == "0"){ }}
<tr class='fbd parent' id="jj_row_{{myTest(i,'jj')}}" dataid="2">
<td>
<span id="button_jj_row_{{myTest(i)}}">+</span>
<span>{{initValue(d[i].name)}} </span>
</td>
{{#}}}
{{# if(d[i].flag == "1"){ }}
<tr class='child_jj_row_{{myTest(-1)}}' style="display: none;">
<td>
<span>{{initValue(d[i].name)}} </span>
</td>
{{#}}}
<td align="right">{{initValue(d[i].sex}}</td>
<td align="right">{{initValue(d[i].sg}}</td>
<td align="right">{{initValue(d[i].tg}}</td>
<td align="right">{{initValue(d[i].kc}}</td>
<td align="right">{{initValue(d[i].fs}}</td>
</tr>
{{# } }}
</tbody>
</table>
</script>
<script type="text/javascript">
$("#ccmx_button").click(function(){
var myId = document.getElementById('ccmx_button');
var dataid = myId.getAttribute('dataid');
if(dataid == "1"){
myId.setAttribute('dataid',"2");
$('#ccmx_div').hide();
}
if(dataid == "2"){
myId.setAttribute('dataid',"1");
$('#ccmx_div').show();
}
});
var fund = datas.data.total.fund;//基金
if(fund){
laytpl(document.getElementById('tmp_mb_cc_jj').innerHTML).render(fund, function(html) {
document.getElementById('warp_cc_jj').innerHTML = html;
});
}
$('.parent').on("click",function(){
var dataid = this.getAttribute("dataid");
var id = this.getAttribute("id");
var MyParent = document.getElementById(id);
//var list=mui('.child_'+id)
var list= document.getElementsByClassName('child_'+id);
//var list2=$('.child_'+id);
if(dataid=='1'){
for(var i=0;i<list.length;i++)
{
list[i].style.display="none";
}
MyParent.setAttribute("dataid","2");
document.getElementById('button_'+id).innerHTML = "+";
}else if(dataid=='2'){
for(var i=0;i<list.length;i++)
{
list[i].style.display="";
}
MyParent.setAttribute("dataid","1");
document.getElementById('button_'+id).innerHTML = "-";
}
//如果一级全部点击,,同步合计和一级的符号
var arr = null;
var hj_id = null;
if(id.indexOf("gp")>-1){
var gp_hj_arr = localStorage.getItem('gp_hj');
if(gp_hj_arr == null){
return;
}
arr=JSON.parse(gp_hj_arr);
hj_id = 'ccmx_gp_hj';
}
if(id.indexOf("jj")>-1){
var jj_hj_arr = localStorage.getItem('jj_hj');
if(jj_hj_arr == null){
return;
}
arr=JSON.parse(jj_hj_arr);
hj_id = 'ccmx_jj_hj';
}
if(id.indexOf("zq")>-1){
var zq_hj_arr = localStorage.getItem('zq_hj');
if(zq_hj_arr == null){
return;
}
arr=JSON.parse(zq_hj_arr);
hj_id = 'ccmx_zq_hj';
}
var len = arr.length;
var count = 0;
for(var i=0;i<arr.length;i++){
var type="ccmx_gp_hj";
var heji_dataId = heji_dataId = document.getElementById(hj_id).getAttribute("dataid");
if(id.indexOf("gp")>-1){
type = "gp_row_"+arr[i];
}
if(id.indexOf("jj")>-1){
type = "jj_row_"+arr[i];
}
if(id.indexOf("zq")>-1){
type = "zq_row_"+arr[i];
}
var childDataId = document.getElementById(type).getAttribute("dataid");
if(childDataId != heji_dataId){
count++;
}
}
if(count == len){
document.getElementById(hj_id).setAttribute("dataid","2");
if(hj_id=="ccmx_gp_hj"){
document.getElementById('ccmx_hj_gp_span').innerHTML = "+";
}
if(hj_id=="ccmx_jj_hj"){
document.getElementById('ccmx_hj_jj_span').innerHTML = "+";
}
if(hj_id=="ccmx_zq_hj"){
document.getElementById('ccmx_hj_zq_span').innerHTML = "+";
}
}
});
//合计调用
function ccmx_hj_function(id){
var MyParent = document.getElementById(id);
var list= document.getElementsByClassName('child_'+id);
var dataid = MyParent.getAttribute("dataid");
if(dataid=='1')
{
for(var i=0;i<list.length;i++)
{
list[i].style.display="none";
var myChildId = list[i].getAttribute("id");
if(objectIsNotEmpty(myChildId)){
list[i].setAttribute("dataid","2");
document.getElementById('button_'+myChildId).innerHTML = "+";
}
}
MyParent.setAttribute("dataid","2");
document.getElementById('button_'+id).innerHTML = "+";
}else if(dataid=='2'){
for(var i=0;i<list.length;i++)
{
list[i].style.display="";
var myChildId = list[i].getAttribute("id");
if(objectIsNotEmpty(myChildId)){
list[i].setAttribute("dataid","1");
document.getElementById('button_'+myChildId).innerHTML = "-";
}
}
MyParent.setAttribute("dataid","1");
document.getElementById('button_'+id).innerHTML = "-";
}
}
//合计事件
$('.ccmx_hj').on("click",function(){
debugger;
var id = this.getAttribute("id");
initCcmxHj(id);
});
function initCcmxHj(id){
var MyId = document.getElementById(id);
//var id = MyId.getAttribute("id");
var dataid = MyId.getAttribute("dataid");
if(dataid=='1'){
MyId.setAttribute("dataid","2");
if(id=="ccmx_gp_hj"){
document.getElementById('ccmx_hj_gp_span').innerHTML = "+";
}
if(id=="ccmx_jj_hj"){
document.getElementById('ccmx_hj_jj_span').innerHTML = "+";
}
if(id=="ccmx_zq_hj"){
document.getElementById('ccmx_hj_zq_span').innerHTML = "+";
}
}else if(dataid=='2'){
MyId.setAttribute("dataid","1");
if(id=="ccmx_gp_hj"){
document.getElementById('ccmx_hj_gp_span').innerHTML = "-";
}
if(id=="ccmx_jj_hj"){
document.getElementById('ccmx_hj_jj_span').innerHTML = "-";
}
if(id=="ccmx_zq_hj"){
document.getElementById('ccmx_hj_zq_span').innerHTML = "-";
}
}
var arr = null;
if(id=="ccmx_gp_hj"){
var gp_hj_arr = localStorage.getItem('gp_hj');
if(gp_hj_arr == null){
return;
}
arr=JSON.parse(gp_hj_arr);
}
if(id=="ccmx_jj_hj"){
var jj_hj_arr = localStorage.getItem('jj_hj');
if(jj_hj_arr == null){
return;
}
arr=JSON.parse(jj_hj_arr);
}
if(id=="ccmx_zq_hj"){
var zq_hj_arr = localStorage.getItem('zq_hj');
if(zq_hj_arr == null){
return;
}
arr=JSON.parse(zq_hj_arr);
}
for(var i = 0;i<arr.length;i++){
var type="ccmx_gp_hj";
if(id=="ccmx_gp_hj"){
type = "gp_row_"+arr[i];
}
if(id=="ccmx_jj_hj"){
type = "jj_row_"+arr[i];
}
if(id=="ccmx_zq_hj"){
type = "zq_row_"+arr[i];
}
ccmx_hj_function(type);
}
}
</script>
类似资料：