依赖于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组件的更多相关文章
- Angular动态创建组件之Portals
这篇文章主要介绍使用Angular api 和 CDK Portals两种方式实现动态创建组件,另外还会讲一些跟它相关的知识点,如:Angular多级依赖注入.ViewContainerRef,Por ...
- AntD02 Table组件的使用
1 前提准备 1.1 创建一个angular项目 1.2 将 Ant Design 整合到 Angular 项目中 1.3 官方文档 点击前往 2 简单使用 <nz-table #rowSele ...
- React中使用Ant Table组件
一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启 ...
- 使用 antd Table组件， 异步获取数据
使用React.js + Redux + antd 制作CMS 后台内容管理系统,分享一点点积累,欢迎讨论. 在this.state中初始化数据: this.state = { pageNum:1, ...
- 【Ireport】利用Ireport5.2的table组件迅速制作表格导出pdf
转载请注明网址.Ireport table dataset Ireport在半年前还是4.7,今天无意发现,居然出到了5.2就搞一把. 首先,去下载Ireport,并进行安装.这个我就不演示了.下载完 ...
- Ant Table组件
http://www.cnblogs.com/hujunzheng/p/5689650.html React中使用Ant Table组件 v一.Ant Design of React http:/ ...
- iview中，table组件在缩进时产生的bug。
问题描述: 在父元素因为缩进的关系撑开时,table组件不会因为父元素的撑开而自适应,问题如图 解决办法:在父一级的组件中使用table {width: 100% !important},强制使表格宽 ...
- react ，ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
- 在 Element-UI 的 Table 组件上添加列拖拽效果
Element-UI 的 Table组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图: 一.数据驱动 传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup ...
随机推荐
- VM搭建Hadoop环境遇到的问题
原文链接:https://www.toutiao.com/i6482644128860471822/ 一.Slave2中sshd服务一直处于启动失败状态 查看配置文件 c 发现配置文件末尾slave2 ...
- Keil MDK STM32系列(一) 基于标准外设库SPL的STM32F103开发
Keil MDK STM32系列 Keil MDK STM32系列(一) 基于标准外设库SPL的STM32F103开发 Keil MDK STM32系列(二) 基于标准外设库SPL的STM32F401 ...
- 【C】C语言大作业——学生学籍管理系统
文章目录 学生管理系统 界面 主界面 登陆界面 注册界面 管理界面 学生界面 退出界面 链接 注意 学生管理系统 学C语言时写的一个大作业,弄了一个带图形界面的,使用的是VS配合EasyX图形库进行实 ...
- 【C primer plus】初始化链表函数的错误
C primer plus第六版 的一处错误 第五百页17.3.4 实现接口的程序清单17.5中的初始化链表函数有误 #源代码 void InitializeList(List * plist) { ...
- P5024 [NOIP2018 提高组] 保卫王国
思路: 首先想到每次询问两个点后就从这两个点开始往上爬,沿路更新 dp 值即可. #include <bits/stdc++.h> #define For(i,a,b) for(int i ...
- 《剑指offer》面试题46. 把数字翻译成字符串
问题描述 给定一个数字,我们按照如下规则把它翻译为字符串:0 翻译成 "a" ,1 翻译成 "b",--,11 翻译成 "l",--,25 ...
- winform 中心旋转 图片旋转
//设置左上角到中心点 g.TranslateTransform(int.Parse(x), int.Parse(y)); //旋转角度 g.RotateTransform(int.Parse(&qu ...
- Cesium入门10 - 3D Tiles
Cesium入门10 - 3D Tiles Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 我们团队有时把Ces ...
- Prometheus-operator 介绍和配置解析
随着云原生概念盛行,对于容器.服务.节点以及集群的监控变得越来越重要.Prometheus 作为 Kubernetes 监控的事实标准,有着强大的功能和良好的生态.但是它不支持分布式,不支持数据导入. ...
- 查看WordPress网站使用的主题和插件
阅读原文 whatwpthemeisthat.com 很多时候在网上看到某个WordPress的主题很漂亮,很想要这个主题,又联系不上博客的联系人的时候,我们可以通过以下方法进行查看. 一.手动扒代码 ...