MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » Angular报表神器“ui-grid”的应用

Angular报表神器“ui-grid”的应用

www.MyException.Cn  网友分享于:2013-10-27  浏览:0次
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 ui-grid-edit></div></div>
    </div>
  </body>
</html>

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

 

依赖注入

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.resizeColumns', 'ui.grid.moveColumns', 'ui.grid.edit', 'ui.grid.pagination']);

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

i18nService.setCurrentLang("zh-cn");
        $scope.gridOptions = {
            enableSorting: true,

          //编辑完成后执行事件

          onRegisterApi: function (gridApi) {
              $scope.gridApi = gridApi;
              $scope.gridApi.edit.on.afterCellEdit($scope, function (rowEntity) {
              //编辑离开事件
              $http.post('/manage/api/dictionary/update', {
              "accountName": rowEntity.accountName,
              "userName": rowEntity.userName,
              "unitName": rowEntity.unitName,
               })
                  .success(function (data) {
                     if (data.meta.success) {
                         alert('修改成功');
                     } else {
                     alert(data.meta.message);
                     }
               })
                   .error(function () {
                     toastr.warning("服务器出错,无法获取数据");
                   });
               });
              },


            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
}
       ]

}]);
效果如下:

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.edit ----> var app = angular.module('app', ['ui.grid.edit']); 添加指令ui-grid-edit到表格的<div>标签中
列定义columnDefs中添加
enableCellEdit: true ----> columnDefs: [{field: 'dictionaryId', enableCellEdit: true, width: 150}]
单元格可编辑了,那编辑后的数据怎么提交到后台?
$scope.gridOptions = {}对象中添加该属性
  onRegisterApi: function (gridApi) {
              $scope.gridApi = gridApi;
              $scope.gridApi.edit.on.afterCellEdit($scope, function (rowEntity) {//编辑完成后执行});
}
具体参考代码。




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

文章评论

Java程序员必看电影
Java程序员必看电影
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
10个调试和排错的小建议
10个调试和排错的小建议
旅行,写作,编程
旅行,写作,编程
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
为什么程序员都是夜猫子
为什么程序员都是夜猫子
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
漫画:程序员的工作
漫画:程序员的工作
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
每天工作4小时的程序员
每天工作4小时的程序员
代码女神横空出世
代码女神横空出世
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
编程语言是女人
编程语言是女人
总结2014中国互联网十大段子
总结2014中国互联网十大段子
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
中美印日四国程序员比较
中美印日四国程序员比较
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
老程序员的下场
老程序员的下场
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
程序员都该阅读的书
程序员都该阅读的书
 程序员的样子
程序员的样子
程序员应该关注的一些事儿
程序员应该关注的一些事儿
鲜为人知的编程真相
鲜为人知的编程真相
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
程序员的鄙视链
程序员的鄙视链
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
那些争议最大的编程观点
那些争议最大的编程观点
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员必看的十大电影
程序员必看的十大电影
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
我的丈夫是个程序员
我的丈夫是个程序员
程序员和编码员之间的区别
程序员和编码员之间的区别
一个程序员的时间管理
一个程序员的时间管理
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有