⼤量数据的树形结构渲染
树形结构的例⼦:
代码:
引⼊依赖包:
// jquery.event.drag-2.2.js 依赖jQuery 1.7 版本
<script type="text/javascript"src="js/jquery/jquery-1.7.min.js"></script>
<script type="text/javascript"src="/js/jqueryui/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript"src="js/slickGrid/jquery.event.drag-2.2.js"></script>
// - 需要什么功能，引⼊js模块
<script type="text/javascript"src="js/js"></script>
// 点击选中⾏的事件需要的三个js，不是tree必须的
<script type="text/javascript"src="js/llrangeselector.js"></script>
<script type="text/javascript"src="js/llselectionmodel.js"></script>
<script type="text/javascript"src="js/wselectionmodel.js"></script>
<script type="text/javascript"src="js/id.js"></script>
<script type="text/javascript"src="js/slickGrid/slick.dataview.js"></script>
// 放treeTable的盒⼦
<table id="treeTable"  ></table>
treeTable:function(data){
// 缩进和图标
var TaskNameFormatter=function(row, cell, value, columnDef, dataContext){
var spacer ="<span style='display:inline-block;height:1px;width:"+(15* dataContext["indent"])+"px'></span>";
var idx = IdxById(dataContext.id);
if(data[idx +1]&& data[idx +1].indent > data[idx].indent){
if(dataContext._collapsed){
return spacer +" <span class='toggle expand'></span> "+ value;
}else{
return spacer +" <span class='toggle collapse'></span> "+ value;
}
}else{
return spacer +" <span class='toggle'></span> "+ value;
}
};
/
/ 进度条格式化，这⾥可以直接引⽤slickGrid的pagination.我这⾥需要显⽰两个进度条，所以⾃⼰写了
var progressFormatter=function(row, cell, value, columnDef, dataContext){
if( Time ){
var detailHtml ='<div class="progress pos-rel progress-mini" >'+
'<div class="progress-bar" ></div>'+
' <div class="progress-bar progress-bar-warning" ></div>'+
' </div>';
}else{
var detailHtml =''
// ' <div class="progress pos-rel progress-mini "></div>'+
// ' </div>';
}
return detailHtml;
};
var grid;
var dataView;
data = data ||[];
var  columns =[
{field:'method',id:'method',width:300, name:'⽅法名', formatter: TaskNameFormatter},
{field:'argument',id:'argument',width:150, name:'参数'},
// {field: 'back',width:80, name: '返回参数'},
field:'execRate',
id:'execRate',
width:80,
name:'<i class="fa fa-question-circle execRate"</i>执⾏百分⽐(%)',                    formatter: progressFormatter,
toolTip:'进度条长度表⽰整个链路消耗的时间\n'+
'蓝⾊部分表⽰执⾏时间\n'+
'黄⾊部分表⽰self时间',
}
//  ....这⾥就意思意思好啦，写的是列信息
];
var options ={
rowHeight:40,
enableCellNavigation:true,
asyncEditorLoading:false,
// enableColumnReorder: false
};
// 数据过滤
function myFilter(item){
if(item.parent !=null){
var parent = _items[item.parent];
while(parent){
if(parent._collapsed){
return false;// 折叠，不显⽰
}
parent = _items[parent.parent];
}
}
return true;// 显⽰
};
// dataView
dataView =new Slick.Data.DataView({ inlineFilters:true});
dataView.beginUpdate();
dataView.setItems(data);
dataView.setFilter(myFilter);
// 特殊数据的⾏，样式特殊设置
// var row = Item(1);
grid =new Slick.Grid("#treeTable", dataView, columns, options);
grid.setSelectionModel(new Slick.RowSelectionModel());
operate.viewGrid = grid;
operate.dataView = dataView;
grid.init();
/
/ rowStyle(dataView);
if($(e.target).hasClass("toggle")){
var item = w);
if(item){
if(!item._collapsed){
item._collapsed =true;
}else{
item._collapsed =false;
}
dataView.updateItem(item.id, item);
}
e.stopImmediatePropagation();
}
// ⿏标移⼊事件，显⽰更多信息
var that = e.target;
if(that.offsetWidth < that.scrollWidth){
var text = that.innerText;
if(text.indexOf("<")>0){
text = place(/</,"<")
}
layer.tips(text, that,{
tips:[1,'#3595CC'],
// tips: [1, '#428bca'],
time:5000
// area: 'auto'
});
// operate.LayIndex=layer.open({ // ⽤layer.open 来模拟tips,⿏标不移开，弹框不会消失
//    type: 4,
//    tips: [1, '#3595CC'],
//    shade: false,
//    closeBtn:0,
/
/    content: [text, that] //数组第⼆项即吸附元素选择器或者DOM
// });
}
})
// 双击复制单元格内容
var txt = e.target.innerText;
Copy(txt);
})
// 复制函数
function Copy(str){
var save=function(e){
e.clipboardData.setData('text/plain', str);
e.preventDefault();
};
document.addEventListener('copy', save);
layer.msg('复制成功!')
}
// wire up model events to drive the grid
grid.updateRowCount();
});
grid.ws);
});
// 遍历特殊状态码⾏，加⾊
function metadata(old_metadata_provider){
return function(row){
var item =Item(row);
javascript进度条var ret  =(old_metadata_provider(row)||{});
if(item){
ret.cssClasses =(ret.cssClasses ||'');
if(item.hasException ||(hod==="de"&&(/^[0-9]+$/.test(item.argument)&& item.argument.length===3)&&(item.argu ment==="600"||/^[5,4]+/.test(item.argument)))){
ret.cssClasses +='danger';
}
return ret;
}
}
},
碎碎念：项⽬表格⼀直⽤的是boost rap-table来做的，需要做⼀个树形结构的表格，就⽤了轻量级的treeGrid，贼⽅便，直接在原来的boostrap-table⾥⾯加两⾏代码就⼤功告成了.
当然，后来为我这个偷懒付出了⼀定的代价哈.因为数据⽐较⼤,500多条的很正常,treeGrid的弊端就出现了，加载特别的慢.⼤概要5,6分钟，之后浏览器还可能被卡死.⽹上了不少，对于这样⼤两数据卡顿没有特别有效的⽅法.
涨姿势：在⽤某个插件或者框架的时间，除⾮很了解了，否则最好查⼀下这个东西的优缺点，和了解⼀下项⽬需求.减少返⼯
写的有点乱，不清除的地⽅，欢迎留⾔

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。