- 使用 Spring Initializr 创建 Spring Boot 应用程序
- 在Spring Boot中配置Cassandra
- 在 Spring Boot 上配置 Tomcat 连接池
- 将Camel消息路由到嵌入WildFly的Artemis上
组件实现了以下功能
列宽可动态拖动
列数据排序
列过滤
列位置自由调整
除了需要引入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不久,所以有什么写的不好的地方,请各位大神指出
这个问题在这里已经有了答案: What is the best way to parse html in C#? [closed] (15 个答案) 关闭 3 年前。 string input =
为什么 wrapper #4 没有继承其父表容器的高度?表格嵌套在一个显示 block 包装器中,每个嵌套的div是显示表格,每个表格继承到最里面的一个。是什么原因造成的,我该如何解决? jsfidd
我正在使用带有 Bootstrap 的自定义 css 作为外边框。但顶部边框不可见,除非我将其大小设置为 2 px。 我该如何解决这个问题? HTML #name 1.one 2.two 3.thr
我正在逻辑层面上设计一个数据库,以便稍后将其传递给程序员来交付。我只是粗略地了解它们的工作原理,所以我很难简洁地表达我的问题。这是我的问题: 我有一个名为 MEANINGS 的表。 我有一个名为 WO
在 Laravel 上,我们可以使用 DB::table('table')->get(); 或使用 model::('table')->all() 进行访问;我的问题是它们之间有什么区别? 谢谢。 最
我试图从以下内容中抓取 URL从 WorldOMeter 获取 CoVid 数据,在此页面上存在一个表,id 为:main_table_countries_today其中包含我希望收集的 15x225
这是我的图表数据库:/image/CGAwh.png 我用 SEQUELIZE 制作了我的数据库模型: 型号:级别 module.exports = (sequelize, DataTypes) =>
我真的不明白为什么我的代码不能按预期工作。当我将鼠标悬停在表格的每一行上时,我想显示一个图像(来 self 之前加载的 JSON)。每个图像根据行的不同而不同,我想将它们显示在表格之外的另一个元素中。
假设我的数据库中有一张地铁 map ,其中每条线路的每个站点都是一行。如果我想知道我的线路在哪里互连: mysql> SELECT LineA.stop_id FROM LineA, LineB WH
我最近经常使用这些属性,尤其是 display: table-cell。它在现代浏览器中得到了很好的支持,并且它对某些网格有很多好处,并且可以非常轻松地对齐内容,而无需棘手的标记。但在过去的几天里,我
在 CSS 中,我可以这样做: http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png http://s1.ipicture.ru/uploads/20
问题作为标题,我正在学习sparkSQL,但我无法很好地理解它们之间的区别。谢谢。 最佳答案 spark.table之间没有区别& spark.read.table功能。 内部 spark.read.
我正在尝试根据 this answer 删除表上的非空约束.但是,它似乎没有在 sqlite_sequence 中创建条目。这样做之后,即使我可以在使用测试表时让它正常工作。 有趣的是,如果我备份我的
var otable = new sap.m.Table();//here table is created //here multiple header I'm trying to create t
下面两种方法有什么区别: 内存 性能 答: select table.id from table B: select a.id from table a 谢谢(抱歉,如果我的问题重复)。 最佳答案 完
我尝试在表格后添加点,方法是使用 table::after 选择器创建一个点元素并使用 margin: 5px auto 5px auto; 将其居中。它有效,但似乎在第一个表格列之后添加了点,而不是
我正在设计一个可以标记任何内容的数据库,我可能希望能够选择带有特定标记的所有内容。 我正在为以下两个选项而苦苦挣扎,希望得到一些建议。如果有更好的方法请告诉我。 选项A 多个“多对多”连接表。 tag
"center" div 中的下表元素导致 "left" div 中的内容从顶部偏移几个像素(在我的浏览器中为 8 ).在表格之前添加一些文本可消除此偏移量。 为什么?如何在不要求在我的表格前添加“虚
我是一名优秀的程序员,十分优秀!