angularjs表格ng-table使用备忘录_node.js
项目中用到angularjs的表格ng-table，功能相当强大，像搜索、排序、checkbox、分页、每页表格显示数目等都有。API，demo什么的也只能参考官网了。这里做个备忘，哪天肯定还会用到。
HTML：
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
<script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="angular.js"></script>
<script data-require="ng-table@*" data-semver="0.3.0" src="ngTable.js"></script>
<link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.2/ng-table.css" />
<link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="main" ng-controller="DemoCtrl">
<p><strong>Page:</strong> {{tableParams.page()}}
<p><strong>Count per page:</strong> {{tableParams.count()}}
<p>Filter: <input class="form-control" type="text" ng-model="filter.$" /></p>
<table ng-table="tableParams" show-filter="true" class="table">
<tr ng-repeat="user in $data" ng-class="{ 'emphasis': user.money > 500 }">
<td width="30" style="text-align: left" header="'ng-table/headers/checkbox.html'">
<input type="checkbox" ng-model="checkboxes.items[user.organizationId]" />
</td>
<td data-title="'编号'" sortable="'organizationId'">
{{user.organizationId}}
</td>
<td data-title="'名称'" sortable="'name'">
{{user.name}}
</td>
</tr>
</table>
<script type="text/ng-template" id="ng-table/headers/checkbox.html">
<input type="checkbox" ng-model="checkboxes.checked" id="select_all" name="filter-checkbox" value="" />
</script>
</body>
</html>
js：
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, ngTableParams, NameService) {
var data = NameService.data;
$scope.tableParams = new ngTableParams(
{
page: 1, // show first page
count: 10, // count per page
sorting: {name:'asc'}
},
{
total: 0, // length of data
getData: function($defer, params) {
NameService.getData($defer,params,$scope.filter);
}
});
$scope.$watch("filter.$", function () {
$scope.tableParams.reload();
});
});
app.service("NameService", function($http, $filter){
function filterData(data, filter){
return $filter('filter')(data, filter);
}
function orderData(data, params){
return params.sorting() ? $filter('orderBy')(data, params.orderBy()) : filteredData;
}
function sliceData(data, params){
return data.slice((params.page() - 1) * params.count(), params.page() * params.count())
}
function transformData(data,filter,params){
return sliceData( orderData( filterData(data,filter), params ), params);
}
var service = {
cachedData:[],
getData:function($defer, params, filter){
if(service.cachedData.length>0){
console.log("using cached data")
var filteredData = filterData(service.cachedData,filter);
var transformedData = sliceData(orderData(filteredData,params),params);
params.total(filteredData.length)
$defer.resolve(transformedData);
}
else{
console.log("fetching data")
$http.get("data.json").success(function(resp)
{
angular.copy(resp,service.cachedData)
params.total(resp.length)
var filteredData = $filter('filter')(resp, filter);
var transformedData = transformData(resp,filter,params)
$defer.resolve(transformedData);
});
}
}
};
return service;
});
json数据：
[{
"hidden": 1,
"launchImage": "2015_4_9_12_bb7e0a446ed74ae7ad0a3554a54183bc_1298477763",
"name": "张三",
"orgId": 1498031949070997504,
"organizationId": "1498031949070997504"
}, {
"hidden": 1,
"launchImage": "http://7s1rmc.com1.z0.glb.clouddn.com/2015_4_9_12_0ab5b02cf1df4ac49a7376b820816307_2127491219|39e202124ac90ec531009b0edbbbe0ba",
"name": "李四",
"orgId": 1498046360909250560,
"organizationId": "1498046360909250560"
}]
以上就是本文的全部内容，希望对大家的学习有所帮助。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
PPT表格中插入的图片调整格式的操作步骤
Mar 26, 2024 pm 04:16 PM
1、新建一个PPT文件，命名为【PPT技巧】，作为示例。2、双击【PPT技巧】，打开PPT文件。3、插入两行两列的表格，作为示例。4、在表格的边框上双击，上方工具栏出现【设计】的选项。5、点击【底纹】的选项，点击【图片】。6、点击【图片】，弹出以图片为背景的填充选项对话框。7、在目录中找到要插入的托，点击确定即可插入图片。8、在表格框上右击，弹出设置的对话框。9、点击【设置单元格格式】，勾选【将图片平铺为底纹】。10、设置【居中】【镜像】等自己需要的功能，点击确定即可。注意：默认为图片填充在表格
关于销量预测如何制作表格
Mar 20, 2024 pm 03:06 PM
能够熟练的制作表格不仅是会计、人事以及财务的必备技能，对于很多销售人员来说，学会制作表格也是很重要的。因为与销量有关的数据都是很多并且很复杂的，而且不是简单的记在文档当中，就可以说明问题的。为了能够让更多的销售人员熟练运用Excel来制作表格，小编接下来要介绍的就是有关于销量预测的表格制作问题，有需要的朋友不要错过哦！1，打开【销量预测及目标制定】，xlsm，来分析每个表格所存放的数据。2，新建【空白工作表】，选择【单元格】，输入【标签信息】。向下【拖拽】，【填充】月份。输入【其它】数据，点击【
如何使用 JavaScript 实现表格列宽拖拽调整功能？
Oct 21, 2023 am 08:14 AM
如何使用JavaScript实现表格列宽拖拽调整功能？随着Web技术的发展，越来越多的数据以表格的形式展示在网页上。然而，有时候表格的列宽并不能满足我们的需求，可能会出现内容溢出或者宽度不足的情况。为了解决这个问题，我们可以使用JavaScript实现表格的列宽拖拽调整功能，使用户可以根据需求自由调整列宽。实现表格列宽拖拽调整功能，需要以下三个主
wps数值怎样设置按条件自动变色_wps表格数值设置按条件自动变色的步骤
Mar 27, 2024 pm 07:30 PM
1、打开工作表，找到【开始】-【条件格式】按钮。2、点击列选择，选中将添加条件格式的列。3、单击【条件格式】按钮，弹出选项菜单国。4、选择【突出显示条件规则】-【介于】。5、填写规则：20，24，深填充色深绿色文本。6、确定后，所选列中数据按照设定对相应数字文字、单元框加色处理。7、对于没有冲突的条件规则，可以重复添加，但对于冲突规则wps则会以最后添加的规则代替之前建立的条件规则。8、重复添加【介于】规则20-24和【小于】20后的单元列。9、如需改变规则，刚可以清除规则后重新设定规则。
表格有一条虚线外打印不到怎么办
Mar 28, 2023 am 11:38 AM
表格有一条虚线外打印不到的解决办法：1、打开excel文件，在打开的页面中点击“打印”；2、在预览页找到“无缩放”，选择调整为一页；3、选择打印机打印文档即可。
你知道Word表格怎么求和吗
Mar 21, 2024 pm 01:10 PM
有时候，我们在Word表格中会经常遇到计数的问题；一般遇到这样的问题，大部分同学都回把Word表格复制到Excel中来计算；还有一部分同学会默默地拿起计算器去算。那有没有快速的方法来计算呢？当然有啊，其实在Word中也是可以计算求和的。那么，你知道该怎么操作吗？今天，我们就来一起来看一下吧！废话不多说，有需要的小伙伴赶紧收藏起来吧！步骤详情：1、首先，我们打开电脑上的Word软件，打开需要处理的文档。（如图所示）2、接着，我们将光标定位在求和数值所在的单元格上（如图所示）；然后，我们点击【菜单栏
Vue中如何实现表格数据的导出和导入
Oct 15, 2023 am 08:30 AM
Vue中如何实现表格数据的导出和导入，需要具体代码示例在使用Vue开发的Web项目中，经常会遇到需要将表格数据导出为Excel或导入Excel文件的需求。本文将介绍如何使用Vue来实现表格数据的导出和导入功能，并提供具体的代码示例。一、表格数据的导出安装依赖首先，我们需要安装一些依赖，用于导出Excel文件。在Vue项目中的命令行中运行以下命令：npmin
使用JavaScript实现表格筛选功能
Aug 10, 2023 pm 09:51 PM
使用JavaScript实现表格筛选功能随着互联网技术的不断发展，表格成为了网页中常见的展示数据的方式。然而，当数据量庞大时，用户往往会面临找到特定数据的困难。因此，为表格添加筛选功能，让用户可以快速找到所需的数据，成为了很多网页设计的需求。本文将介绍如何使用JavaScript实现表格筛选功能。首先，我们需要有一份表格数据。下面是一个简单的例子：<t
