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 相关文章推荐
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
Vue中CSS动画原理的实现
Feb 13 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
Smarty模板快速入门
2007/01/04 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
python插入排序算法实例分析
2015/07/03 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
python进阶之自定义可迭代的类
2019/08/20 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
职业技术学校毕业生推荐信
2013/12/03 职场文书
大学三年的自我评价
2013/12/25 职场文书
企业文明单位申报材料
2014/05/16 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
公务员政审材料
2014/12/23 职场文书
绵山导游词
2015/02/05 职场文书
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript