首页 > 代码库 > 动态多表头表格
动态多表头表格
这段时间一直在和表格过不去,包括angularjs的uigrid,ng-grid或者其他的一些表格插件,有时这些表格插件都被玩坏了,各种改css,改他们的js。可是总有那么些时候得不到自己想要的表格形式。我也弄了一个简单的实现动态多表头的表格,仅供参考,我这技术太菜,只能写写简单的。不多说,先贴代码
<div ng-controller="page3Ctrl"> <div class="panel panel-default"> <div class="panel-body"> <div class="row"> <div class="form-group col-md-4"> <label class="control-label"> 年份 </label> <select chosen="" multiple="multiple" ng-model="chosenyear" class="chosen-select form-control"> <option value=""> <option selected="selected">2013</option> <option>2014</option> <option>2015</option> <option>2016</option> </option> </select> </div> <div class="form-group col-md-4"> <label class="control-label"> 税种 </label> <select chosen="" multiple="multiple" ng-model="chosentype" class="chosen-select form-control"> <option value=""> <option selected="selected">企业所得税</option> <option>增值税</option> <option>营业税</option> <option>个人所得税</option> </option> </select> </div> <div class="form-group col-md-4"> <label class="control-label"> </label> <br> <button class="btn btn-primary" ng-click="taxsubmit()">提交</button> </div> </div> </div> </div> <div class="panel panel-default row" > <div class="panel-body table-responsive"> <table class="table table-striped table-bordered table-hover"> <tr><td></td><td colspan="{{length}}" ng-repeat="year in yeartax">{{year}}</td></tr> <tr><td></td><td colspan="3" ng-repeat="type in typetax track by $index">{{type}}</td></tr> <tr><td width="5%">收款地区</td><td ng-repeat="i in class track by $index">{{i}}</td></tr> <tr ng-repeat="t in area"><td width="5%">{{t}}</td></tr> </table> </div> </div></div>
下面是controller
App.controller("page3Ctrl",function($scope){ $scope.taxsubmit=function(){ $scope.yearLength=$scope.chosenyear.length; $scope.yeartax=$scope.chosenyear; //$scope.typetax=$scope.chosentype; $scope.typeLength=$scope.chosentype.length; $scope.length=$scope.typeLength*3; $scope.typetax=[]; console.log($scope.yearLength); console.log($scope.length); var i=0; while(i<$scope.yearLength){ for(var j=0;j<$scope.typeLength;j++){ $scope.typetax.push($scope.chosentype[j]); } i++; } console.log($scope.typetax); $scope.class=[‘当期‘,‘同期‘,‘增幅‘]; var a=3; while(a<$scope.yearLength*$scope.typeLength*3){ for(var y=0;y<3;y++){ $scope.class.push($scope.class[y]); } a=a+3; } console.log($scope.class); }; $scope.area=["全市","一.市区","(一)本级","1.市级","2.园区","(二)区级","1.姑苏","2.高新区","3.吴中","4.相城","5.吴江","二.市(县)","1.张家港","2.昆山","3.太仓","4.常熟"] });
最终实现的效果:
动态多表头表格
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。