组件实现了以下功能
列宽可动态拖动
列数据排序
列过滤
列位置自由调整
除了需要引入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>
varheadList =[
    {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"}
]
vartableData =[
    {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:"吃东西"}
]
varsortData ={name : "+",sex : "+",age : "+",from : "+",like : "+"}

varapp =angular.module('myApp', ['ngDraggable']);
app.controller('myCon',["$scope","$filter",function($scope,$filter){
    vartable ={
        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) {   //拖拽排序方法
            varotherObj =$scope.headList[index];
            varotherIndex =$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){   //列排序方法
            varsort =$scope.sortData[row];
            varval =sort +row;
            $scope.tableData =$filter('orderBy')($scope.tableData,val);
            if(sort == "+"){
                $scope.sortData[row] = "-"}else{
                $scope.sortData[row] = "+"}
        },
        stretch : function(){   //列宽度调整方法
            varmyTAbId =document.getElementById("myTab");
            vartTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题   
            varwData ={};
            varunset =myTAbId.rows[0].cells.length -$scope.headList.length;//不在headList遍历的列数
            for(varj = 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(vark = 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组件

相关文章

热门标签

最新文章
