表格滚动条和展开收起功能

表格超宽超高的情况，向下滚动：表头固顶，向左向右拖动，表头要随着移动。

做一个浮动表头，底部表格表头不能去掉，需要占位，监听表格x轴，移动的值给表头赋值负数left

<div style="width: 1554px;overflow: hidden;height: 32px;position: absolute;z-index: 1;background: rgb(238, 238, 238);top:55px;left:5px;">
        <table class="pandian_table" style="width:2020px;position: absolute;margin-top:0px" id="topFudong">
            <tr>
                <th style="width: 160px;height:30px;line-height:30px">名称</th>
                <th style="width: 80px; height: 30px; line-height: 30px">操作</th>
                <th style="width: 100px; height: 30px; line-height: 30px">代码</th>
                <th style="width: 140px; height: 30px; line-height: 30px">1月</th>
                <th style="width: 140px; height: 30px; line-height: 30px">2月</th>
                <th style="width: 140px; height: 30px; line-height: 30px">3月</th>
                <th style="width: 140px; height: 30px; line-height: 30px">4月</th>
                <th style="width: 140px; height: 30px; line-height: 30px">5月</th>
                <th style="width: 140px; height: 30px; line-height: 30px">6月</th>
                <th style="width: 140px; height: 30px; line-height: 30px">7月</th>
                <th style="width: 140px; height: 30px; line-height: 30px">8月</th>
                <th style="width: 140px; height: 30px; line-height: 30px">9月</th>
                <th style="width: 140px; height: 30px; line-height: 30px">10月</th>
                <th style="width: 140px; height: 30px; line-height: 30px">11月</th>
                <th style="width: 140px; height: 30px; line-height: 30px">12月</th>
            </tr>
        </table>
    </div>
    <div style="width:98%;overflow-x:auto;height: 650px;overflow-y: scroll;" id="hengxiang">
    <table class="pandian_table" style="width:2020px;margin-top:0px">
        <tr>
            <th style="width: 160px;height:30px;line-height:30px">名称</th>
            <th style="width: 80px; height: 30px; line-height: 30px">操作</th>
            <th style="width: 100px; height: 30px; line-height: 30px">代码</th>
            <th style="width: 140px; height: 30px; line-height: 30px">1月</th>
            <th style="width: 140px; height: 30px; line-height: 30px">2月</th>
            <th style="width: 140px; height: 30px; line-height: 30px">3月</th>
            <th style="width: 140px; height: 30px; line-height: 30px">4月</th>
            <th style="width: 140px; height: 30px; line-height: 30px">5月</th>
            <th style="width: 140px; height: 30px; line-height: 30px">6月</th>
            <th style="width: 140px; height: 30px; line-height: 30px">7月</th>
            <th style="width: 140px; height: 30px; line-height: 30px">8月</th>
            <th style="width: 140px; height: 30px; line-height: 30px">9月</th>
            <th style="width: 140px; height: 30px; line-height: 30px">10月</th>
            <th style="width: 140px; height: 30px; line-height: 30px">11月</th>
            <th style="width: 140px; height: 30px; line-height: 30px">12月</th>
        </tr>
    </table>
    <div style="width:2038px;overflow-x:hidden;">
        <table class="pandian_table" id="pandian_tableBox" style="width:100%;margin-top:0px">
            <tbody>
            <tr v-for="(item,index) in list2" v-bind:id="'inven'+(index)">
                <td style="width: 160px;" v-bind:class="(item.InLevel == 1) ? 'fc4' : ''">{{item.Item_Name}}</td>
                <td style="width: 79px;">
                    <span v-on:click="queryinfo(item,index)" v-if="item.IsLastLevel==0 && item.flag" style="color: rgb(46,187,202); cursor: pointer;">展开</span>
                    <span v-on:click="queryinfoshou(item,index)" v-if="item.IsLastLevel==0 && !item.flag" style="color: rgb(46,187,202); cursor: pointer;">收起</span>
                    <span v-if="item.IsLastLevel==1"></span>
                </td>
                <td style="width: 100px;">{{item.Item_Code}}</td>
                <td style="width: 140px; padding-right: 5px; text-align: right;"><span v-if="item.IsLastLevel==1 && item.Month1!=''" v-on:click="details(item,1)" style="color: rgb(46,187,202); cursor: pointer;">{{item.Month1}}</span><span v-else>{{item.Month1}}</span></td>
                <td style="width: 140px; padding-right: 5px; text-align: right;"><span v-if="item.IsLastLevel==1 && item.Month2!=''" v-on:click="details(item,2)" style="color: rgb(46,187,202); cursor: pointer;">{{item.Month2}}</span><span v-else>{{item.Month2}}</span></td>
                <td style="width: 140px; padding-right: 5px; text-align: right;"><span v-if="item.IsLastLevel==1 && item.Month3!=''" v-on:click="details(item,3)" style="color: rgb(46,187,202); cursor: pointer;">{{item.Month3}}</span><span v-else>{{item.Month3}}</span></td>
                <td style="width: 140px; padding-right: 5px; text-align: right;"><span v-if="item.IsLastLevel==1 && item.Month4!=''" v-on:click="details(item,4)" style="color: rgb(46,187,202); cursor: pointer;">{{item.Month4}}</span><span v-else>{{item.Month4}}</span></td>
                <td style="width: 140px; padding-right: 5px; text-align: right;"><span v-if="item.IsLastLevel==1 && item.Month5!=''" v-on:click="details(item,5)" style="color: rgb(46,187,202); cursor: pointer;">{{item.Month5}}</span><span v-else>{{item.Month5}}</span></td>
                <td style="width: 140px; padding-right: 5px; text-align: right;"><span v-if="item.IsLastLevel==1 && item.Month6!=''" v-on:click="details(item,6)" style="color: rgb(46,187,202); cursor: pointer;">{{item.Month6}}</span><span v-else>{{item.Month6}}</span></td>
                <td style="width: 140px; padding-right: 5px; text-align: right;"><span v-if="item.IsLastLevel==1 && item.Month7!=''" v-on:click="details(item,7)" style="color: rgb(46,187,202); cursor: pointer;">{{item.Month7}}</span><span v-else>{{item.Month7}}</span></td>
                <td style="width: 140px; padding-right: 5px; text-align: right;"><span v-if="item.IsLastLevel==1 && item.Month8!=''" v-on:click="details(item,8)" style="color: rgb(46,187,202); cursor: pointer;">{{item.Month8}}</span><span v-else>{{item.Month8}}</span></td>
                <td style="width: 140px; padding-right: 5px; text-align: right;"><span v-if="item.IsLastLevel==1 && item.Month9!=''" v-on:click="details(item,9)" style="color: rgb(46,187,202); cursor: pointer;">{{item.Month9}}</span><span v-else>{{item.Month9}}</span></td>
                <td style="width: 140px; padding-right: 5px; text-align: right;"><span v-if="item.IsLastLevel==1 && item.Month10!=''" v-on:click="details(item,10)" style="color: rgb(46,187,202); cursor: pointer;">{{item.Month10}}</span><span v-else>{{item.Month10}}</span></td>
                <td style="width: 140px; padding-right: 5px; text-align: right;"><span v-if="item.IsLastLevel==1 && item.Month11!=''" v-on:click="details(item,11)" style="color: rgb(46,187,202); cursor: pointer;">{{item.Month11}}</span><span v-else>{{item.Month11}}</span></td>
                <td style="width: auto; padding-right: 5px; text-align: right;"><span v-if="item.IsLastLevel==1 && item.Month12!=''" v-on:click="details(item,12)" style="color: rgb(46,187,202); cursor: pointer;">{{item.Month12}}</span><span v-else>{{item.Month12}}</span></td>
            </tr>
            </tbody>
        </table>
    </div>
    </div>

 

var app = new Vue({
    el: '#app',
    data: {
        list: [],
        list1: [],
        list2: [],
        json:'',
    },
    methods: {
        AccountAnalysis_search(){
            this.queary(1,'',-1)
        },
        queary: function (InLevel,PItem_Code,index) {
            var self = this
            var InYear = Number($("#AccountAnalysis_day").val())    //所选年份
            var InLevel = Number(InLevel)                           //层级，0=不按此查询
            var PItem_Code = PItem_Code                             //父级科目编码，空=不按此查询
            $.ajax({
                type: 'POST',
                url: "/Report/F_Rep_Item_Anal_GetList",
                dataType: "json",
                data: {
                    InYear: InYear,
                    InLevel: InLevel,
                    PItem_Code : PItem_Code,
                },
                success: function (msg) {
                    // console.log(msg);
                    $(".dialog").hide();
                    if (msg.status.code == "1") {
                        var info = msg.row_data.record
                        if(index == -1){//首次加载都是1级
                            self.list2 = [];
                            for (var i in info) {
                                if(info[i].IsLastLevel == 0){
                                    info[i].flag = true
                                }
                                self.list2.push(info[i]);
                            }
                        }else{//加在各级下面
                            $.each(info,function(ind,it){
                                index++
                                if(it.IsLastLevel == 0){
                                    it.flag = true
                                }
                                self.list2.splice(index,0,it)
                            })
                        }

                    }
                    else {

                    }
                }
            });
        },
        queryinfo:function(item,index){//展开功能，获取数据
            item.flag = false
            var self = this
            this.queary(item.InLevel+1,item.Item_Code,index)
        },
        queryinfoshou:function(item,index){//收起功能，对比code，下级的code是在上级的code的后面加数字，所以对比截取的code，并且length要大于比较的值，匹配就删除数据
            item.flag = true
            var self = this
            var curVal = item.Item_Code
            for(let i=0;i<self.list2.length;i++){
                var val = self.list2[i].Item_Code.slice(0,curVal.length)
                if(curVal == val && self.list2[i].Item_Code.length > curVal.length){
                    self.list2.splice(i,1)
                    i--
                }
            }
        },
        details: function(item,month){
            // console.log(1,item);
            var curYear = item.InYear;
            var curMonth = month
            var curCode = item.Item_Code
            var dialog = $.dialog({
                title: '查看详情',
                content: 'url:/Report/AccountAnalysisInfo?curYear=' + curYear + '&curMonth=' + curMonth + '&curCode=' + curCode,
                width: 1200,
                height: 600,
                close:function(){
                    // self.querylist(1,true)
                }
            });
        },
        
    }
})
var fixedDom = document.getElementById('hengxiang');
var topFudong = $("#topFudong")
$(function () {
    app.year();
    fixedDom.addEventListener('scroll',winScroll,false);//监听scroll
    function winScroll(e){
        // 给浮动的表头更改left
        var le = '-'+e.target.scrollLeft+'px'
        topFudong.css({'left':le})
    }
});