ng-table 简单实例
今天用的AngularJs需要做个分页，于是用ng-table去实现，不过这个官网感觉有点坑，说的不够清楚。
下面实现了一个Demo实力，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../../resources/ng-table/ng-table.min.css">
<link rel="stylesheet" href="../../resources/ng-table/bootstrap.min.css">
<script src="../../resources/ng-table/lodash.min.js"></script>
<script src="../../resources/ng-table/jquery-2.2.4.js"></script>
<script src="../../resources/ng-table/angular.js"></script>
<script src="../../resources/ng-table/ng-table.js"></script>
<style>
.demoTable td:last-child {
min-width: 90px;
}
/** Editable table
------------------------- */
.editable-table > tbody > tr > td {
padding: 4px
}
.editable-text {
padding-left: 4px;
padding-top: 4px;
padding-bottom: 4px;
display: inline-block;
}
.editable-table tbody > tr > td > .controls {
//width: 100%
}
.editable-input {
padding-left: 3px;
}
.editable-input.input-sm {
height: 30px;
font-size: 14px;
padding-top: 4px;
padding-bottom: 4px;
}
</style>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="demoController as demo">
<h2 class="page-header">Loading data - managed array</h2>
<div class="bs-callout bs-callout-info">
<h4>Overview</h4>
<p>When you have the <em>entire</em> dataset available in-memory you can hand this to <code>NgTableParams</code> to manage the filtering, sorting and paging of that array</p>
</div>
<table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="row in $data" ng-form="rowForm" demo-tracked-table-row="row">
<td title="'Name'" filter="{name: 'text'}" sortable="'name'" ng-switch="row.isEditing" ng-class="name.$dirty ? 'bg-warning' : ''" ng-form="name" demo-tracked-table-cell>
<span ng-switch-default class="editable-text">{{row.name}}</span>
<div class="controls" ng-class="name.$invalid && name.$dirty ? 'has-error' : ''" ng-switch-when="true">
<input type="text" name="name" ng-model="row.name" class="editable-input form-control input-sm" required />
</div>
</td>
<td title="'Age'" filter="{age: 'number'}" sortable="'age'" ng-switch="row.isEditing" ng-class="age.$dirty ? 'bg-warning' : ''" ng-form="age" demo-tracked-table-cell>
<span ng-switch-default class="editable-text">{{row.age}}</span>
<div class="controls" ng-class="age.$invalid && age.$dirty ? 'has-error' : ''" ng-switch-when="true">
<input type="number" name="age" ng-model="row.age" class="editable-input form-control input-sm" required/>
</div>
</td>
<td title="'Money'" filter="{money: 'number'}" sortable="'money'" ng-switch="row.isEditing" ng-class="money.$dirty ? 'bg-warning' : ''" ng-form="money" demo-tracked-table-cell>
<span ng-switch-default class="editable-text">{{row.money}}</span>
<div class="controls" ng-class="money.$invalid && money.$dirty ? 'has-error' : ''" ng-switch-when="true">
<input type="number" name="money" ng-model="row.money" class="editable-input form-control input-sm" required/>
</div>
</td>
<!--<td data-title="'Name'" filter="{name: 'text'}" sortable="'name'">{{row.name}}</td>-->
<!--<td data-title="'Age'" filter="{age: 'number'}" sortable="'age'">{{row.age}}</td>-->
<!--<td data-title="'Money'" filter="{money: 'number'}" sortable="'money'">{{row.money}}</td>-->
<td>
<button class="btn btn-primary btn-sm" ng-click="demo.save(row, rowForm)" ng-if="row.isEditing" ng-disabled="rowForm.$pristine || rowForm.$invalid"><span class="glyphicon glyphicon-ok"></span></button>
<button class="btn btn-default btn-sm" ng-click="demo.cancel(row, rowForm)" ng-if="row.isEditing"><span class="glyphicon glyphicon-remove"></span></button>
<button class="btn btn-default btn-sm" ng-click="row.isEditing = true" ng-if="!row.isEditing"><span class="glyphicon glyphicon-pencil"></span></button>
<button class="btn btn-danger btn-sm" ng-click="demo.del(row)" ng-if="!row.isEditing"><span class="glyphicon glyphicon-trash"></span></button>
</td>
</tr>
</table>
</div>
</div>
<script>
(function() {
"use strict"; var app = angular.module("myApp", ["ngTable"]); app.controller("demoController", demoController);
// demoController.$inject = ["NgTableParams", "ngTableSimpleList"]; var data = [
{name: "Moroni", age: 16, money: 88.1},
{name: "Enos", age: 99, money: 22.3},
{name: "Tracy", age: 2, money: 22.4},
{name: "Oracle", age: 31, money: 33.3},
{name: "Java", age: 13, money: 53.3},
{name: "Php", age: 46, money: 67.3}
]; function demoController(NgTableParams,$http,$scope) {
var self = this;
self.tableParams = new NgTableParams({}, {
filterDelay: 0,
dataset: data
});
self.cancel = cancel;
self.del = del;
self.save = save;
function cancel(row, rowForm) {
var originalRow = resetRow(row, rowForm);
angular.extend(row, originalRow);
} function del(row) {
_.remove(self.tableParams.settings().dataset, function(item) {
return row === item;
});
self.tableParams.reload().then(function(data) {
if (data.length === 0 && self.tableParams.total() > 0) {
self.tableParams.page(self.tableParams.page() - 1);
self.tableParams.reload();
}
});
} function resetRow(row, rowForm){
row.isEditing = false;
rowForm.$setPristine();
self.tableTracker.untrack(row);
return _.findWhere(originalData, function(r){
return r.id === row.id;
});
} function save(row, rowForm) {
var originalRow = resetRow(row, rowForm);
angular.extend(originalRow, row);
}
}
})();
</script>
</body>
</html>
页面的效果：
ng-table="demo.tableParams" 的demo不能去掉，改用官网的第一个例子vm.tableParams也不行的。 这里只是一个简单的测试，等有进一步的了解再记录。
ng-table 简单实例的更多相关文章
- Hibernate(二)__简单实例入门
首先我们进一步理解什么是对象关系映射模型? 它将对数据库中数据的处理转化为对对象的处理.如下图所示: 入门简单实例: hiberante 可以用在 j2se 项目,也可以用在 j2ee (web项目中 ...
- 利用navicat创建存储过程、触发器和使用游标的简单实例
利用navicat创建存储过程.触发器和使用游标的简单实例 标签: navicat存储过程触发器mysql游标 2013-08-03 21:34 15516人阅读 评论(1) 收藏 举报 分类: 数 ...
- Flume概述和简单实例
Flume概述 Flume是一个分布式.可靠.和高可用的海量日志采集.聚合和传输的系统.支持在日志系统中定制各类数据发送方,用于收集数据;同时,Flume提供对数据进行简单处理,并写到各种数据接受方( ...
- （Hibernate进阶）Hibernate搭建开发环境+简单实例（二）
hibernate是非常典型的持久层框架,持久化的思想是非常值得我们学习和研究的.这篇博文,我们主要以实例的形式学习Hibernate,不深究Hibernate的思想和原理,否则,一味追求,苦学思想和 ...
- Hibernate笔记——第一个简单实例
1. 首先进行框架配置 导包 hibernate配置xml文件 ======================= 2. 创建并配置POJO类 Hibernate是操作持久化层的框架,和数据库打交道,其 ...
- SignalR代理对象异常：Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序
SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 异常汇总:http://www ...
- MySQL 触发器简单实例 - 转载
MySQL 触发器简单实例 触发器:可以更新,删除,插入触发器,不同种类的触发器可以存在于同一个表,但同种类的不能有多个.一个更新.一个删除是可以共存的. ~~语法~~ CREATE TRIGGER ...
- 【SSH进阶之路】Hibernate搭建开发环境+简单实例（二）
Hibernate是很典型的持久层框架,持久化的思想是很值得我们学习和研究的.这篇博文,我们主要以实例的形式学习Hibernate,不深究Hibernate的思想和原理,否则,一味追求,苦学思想和原理 ...
- Hibernate 最简单实例
我从网上下载了 hibernate-release-4.3.0.Final.zip,解压缩,把/lib/required文件夹下的所有jar包加入到eclipse项目中的Referenced Libr ...
- TERSUS无代码开发(笔记05)-简单实例电脑端页面设计
案例笔记电脑端页面设计 1.新建项目(请假管理qjgl) 2.开发软件界面介绍(常用的功能按键) 3.目录中显示元件对象 4.对元件对象的操作主要方式是双击(双击哪个元件, ...
随机推荐
- DOM编程的性能问题
用脚本进行DOM操作的代价很昂贵,它是富Web应用中最常见的性能瓶颈. 浏览器中的DOM:天生就慢 DOM(文档对象模型)是独立于语言的,但在浏览器中的接口是用JavaScript实现的.两个相互独立 ...
- PowerShell Notes
1. 概要 - PowerShell 是cmdlet(command-let)的指令集合,类似unix的bash. - IDE: Windows PowerShell ISE,不区分大小写,可以用命 ...
- Java集合之ArrayList
ArrayList ArrayList是最常见以及每个Java开发者最熟悉的集合类了,顾名思义,ArrayList就是一个以数组形式实现的集合,以一张表格来看一下ArrayList里面有哪些基本的元素 ...
- linux下安装postgresql
环境:Linux localhost.localdomain 2.6.32-431 GNU/Linux x86_64 Postgresql版本:postgresql.9.5.3 添加开启自启设置:ht ...
- Apache流处理框架对比
分布式流处理,类似于MapReduce这样的通用计算模型,但是却要求它能够在毫秒级别或者秒级别完成响应.这些系统可以用DAG表示流处理的拓扑. Points of Interest 在比较不同系统是, ...
- 如何基于Azure平台实现MySQL HA（方法论篇）
我们都知道,相较于传统的数据中心,Pulic cloud也有劣势,比如说数据库的HA,很多熟悉公有云平台的读者都知道,因为出于安全性性考虑以及一些技术条件的限制,很多本地数据中心的mysql HA方法 ...
- PHP与MYSQL事务处理
/*MYSQL的事务处理主要有两种方法.1.用begin,rollback,commit来实现begin 开始一个事务rollback 事务回滚commit 事务确认2.直接用set来改变mysql的 ...
- Python爬虫利器三之Xpath语法与lxml库的用法
前面我们介绍了 BeautifulSoup 的用法,这个已经是非常强大的库了,不过还有一些比较流行的解析库,例如 lxml,使用的是 Xpath 语法,同样是效率比较高的解析方法.如果大家对 Beau ...
- Git 如何只更新项目中某个目录里的文件
Git由于在远端和本地都有一个代码库, 这样更新单个文件比SVN要麻烦一点. 1. 如果想拿远端git服务器上的最新版本(或某个特定版本)覆盖本地的修改,可以使用git pull命令, 但这会 ...
- Android Studio导入第三方类库的方法
Android Studio导入第三方类库的方法 本人也刚刚开始尝试做android app的开发,听说android studio是Google支持的android 应用开发工具,所以想应该肯定比E ...