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

2024-12-12 05:41:27

本文实例为大家分享了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:使列可以改变宽度，像这样:

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

}]);

效果如下：

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，需要注意数据格式是否符合要求，否则就要先处理好。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

详解AngularJS中的表格使用

表格数据本质上通常是重复的.ng-repeat指令,可以用来方便地绘制表格.下面的示例说明使用ng-repeat指令来绘制表格. <table> <tr> <th>Name</th> <th>Marks</th> </tr> <tr ng-repeat="subject in student.subjects"> <td>{{ subject.name }}</td>
最棒的Angular2表格控件

现在市面上有大量的JavaScript数据表格控件,包括开源的第三方的和自产自销的.可以说Wijmo的Flexgrid是目前适应Angular 2的最好的表格控件. Angular 2数据表格基本要求: 更小.更快.更熟悉. 为了使用Angular 2表格,首先你需要了解表格的基本要求.FlexGrid开始于1996年,当时使用C++为Visual Basic编写的控件.多年来,它不断进化并在多个平台得到完善,尤其是JavaScript平台.FlexGrid 因为Flex的理念而命名,控件应当包
Angular.js与Bootstrap相结合实现表格分页代码

先给大家简单介绍angular.js和bootstrap基本概念. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HTML. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 最近一直学习Angular.js,在学习过程
AngularJS实现表格的增删改查（仅限前端）

用AngularJS实现对表格的增删改查(仅限前端),具体代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实现表格的增删改查</title> <meta http-equiv="keywords" content="keyword1,keyword2,keywo
详解angular ui-grid之过滤器设置

之前关于angular ui-grid过滤器设置,最近需要回顾,就顺便发到随笔上了 var app = angular.module('app', ['ui.grid', 'ui.grid.edit']); app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { $scope.gridOptions = { columnDefs: [ { field: 'name' }, { field: 'amount
angularjs表格ng-table使用备忘录

项目中用到angularjs的表格ng-table,功能相当强大,像搜索.排序.checkbox.分页.每页表格显示数目等都有.API,demo什么的也只能参考官网了.这里做个备忘,哪天肯定还会用到. HTML: <!DOCTYPE html> <html> <meta charset="utf-8"/> <head> <script data-require="angular.js@*" data-semver
浅析angularJS中的ui-router和ng-grid模块

在家里闲着无聊,正好在网上找到了一个关于angular的教程,学习了一下angular的ui-router和ng-grid这两个模块,顺便模仿着做了一个小小的东西. 代码已经上传到github上,地址在这里哟https://github.com/wwervin72/Angular. 有兴趣的小伙伴可以看看.那么然后这里我们就先来了解一下这两个模块的用法. 我们先来说说ui-router这个模块,这个模块主要是用来实现深层次的路由的.其实angular有个内置的指令ng-route,如果在项目中没
使用angularjs创建简单表格

初步接手人生的第一个项目,需要用angularjs制作表格和实现各种功能,因此遇到了各种问题和以前不熟悉的知识点,在此记录下来,以供大家学习交流,解决方式可能并不完善或符合规范,如果大家有更好的方式欢迎指出,由于这个表格功能的制作是一点点添加上去的,因此我也分成几个部分介绍,日后如增加了新的功能也会不时更新的首先,表格采用的是BootStrap样式编辑的,主要使用的是angularjs,为了方便也有jQuery的方法,在测试时需自行引入bootstrap,angularjs和jq的文件. 正文
如何用angularjs制作一个完整的表格

由于本人也是边学边写,因此整理的比较乱,下面放出我例子的完整代码,方便大家交流测试,如有问题欢迎评论首先,表格采用的是BootStrap样式编辑的,主要使用的是angularjs,为了方便也有jQuery的方法,在测试时需自行引入bootstrap,angularjs和jq的文件. 整体代码预览: HTML: <!DOCTYPE html> <html lang="en" ng-app="myModule"> <head> //
angularjs表格分页功能详解

接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的. <div class="pagination"> <ul style="float:right"> <li id="previous"><a href=""

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

相关推荐

随机推荐