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脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++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.設定【居中】【鏡像】等自己需要的功能，點選確定即可。注意：預設為圖片填充在表格
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 20, 2024 pm 03:06 PM
能夠熟練的製作表格不僅是會計、人事以及財務的必備技能，對於許多銷售人員來說，學會製作表格也是很重要的。因為與銷售量有關的數據都是很多且很複雜的，而且不是簡單的記在文件當中，就可以說明問題的。為了能讓更多的銷售人員熟練運用Excel來製作表格，小編接下來要介紹的就是有關於銷量預測的表格製作問題，有需要的朋友不要錯過哦！ 1，開啟【銷售預測及目標制定】，xlsm，來分析每個表格所存放的資料。 2，新建【空白工作表】，選擇【儲存格】，輸入【標籤資訊】。向下【拖曳】，【填充】月份。輸入【其它】數據，點選【
如何使用 JavaScript 實作表格列寬拖曳調整功能？
Oct 21, 2023 am 08:14 AM
如何使用JavaScript實作表格列寬拖曳調整功能？隨著Web科技的發展，越來越多的數據以表格的形式展示在網頁上。然而，有時候表格的列寬並不能滿足我們的需求，可能會出現內容溢出或寬度不足的情況。為了解決這個問題，我們可以使用JavaScript實作表格的列寬拖曳調整功能，使用戶可以根據需求自由調整列寬。實現表格列寬拖曳調整功能，需要以下三個主
表格有一條虛線外印不到怎麼辦
Mar 28, 2023 am 11:38 AM
表格有一條虛線外打印不到的解決辦法：1、打開excel文件，在打開的頁面中點擊“打印”；2、在預覽頁找到“無縮放”，選擇調整為一頁；3、選擇打印機打印文檔即可。
Vue中如何實作表格資料的匯出與匯入
Oct 15, 2023 am 08:30 AM
Vue中如何實現表格資料的匯出和匯入，需要具體程式碼範例在使用Vue開發的Web專案中，經常會遇到需要將表格資料匯出為Excel或匯入Excel檔案的需求。本文將介紹如何使用Vue來實現表格資料的匯出和匯入功能，並提供具體的程式碼範例。一、表格資料的匯出安裝依賴首先，我們需要安裝一些依賴，用於匯出Excel檔案。在Vue專案中的命令列中執行以下命令：npmin
使用JavaScript實作表格資料的分頁顯示
Jun 16, 2023 am 10:00 AM
隨著數據的不斷增長，表格顯示變得更加困難。大多數情況下，表格中的資料量過大，導致表格在載入時變得緩慢，而且使用者需要不斷地瀏覽頁面才能找到自己想要的資料。本文將介紹如何使用JavaScript實作表格資料的分頁顯示，讓使用者更容易找到自己想要的資料。一、動態建立表格為了讓分頁功能更可控，需要動態建立表格。在HTML頁面中，新增一個類似下面的table元素。
使用JavaScript實作表格篩選功能
Aug 10, 2023 pm 09:51 PM
使用JavaScript實作表格篩選功能隨著網路科技的不斷發展，表格成為了網頁中常見的展示資料的方式。然而，當資料量龐大時，使用者往往會面臨找到特定資料的困難。因此，為表格添加篩選功能，讓使用者可以快速找到所需的數據，成為了許多網頁設計的需求。本文將介紹如何使用JavaScript實作表格篩選功能。首先，我們需要有一份表格資料。下面是一個簡單的例子：<t
