Angular表格神器ui-grid应用详解_网络技术_宿州市腾雀网络科技有限公司

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

发布时间 - 2026-01-11 03:29:10 点击率：次

本文实例为大家分享了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，需要注意数据格式是否符合要求，否则就要先处理好。

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

# Angular # 表格 # ui # grid # angularjs实现table表格td单元格单击变输入框/可编辑状态示例 # AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息) # AngularJS中table表格基本操作示例 # Angular将填入表单的数据渲染到表格的方法 # AngularJS实现表格的增删改查（仅限前端） # 基于angular实现树形二级表格 # 绑定 # 浮生若梦 # 后端 # 需要注意 # 单元格 # 的是 # 注册时间 # 你要 # 可以通过 # 如果没有 # 可以使用 # 要将 # 在上面 # 要先 # 大家分享 # 具体内容 # 能像 # 大家多多 # 查看详情 # 是否符合

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：oracle求字符串长度函数length()和hengthb

下一篇：H5实现仿flash效果的实现代码

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：oracle求字符串长度函数length()和hengthb

下一篇：H5实现仿flash效果的实现代码