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.对元件对象的操作主要方式是双击(双击哪个元件, ...

随机推荐

thinkphp修改和删除数据
1.在控制器MainController里面写一个方法,调用Nation表中的数据. public function zhuyemian() { $n = D("Nation"); ...
Forward+
http://aras-p.info/blog/2012/03/02/2012-theory-for-forward-rendering/ http://www.slideshare.net/taka ...
TransMac Win系统下制作 OS X启动盘图文教程超详细小白版
1软件安装好后把准备好的8G或者8G以上U盘插到电脑上:右键以管理员身份运行如 <ignore_js_op> 2打开软件后右键先格式化U盘操作如下图 ...
RabbitMQ学习系列（四）: 几种Exchange 模式
上一篇,讲了RabbitMQ的具体用法,可以看看这篇文章:RabbitMQ学习系列(三): C# 如何使用 RabbitMQ.今天说些理论的东西,Exchange 的几种模式. AMQP协议中的核心思 ...
SpringMVC拦截器的使用
SpringMVC 中的Interceptor 拦截器也是相当重要和相当有用的,它的主要作用是拦截用户的请求并进行相应的处理.比如通过它来进行权限验证,或者是来判断用户是否登陆,或者是像12306 那 ...
截取UTF-8编码的汉字，最后一个字出现乱码的问题
问题描述原来字串内容name为下面内容: ######name=杨乃文做DJ,微信公众号FunRadio.什么样的姿态是小丑姿态?2016046###### 需要截取成大小为64的name_rm[6 ...
关于node的http模块
var http = require('http'); /** * 创建服务器的两种写法,第一种写法如下 * 由于server已经继承了EventEmitter的事件功能,所以可以使用高级函数编写方式 ...
easyui如何动态改变列的编辑属性
动态改变列的编辑属性 var tt=$('#dg').datagrid('getColumnOption', 'yearContent'); //通过列名获得此列 tt.editor={type:'t ...
Oracle函数组的使用
--1.组函数--COUNT():用来统计记录的条数如果没有记录,返回 0--COUNT函数可以根据一列或多列进行计算,没有排重功能--统计EMP表一共有多少条记录select count(empn ...
ASP.Net 打通服务器代码和前台界面的特殊符号
1.<% %>用来绑定后台代码如: < % ;i<;i++) { Reaponse.Write(i.ToString()); } %> 2.<%# %> 是 ...

ng-table 简单实例

ng-table 简单实例的更多相关文章

随机推荐

热门专题