Jadual angularjs ng-table digunakan dalam projek, yang mempunyai fungsi yang sangat berkuasa, seperti carian, isihan, kotak semak, halaman, bilangan jadual yang dipaparkan pada setiap halaman, dsb. Untuk API, demo dan sebagainya, anda hanya boleh merujuk kepada laman web rasmi. Buat catatan di sini, saya pasti akan menggunakannya suatu hari nanti.
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;
});
data 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"
}]
Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.
css怎么去掉表格重复的边框Sep 29, 2021 pm 06:05 PM在css中，可以使用border-collapse属性来去掉表格中重复的边框，该属性可以设置表格边框是折叠为单一边框还是分开的，只需要将值设置为collapse即可把重叠的边框合并在一起，成为一个边框，实现单线边框的效果。
表格有一条虚线外打印不到怎么办Mar 28, 2023 am 11:38 AM表格有一条虚线外打印不到的解决办法：1、打开excel文件，在打开的页面中点击“打印”；2、在预览页找到“无缩放”，选择调整为一页；3、选择打印机打印文档即可。
使用JavaScript实现表格筛选功能Aug 10, 2023 pm 09:51 PM使用JavaScript实现表格筛选功能随着互联网技术的不断发展，表格成为了网页中常见的展示数据的方式。然而，当数据量庞大时，用户往往会面临找到特定数据的困难。因此，为表格添加筛选功能，让用户可以快速找到所需的数据，成为了很多网页设计的需求。本文将介绍如何使用JavaScript实现表格筛选功能。首先，我们需要有一份表格数据。下面是一个简单的例子：<t
Vue文档中的表格勾选和全选函数操作方法Jun 20, 2023 pm 10:33 PMVue是一种流行的JavaScript框架，它可以让开发人员轻松地构建交互式、响应式的Web界面。Vue框架提供了一系列的组件和指令，用于构建常见的页面元素，如表格、表单、菜单等。在这篇文章中，我们将探讨Vue文档中的表格勾选和全选函数操作方法。在Vue中，我们可以使用v-model指令将表单元素与Vue实例中的数据进行双向绑定。这使得我们可以轻松地收集用户
React中使用表格：第一部分Sep 04, 2023 pm 07:21 PM用于呈现数据的最常见的用户界面元素之一是表格。事实证明，使用表格时需要控制很多方面，例如：定义列和标题各种单元格格式（文本、数字、复选框）调整大小过滤动态成长样式在这个由两部分组成的系列中，您将了解使用ReactBootstrapTable组件在React中处理表格数据的细节。您将能够轻松创建复杂且具有专业外观的表格，并且能够自定义各个方面。开始使用 首先，您应该熟悉React本身。如果您需要React入门知识，EnvatoTuts+有一个很棒的系列可以帮助您开始使用React。在本教程中，我们
使用JavaScript实现表格数据的分页显示Jun 16, 2023 am 10:00 AM随着数据的不断增长，表格显示变得更加困难。大多数情况下，表格中的数据量过大，导致表格在加载时变得缓慢，而且用户需要不断地浏览页面才能找到自己想要的数据。本文将介绍如何使用JavaScript实现表格数据的分页显示，让用户更容易找到自己想要的数据。一、动态创建表格为了使分页功能更加可控，需要动态创建表格。在HTML页面中，添加一个类似于下面的table元素。
wps表格如何按成绩高低排序Jun 21, 2023 am 09:30 AMwps表格按成绩高低排序的方法：1、打开wps表格，点击菜单栏中的“开始”按钮；2、点击工具栏中的“排序”选项；3、在下拉菜单中点击“降序”选项；4、在“给出排序依据”下点击“扩展选定区域”，然后点击“排序”按钮即可按成绩高低排序。
在Excel表格中输入身份证号码为什么会变Mar 10, 2023 am 11:14 AM原因：身份证号属于数字串，若直接输入，Excel就会认为它是一个数值型数据；而当数据的位数超过11位后，常规格式下的Excel就会将其记为科学记数法，当位数超过15位后，Excel则只将其精确至15位，后面位数的数值就全为0。解决方法：1、点击身份证号所在的单元格；2、在单元格上点击鼠标右键，选择“设置单元格式”；3、点击“数字”选项卡，从分类列表里选中“文本”，点击“确定”。
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa
SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
