淘先锋技术网

首页 1 2 3 4 5 6 7

        记第一篇笔记  hell OwO rld 
        最近公司有一点点小需求,做个另类的表格,要求动态的样式(PS:不能直接写死那种),没办法打工人只能硬着头皮去干。
        网上传的一些写法:

        controller.js:

        $scope.test = [
      {testName:'aaa',list:[
                {testValue1: '1',testValue2:'2',testValue3:'3'},
                {testValue1: '4',testValue2:'5',testValue3:'6'},
              ]}
        ];

        html:

        <tbody ng-repeat="x in testData">
    <tr ng-repeat="y in x.list">
      <td ng-if="$index === 0" rowspan={{x.list.length}}>{{x.testName}}</td>
      <td>{{y.testValue1}}</td>
      <td>{{y.testValue2}}</td>
      <td>{{y.testValue3}}</td>

                </tr>
  </tbody>

        效果如下:         但是,这次领导需求麻烦倒阿猿了,因为领导的需求是,固定列,行属于动态变动,如下:

        经过阿猿头发发功,想出来一个好办法~~把分行读取存储到数据库后(略,这次主写前台),后台处理成一个Map,返回两个List,一个存放valueList,一个存放lengthList。

        Html:

          <table >
            <thead>
                <tr>
                    <th rowspan="2">test1</th>
                    <th rowspan="2">test2</th>
                    <th rowspan="2">test3</th>
                    <th rowspan="1" colspan="3">2022年</th>
                    <th rowspan="2">test7</th>
                </tr>
                <tr>
                    <th rowspan="2">2022年_test4</th>
                    <th rowspan="2">2022年_test5</th>
                    <th rowspan="2">2022年_test6</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="values in valueList track by $index">
                    <td rowspan="{{lengthList[$parent.$index][$index]}}" ng-repeat="value in values track by $index">
                        {{value}}
                    </td>
                </tr>
            </tbody>                                    
        </table>

       

        controller:

        $scope.valueList = [['1','1','1','1','1','1','1'],['2','2','2'],['3','3','3','3','3','3']];
        $scope.lengthList =[[3,2,2,1,1,1,2],[1,1,1],[1,1,1,1,1,1]]

        效果图如下:

         

        第一次写文章纯手打。多有不周到的地方,请各位多见谅,欢迎各位提问,知无不言言无不尽~~By:Zedd_HellOwOrld