大量数据的树形结构渲染

最终用了slickGrid来做这个.pinpoint用的同款
官网地址:https://github.com/mleibman/SlickGrid/wiki/Examples
链接:[slickGrid gitHub地址]
(https://github.com/mleibman/SlickGrid/wiki/Examples)

树形结构的例子:树形结构的官方例子
代码:
引入依赖包:

// 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/slickGrid/slick.core.js">script>
// 点击选中行的事件需要的三个js,不是tree必须的
<script type="text/javascript" src="js/slickGrid/slick.cellrangeselector.js">script>
<script type="text/javascript" src="js/slickGrid/slick.cellselectionmodel.js">script>
<script type="text/javascript" src="js/slickGrid/slick.rowselectionmodel.js">script>

<script type="text/javascript" src="js/slickGrid/slick.grid.js">script>
<script type="text/javascript" src="js/slickGrid/slick.dataview.js">script>


// 放treeTable的盒子
   <table id="treeTable"  style="width:100%;height:550px;">table>

 treeTable:function(data){ 
  // 缩进和图标
            var TaskNameFormatter = function (row, cell, value, columnDef, dataContext) {
                var spacer = "";
                var idx = dataView.getIdxById(dataContext.id);
                if (data[idx + 1] && data[idx + 1].indent > data[idx].indent) {
                    if (dataContext._collapsed) {
                        return spacer + "  " + value;
                    } else {
                        return spacer + "  " + value;
                    }
                } else {
                    return spacer + "  " + value;
                }
            };
            // 进度条格式化,这里可以直接引用slickGrid的pagination.我这里需要显示两个进度条,所以自己写了
            var progressFormatter = function (row, cell, value, columnDef, dataContext) {

                if( dataContext.execTime ){
                    var detailHtml = '
'+
                        '
+dataContext.execRate.execTime+'%;">
'+
                        ' 
+dataContext.execRate.selfTime+'%;">
'+
                        ' 
';
                }else{
                    var detailHtml =''
                        // ' 
'+
                        // ' 

'; } 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: '执行百分比(%)', 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); // 特殊数据的行,样式特殊设置 dataView.getItemMetadata = metadata(dataView.getItemMetadata); dataView.endUpdate(); // var row = dataView.getItem(1); grid = new Slick.Grid("#treeTable", dataView, columns, options); grid.setSelectionModel(new Slick.RowSelectionModel()); operate.viewGrid = grid; operate.dataView = dataView; grid.init(); grid.render(); // rowStyle(dataView); grid.onClick.subscribe(function (e, args) { if ($(e.target).hasClass("toggle")) { var item = dataView.getItem(args.row); if (item) { if (!item._collapsed) { item._collapsed = true; } else { item._collapsed = false; } dataView.updateItem(item.id, item); } e.stopImmediatePropagation(); } }); // 鼠标移入 事件,显示更多信息 grid.onMouseEnter.subscribe(function(e,args){ var that = e.target; if(that.offsetWidth < that.scrollWidth){ var text = that.innerText; if(text.indexOf("<") > 0){ text = text.replace(/, "<") } 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 // }); } }) // 双击复制单元格内容 grid.onDblClick.subscribe(function(e,args){ 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); document.execCommand('copy'); document.removeEventListener('copy', save); layer.msg('复制成功!') } // wire up model events to drive the grid dataView.onRowCountChanged.subscribe(function (e, args) { grid.updateRowCount(); grid.render(); }); dataView.onRowsChanged.subscribe(function (e, args) { grid.invalidateRows(args.rows); grid.render(); }); // 遍历 特殊状态码行,加色 function metadata(old_metadata_provider) { return function(row) { var item = this.getItem(row); var ret = (old_metadata_provider(row) || {}); if (item) { ret.cssClasses = (ret.cssClasses || ''); if (item.hasException || (item.method==="http.status.code" && (/^[0-9]+$/.test(item.argument) && item.argument.length===3) && (item.argument==="600"||/^[5,4]+/.test(item.argument)))) { ret.cssClasses += 'danger'; } } return ret; } } },

碎碎念:项目表格一直用的是boost rap-table来做的,需要做一个树形结构的表格,就用了轻量级的treeGrid,贼方便,直接在原来的boostrap-table里面加两行代码就大功告成了.
当然,后来为我这个偷懒付出了一定的代价哈.因为数据比较大,500多条的很正常,treeGrid的弊端就出现了,加载特别的慢.大概要5,6分钟,之后浏览器还可能被卡死.网上找了不少,对于这样大两数据卡顿没有特别有效的方法.
涨姿势:在用某个插件或者框架的时间,除非很了解了,否则最好查一下这个东西的优缺点,和了解一下项目需求.减少返工
写的有点乱,不清除的地方,欢迎留言