首页 > 代码库 > 依赖于angular的table组件
依赖于angular的table组件
组件实现了以下功能
1. 列宽可动态拖动
2. 列数据排序
3. 列过滤
4. 列位置自由调整
除了需要引入angular.js（我用的是1.4.6版本），还需要引用一个angular衍生出来的插件ngdraggable.js
插件地址：https://github.com/fatlinesofcode/ngDraggable/blob/master/example.html
为了方便，我直接全部放在页面上展示吧
<body ng-app="myApp"> <div> <div ng-controller="myCon"> <table id="myTab" cellspacing="0" cellpadding="2" border="1" style="text-align:center;table-layout: fixed;"> <thead> <tr> <th width="50">序号</th> <th width="{{head.width}}" ng-repeat="head in headList">{{head.value}}</th> </tr> <tr> <th width="50"></th> <th width="{{head.width}}" ng-repeat="head in headList"><input style="width:80px;" type="text" ng-model="filterInput[head.code]" ng-change="filtrate(filterInput[head.code],head.code)" /></th> </tr> </thead> <tbody> <tr ng-repeat="data in tableData"> <td width="50">{{$index}}</td> <td width="{{head.width}}" ng-repeat="head in headList" repeat-finish>{{data[head.code]}}</td> </tr> </tbody> </table> <p> <button ng-click="sort(‘name‘)">姓名排序</button> <button ng-click="sort(‘sex‘)">性别排序</button> <button ng-click="sort(‘age‘)">年龄排序</button> <button ng-click="sort(‘from‘)">籍贯排序</button> <button ng-click="sort(‘like‘)">爱好排序</button> </p> <br /> <br /> <p>下面可以拖拽排序（table列排序）</p> <ul> <li ng-repeat="head in headList" ng-drop="true" ng-drop-success="onDropComplete($index, $data,$event)" style="cursor:pointer;"> <p ng-drag="true" ng-drag-data="head">{{head.value}}</p> </li> </ul> </div> </div> <script src="angular.js"></script> <script src="ngDraggable.js"></script> <script> var headList = [ {code:"name",value:"姓名",width:"150"}, {code:"sex",value:"性别",width:"150"}, {code:"age",value:"年龄",width:"150"}, {code:"from",value:"籍贯",width:"150"}, {code:"like",value:"爱好",width:"200"} ] var tableData = [ {name:"老王",age:25,sex:"男",from:"隔壁",like:"FQ"}, {name:"小明",age:18,sex:"男",from:"山东",like:"游泳、爬山"}, {name:"吴樊",age:3,sex:"男",from:"广东",like:"看书"}, {name:"科比",age:45,sex:"男",from:"美国",like:"打篮球"}, {name:"纪鲅强",age:25,sex:"不详",from:"火星",like:"聊天"}, {name:"敏怡",age:23,sex:"女",from:"广东",like:"看书"}, {name:"貂蝉",age:25,sex:"女",from:"洛阳",like:"弹琴"}, {name:"姜子牙",age:85,sex:"男",from:"河南",like:"钓鱼"}, {name:"小丸子",age:24,sex:"女",from:"日本",like:"吃东西"} ] var sortData = {name : "+",sex : "+",age : "+",from : "+",like : "+"} var app = angular.module(‘myApp‘, [‘ngDraggable‘]); app.controller(‘myCon‘,["$scope","$filter",function($scope,$filter){ var table = { init : function(){ //初始化 $scope.headList = headList; $scope.tableData = tableData; $scope.sortData = sortData; $scope.filterInput = {}; $scope.stretch = this.stretch; $scope.onDropComplete = this.onDropComplete; $scope.filtrate = this.filtrate; $scope.sort = this.sort; }, onDropComplete : function (index, obj, evt) { //拖拽排序方法 var otherObj = $scope.headList[index]; var otherIndex = $scope.headList.indexOf(obj); $scope.headList.splice(otherIndex,1); $scope.headList.splice(index,0,obj); }, filtrate : function(value,code){ //列过滤方法 $scope.tableData = tableData; switch(code){ case ‘name‘ : $scope.tableData = $filter(‘filter‘)($scope.tableData,{name : value}); break; case ‘sex‘ : $scope.tableData = $filter(‘filter‘)($scope.tableData,{sex : value}); break; case ‘age‘ : $scope.tableData = $filter(‘filter‘)($scope.tableData,{age : value}); break; case ‘from‘ : $scope.tableData = $filter(‘filter‘)($scope.tableData,{from : value}); break; case ‘like‘ : $scope.tableData = $filter(‘filter‘)($scope.tableData,{like : value}); break; } }, sort : function(row){ //列排序方法 var sort = $scope.sortData[row]; var val = sort + row; $scope.tableData = $filter(‘orderBy‘)($scope.tableData,val); if(sort == "+"){ $scope.sortData[row] = "-" }else{ $scope.sortData[row] = "+" } }, stretch : function(){ //列宽度调整方法 var myTAbId = document.getElementById("myTab"); var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 var wData = {}; var unset = myTAbId.rows[0].cells.length - $scope.headList.length;//不在headList遍历的列数 for (var j = 0; j < myTAbId.rows[0].cells.length; j++) { myTAbId.rows[0].cells[j].index = j; if(unset - 1<j){ myTAbId.rows[0].cells[j].onmousedown = function (event) { //记录单元格 tTD = this; if (event.offsetX > tTD.offsetWidth - 10) { tTD.mouseDown = true; tTD.oldX = event.clientX; tTD.oldWidth = tTD.offsetWidth; } }; myTAbId.rows[0].cells[j].onmouseup = function (event) { //结束宽度调整 if (tTD == undefined) tTD = this; tTD.mouseDown = false; tTD.style.cursor = ‘default‘; $scope.headList[this.index-unset].width = tTD.width; }; myTAbId.rows[0].cells[j].onmousemove = function (event) { //更改鼠标样式 if (event.offsetX > this.offsetWidth - 10) this.style.cursor = ‘col-resize‘; else this.style.cursor = ‘default‘; //取出暂存的Table Cell if (tTD == undefined) tTD = this; //调整宽度 if (tTD.mouseDown != null && tTD.mouseDown == true) { tTD.style.cursor = ‘default‘; if (tTD.oldWidth + (event.clientX - tTD.oldX)>0) tTD.width = tTD.oldWidth + (event.clientX - tTD.oldX); //调整列宽 // tTD.style.width = tTD.width; tTD.style.cursor = ‘col-resize‘; //调整该列中的每个Cell myTAbId = tTD; while (myTAbId.tagName != ‘TABLE‘) myTAbId = myTAbId.parentElement; for (var k = 0; k < myTAbId.rows.length; k++) { myTAbId.rows[k].cells[tTD.cellIndex].width = tTD.width; } } }; } } } } table.init(); }]); app.directive(‘repeatFinish‘,[function(){ return { link: function($scope,$element,$attr){ if($scope.$last == true){ $scope.stretch(); } } }; }]); </script> </body>
小生刚入门angular不久，所以有什么写的不好的地方，请各位大神指出
依赖于angular的table组件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。