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 面向对象编程基础 多态
Aug 21 Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 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
php5.5中类级别的常量使用介绍
2013/10/02 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
PHP写日志的实现方法
2014/11/05 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
windows环境下tensorflow安装过程详解
2018/03/30 Python
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
长辈证婚人证婚词
2014/01/09 职场文书
暑假家长评语大全
2014/04/17 职场文书
怀念母亲教学反思
2014/04/28 职场文书
法制宣传日活动总结
2014/04/29 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
节能减耗标语
2014/06/21 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python