treegriddata.js插件实现绑定数据，结合jquery-treegrid.js使用

最新推荐文章于 2021-08-12 15:56:44 发布

chijiong4347

最新推荐文章于 2021-08-12 15:56:44 发布

阅读量475

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/cqzhangfeng/blog/1586851

版权

效果:

1、treegriddata.js插件编写

;(function($){
    //设置默认值
    var defaults = {
        data:[],
        column:[],
        propertyName:["name","error"],
    };
    //构造trrgridData
    function treegridData(element,options){
        this.element = element;
        this.options = $.extend({},defaults,options);
        //初始化
        this.init(this.options);
    };
    treegridData.prototype = {
        init:function(){
            var self = this;
            var _element = this.element;
            var _column = this.options.column;
            var _data = this.options.data;
            var _propertyName = this.options.propertyName;
            //定义表头与表主体
            var $thead = '<thead><tr class="thead-row"></tr></thead>';
            var $tbody = '<tbody class="tbody"></tbody>';  
            //向表格中添加thead与tbody 
            $("#treegrid").append($thead);
            $("#treegrid").append($tbody);
            //往thead中添加th以及数据
            
            $.each(_column,function(index,val){
                $('.thead-row').append('<th>'+ val +'</th>');
            })
            //往tbody中添加tr、td数据 
            $.each(_data,function(index,item){
                var $tr = $('<tr></tr>');
                $tr.addClass('treegrid-'+index);
                $('tbody').append($tr); 
                //在tr中创建td并赋值
                $.each(_propertyName,function(index,value){
                    var $td = '<td>'+ item[value] +'</td>'
                    $tr.append($td);
                });
                /*
                    判断是否有praentId属性
                    如果有此属性，获取它的值，判断与谁的id相等
                    再添加treegerid-parent-i类
                    item.parentId == undefined
                */
                if(item.hasOwnProperty('parentId')){
                    for(var i = 0;i<index;i++){
                        if(_data[i].id == item.parentId){
                            $tr.addClass('treegrid-parent-'+i);                        
                        }
                    }
                }           
            });
        }
    };
    $.fn.jqTreeGrid = function(options){
        //实例化treegridData
        new treegridData(this,options);
    }
})(jQuery);

2、html页（html页面实现与jquery-treegrid.js与treegriddata.js插件的调用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie8">
    <title>记分异常</title>
    <link rel="stylesheet" type="text/css" href="jquery-treegrid/bootstrap-3.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/scoringerror.css" /> 
    <link rel="stylesheet" type="text/css" href="jquery-treegrid/css/jquery.treegrid.css" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <!-- <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> -->
</head>
<body>
    <div class="head"></div>
    <div class="handle"></div>
    <div class="main">
        <div class="slide-menu"></div>
        <div class="content">
            <div class="table-box">
                <table id="treegrid" class="table table-hover">
                    <caption><h3><b>违规未记分数据统计表</b></h3></caption>
                </table>
            </div>
            <div class="echarts-box">
                <div id="echarts"></div>
            </div>
        </div>
    </div>
    <div class="footer">@版权所有</div>
    <script type="text/javascript" src="jquery-treegrid/js/jquery.treegrid.js"></script>
    <script type="text/javascript" src="jquery-treegrid/js/treegriddata.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript">
        var allData = [
                {"id":1,"name":"江苏省","error":'12'},
                {"id":2,"name":"常州市","error":'2',"parentId":1},
                {"id":3,"name":"苏州市","error":'6',"parentId":1},
                {"id":4,"name":"姑苏区","error":'1',"parentId":3},
                {"id":5,"name":"吴中区","error":'3',"parentId":3},
                {"id":6,"name":"木渎","error":'1',"parentId":5},
                {"id":7,"name":"越溪","error":'3',"parentId":5},
                {"id":8,"name":"石湖","error":'1',"parentId":7},
                {"id":9,"name":"莫舍","error":'2',"parentId":7},
                {"id":13,"name":"相城区","error":'2',"parentId":3},
                {"id":14,"name":"高新区","error":'0',"parentId":3},
                {"id":10,"name":"南京市","error":'4',"parentId":1},
                {"id":11,"name":"上海市","error":'10'},
                {"id":12,"name":"北京市","error":'8'},
            ];
        //加载jqTreeGrid
        $('#treegrid').jqTreeGrid({
            data:allData,
            column:["地名","违规数据","操作"],
            propertyName:["name","error"]
        });
        //加载treegrid
        $('#treegrid').treegrid({
            expanderExpandedClass: 'glyphicon glyphicon-chevron-right',
            expanderCollapsedClass: 'glyphicon glyphicon-chevron-down'
        });

        //添加操作列
        var operateTd = $('<td class="operate"><button class="btnCheck">查看饼图</button><button class="btnBack">返回</button></td>')
        $('tbody tr').append(operateTd);
        
        $('tr').each(function(){
            if(!$(this).find('span').hasClass('glyphicon')){
                $(this).find('.btnCheck').hide(); 
                $(this).find('.btnBack').hide(); 
            }
        })

        $('.btnBack').click(function(){
            window.location.reload();
        });
        /*  
            操作
            初始化echarts
        */ 
        $('.btnCheck').each(function(){
            $(this).click(function(){
                $(".table-box").css('width','45%');
                $("#echarts").show();
                var myChart = echarts.init(document.getElementById('echarts'));
                var Name = $(this).parent().parent().find('td').eq(0).text();
                for(var i = 0;i<allData.length;i++){
                    if(Name == allData[i].name){
                        var needData = [];
                        for(var j = 0;j<allData.length;j++){
                            if(allData[i].id == allData[j].parentId){
                                needData.push(allData[j]);
                                var childName = [];
                                var childData = [];                                  
                                for(var k = 0;k<needData.length;k++){
                                    childName.push(needData[k].name);
                                    var objchild = {value:0,name:''};
                                    objchild.value = needData[k].error;
                                    objchild.name = needData[k].name;
                                    childData.push(objchild);                                 
                                }
                            }
                        }          
                    }
                }                  
                option = {
                    title : {
                        text: Name+'交通违规统计',
                        subtext: '违规统计',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: childName
                    },
                    series : [
                        {
                            name: '占比',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:childData,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            });
        });
    </script>
</body>
</html>

3、css（less）

@width:100%;
@height:100%;
@body-bg-color:#F6FAFD;
@bg-color:#102749;

*{
    margin:  0;
    padding: 0;
    outline: none;
}
html,body{
    width:@width;
    height: @height;
    background-color:@body-bg-color;
}
.head{
    width: @width;
    height: 50px;
    background-color: @bg-color;
}
.handle{
    height: 80px;
    width: @width;
    background-color: #EDF2F6;
}
.main{
    width:@width;
    min-height:600px;
    height: auto;
    margin-top: 20px;
    display: flex;
    background-color: #E3EAF2;
    .slide-menu{
        width:10%;
        float: left;
        min-height:600px;
        height:auto;
        background-color: @bg-color;
    } 
    .content{
        width: 90%;
        float: left;   
        .table-box{
            width:100%;
            height: auto;
            float: left;
            padding: 20px;
            table{
                tr{
                    &:nth-child(even){
                        background-color: lightsteelblue;
                     }
                     th,td{
                        border-top: none;
                        &:nth-child(2),&:nth-child(3){
                            text-align: center;
                        }
                        button{
                            padding: 2px 5px;
                            border-radius: 6px;
                            background-color: lightblue;
                            color: #fff;
                            font-weight: bold;
                            margin-left: 5px;
                            outline: none;
                        }
                    }   
                }
            }           
        }
       
        #echarts{
            width: 55%;
            float: left;
            min-height: 600px;
            height: auto;
            padding: 20px;
            text-align: center;
            display: none;         
        }
    }
}
.footer{
    width: @width;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

转载于:https://my.oschina.net/cqzhangfeng/blog/1586851