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 继承详解(二)
Jul 13 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
js文字横向滚动特效
Nov 11 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
微信小程序APP的生命周期及页面的生命周期
Apr 19 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
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
PHP会话处理的10个函数
2015/08/11 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
angular 服务随记小结
2019/05/06 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
Python中subprocess模块用法实例详解
2015/05/20 Python
python实现逻辑回归的方法示例
2017/05/02 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
python3 使用traceback定位异常实例
2020/03/09 Python
Python日志处理模块logging用法解析
2020/05/19 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
零件设计自荐信范文
2013/11/27 职场文书
交通文明倡议书
2014/05/16 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
村官个人总结范文
2015/03/03 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android