依赖于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组件

最新文章

热门文章
