Angular表格神器ui-grid应用详解


Posted in Javascript onSeptember 29, 2017

本文实例为大家分享了Angular表格神器ui-grid的具体代码,供大家参考,具体内容如下

HTML:  (代码仅用于解释得更清楚,并未完全展示)

<!doctype html>
<html ng-app="app">
 <head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
  <script src="/release/ui-grid.js"></script>
  <script src="/release/ui-grid.css"></script>
  <script src="app.js"></script>
 </head>
 <body>
  <div ng-controller="MainCtrl">
   <div id="user-grid" ui-grid="gridOptions" class="user-grid" ui-grid-resize-columns></div></div>
  </div>
 </body>
</html>

ui-grid-resize-columns:使列可以改变宽度,像这样:

Angular表格神器ui-grid应用详解

 Jvar app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', function ($scope) {

i18nService.setCurrentLang("zh-cn");
    $scope.gridOptions = {
      enableSorting: true,
      columnDefs: [
        {field: 'accountName', displayName:'手机号', width: 200},
        {field: 'userName', displayName:'用户名', width: 100},
        {field: 'unitName', displayName:'单位', width: 300},
        {
          field: 'createTime', displayName: '注册时间', width: 200,
          cellTemplate: '<div class="ui-grid-cell-contents"><span ng-bind="grid.appScope.rDateFormat(row.entity.createTime)"></span></div>'
        },
        {
          field: 'roleList', displayName: '类型', width: 200,
          cellTemplate: '<div class="ui-grid-cell-contents"><span ng-repeat="item in row.entity.roleList" style="margin-right:5px;">{{item.roleName}}</span></div>'
        },
        {
          field: 'accountId', displayName: '详细信息', width: 200,
          cellTemplate: '<div class="ui-grid-cell-contents">
                   <button type="button" 
                       ng-click="grid.appScope.showAccountDetail(row.entity.roleList, row.entity.accountId)"
                       style="line-height: normal" class="btn-primary btn">查看详情</button></div>'
        }
      ]
    }; 
    $scope.gridOptions.data = [
     {
       'accountName':'15555555555',
       'userName':'浮生若梦',
       'unitName':'无',
       'createTime':1506661676435,
       'roleList':[{roleName:'前端','roleId':2},{roleName:'后端','roleId':3}],
       'accountId':201
     },
     {
       'accountName':'15555555555',
       'userName':'浮生若梦',
       'unitName':'无',
       'createTime':1506661676435,
       'roleList':[{roleName:'前端','roleId':2},{roleName:'后端','roleId':3}],
       'accountId':201
     }
    ]

}]);

效果如下:

Angular表格神器ui-grid应用详解

ui-grid使用中文:i18nService.setCurrentLang("zh-cn");

设置ui-grid格式:通过html中的ui-grid='gridOptions' (gridOptions可以自己定义) 再通过$scope.gridOptions来绑定

在上面的代码中:

enableSorting:定义是否排序
对于列的定义columnDefs中:
field就是表格数据$scope.gridOptions.data中的字段,
displayName就是显示在表格中的显示的列项名,如果没有定义,那么显示的就是field的名称

ui-grid怎么单独定义一个单元格的样式?比如做成一个按钮。

可以使用cellTemplate属性,但是需要注意的是,单元格定义的html中如果要绑定函数,并不能像angular常规的来绑定,需要在绑定的函数前加上“grid.appScope”,比如“grid.appScope.func()”
ui-grid如果要将某行的某个数据传入函数中需要使用这样的形式:“row.entity.createTime”,creatTime就是你要传入的参数的名称(对应于“field”)
表格的数据可以通过请求后端接口来获取,赋值给$scope.gridOptions.data,需要注意数据格式是否符合要求,否则就要先处理好。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
通过js随机函数Math.random实现乱序
May 19 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 Javascript
javascript 缓冲运动框架的实现
Sep 29 #Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 #Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 #Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 #Javascript
微信小程序之选项卡的实现方法
Sep 29 #Javascript
vue-cli的eslint相关用法
Sep 29 #Javascript
JavaScript数组的5种迭代方法
Sep 29 #Javascript
You might like
PHP4实际应用经验篇(5)
2006/10/09 PHP
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
python3.x实现base64加密和解密
2019/03/28 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
博士生专家推荐信
2014/09/26 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
在校学生证明格式
2015/06/24 职场文书