AngularJS UI Grid 不需要jquery支持，支持大数据集（10000行+）,可配置,可定制的模板,改变外观和感觉的CSS和定制,排序,过滤,用户交互,分组,编辑,可扩展行,国际化.
User interaction
Virtualization
Column pinning
Edit in place
Expandable rows
Internationalisation
&link rel="stylesheet" type="text/css" href="bower_components/angular-ui-grid/ui-grid.min.css"&
&script src="bower_components/angular-ui-grid/ui-grid.min.js"&
你还未登录，请选登录!
分享HTML我帮您
收款人：邓志锋 luc***@126.com
收款人：向html580网站(**锋)付钱(高手进来研究下撒)如何遍历Ext.grid.EditorGridPanel的每行数据或者如何获取该控件的某列下的可编辑框集合
[问题点数：100分，结帖人qq229]
(高手进来研究下撒)如何遍历Ext.grid.EditorGridPanel的每行数据或者如何获取该控件的某列下的可编辑框集合
[问题点数：100分，结帖人qq229]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2009年12月 Web 开发大版内专家分月排行榜第二
2009年10月 Web 开发大版内专家分月排行榜第三
2009年9月 总版技术专家分月排行榜第一
2009年8月 总版技术专家分月排行榜第二
匿名用户不能发表回复！|使用ng-grid实现可配置的表格 - 为程序员服务
使用ng-grid实现可配置的表格
44732 阅读
使用Angularjs在带来方便的同时，也有一些遗憾：很多基于jquery或其它的组件，在angularjs中需要集成一下才能用得流畅。但是一些比较复杂的组件，集成起来的工作量相当大，比如说grid。
大多数情况下，使用angularjs可以方便地实现简单的表格，甚至点击修改这样的功能也很容易。但是如果还希望增加更多的功能，比如拖动改变列的前后顺序，点击表头排序，拖动列宽度，隐藏某些列时，就不那么容易了。如果还想加上分组的功能，那就十分麻烦了。这时候我们就需要一个与angularjs配合很好的grid组件。
这几天我试用了，它完全是基于angularjs写的，所以可以使用angularjs的思路与它交互。使用感觉还不错，基本功能齐全，与之交互实现需要的效果也很顺畅。我用它简单地实现了一个表格设计器，在这里演示一下。
我实现的功能如下：
指定数据源后，可打开表格设计器，定制每一列的表头，添加删除列，调整列顺序等
可取出调整后的参数，保存在服务器中
在正式使用的表格中，可读取之前设计好的参数，直接使用
因为该项目的文档和示例写得比较好，而且当前还在紧张改进之中，所以我在这里不详细介绍如何使用，主要来演示效果。想使用的朋友可以上项目主页看，有问题在issues里提，作者回复很快很热心。
首先看成品效果
上面的按钮是我自己加的，下面的表格是由ng-grid提供的。可以看到它的外观跟普通的grid差不多，可单选（或多选），可调整宽度及列顺序，点击表头可排序，右上角有个小三角还有一些高级功能：
可在这里搜索（针对所有列），可以显示或者隐藏某列，右边那些小图标点击后会分组：
设计器效果
在上面有一个“配置表格”的按钮，点击后将会出现设计器窗口：
这是一个简单的设计器，它主要用来添加、删除列，改列头，以及调整顺序。左下角是当前已经使用的列，左边是field，对于json数据中某个key，右边是显示在列头的自定义名称；点击每行右边的[-]后，将删除该列；点击左下角的[+]，将会新增一列。
左上角显示的是数据源中的json数据里存在但未被使用的key。点击旁边的[+]后，它就会移到下方。从下方删除后，就会回到上方。
右边是表格预览，我们可以调整列宽以及前后顺序。
可以看出这里调整的都是一些比较基本但又重要的参数，更详细的设置（比如为某列单元格自定义显示模板，配置列排序函数等），还得手动写代码实现。
当调整完成后，下方还有一个“保存”按钮（没在截图上显示），点击后，就会把当前的配置提交到服务器保存起来供使用。
代码写得比较粗糙，因为只是为了检验是否能满足需求，还未细化，仅供参考。
为设计器定义的directive
在js中定义：
// http://angular-ui.github.com/ng-grid/#/api
admin.directive('configureGrid', [ 'JsRoutes', function (JsRoutes) {
restrict: "A",
controller: function ($scope, $element, $attrs, $transclude) {
var params = $scope.$parent.$eval($attrs["configureGrid"]);
$scope.gridId = params.
var dataName = params.dataN
JsRoutes.Directives.getGridOptions.get({
id: $scope.gridId
}, function (options) {
if (options && options.columns) {
$scope.columnDefs = options.
$scope.gridColumns = [];
$scope.configureGridModalShown =
$scope.$parent.configureGrid = function () {
$scope.configureGridModalShown =
$scope.$watch('gridWidth', function (newV) {
$scope.layoutPlugin1.updateGridLayout();
$scope.layoutPlugin1 = new ngGridLayoutPlugin();
$scope.columnDefs = [ ];
$scope.gridOptions = {
data: dataName,
columnDefs: 'columnDefs',
plugins: [$scope.layoutPlugin1]
$scope.$on('ngGridEventColumns', function (newColumns) {
var columns = newColumns.targetScope.
columns = columns.filter(function (col) {
return col.field !== '?';
$scope.gridColumns = columns.map(function (col) {
field: col.field,
displayName: col.displayName,
width: col.width
var total = 0;
$scope.gridColumns.forEach(function (col) {
total += col.
$scope.gridWidth =
$scope.gridWidth = 500;
$scope.$on('')
$scope.getFields = function () {
var data = $scope.$parent[dataName];
if (data && data.length & 0) {
var keys = _.keys(data[0]);
return _.reject(keys, function (key) {
return _.find($scope.columnDefs, function (col) {
return col.field ===
return [];
$scope.addColumn = function (field) {
$scope.columnDefs.push({
field: field,
displayName: field,
width: 100
$scope.removeColumn = function (col) {
$scope.columnDefs = _.reject($scope.columnDefs, function (c) {
return c.field == col.
$scope.$watch(dataName, function (data) {
if (data.length & 0 && $scope.columnDefs.length == 0) {
$scope.getFields().forEach(function (f) {
$scope.addColumn(f);
$scope.saveGridOptions = function () {
JsRoutes.Directives.saveGridOptions.post({
id: $scope.gridId,
columns: $scope.gridColumns
}, function () {
$scope.configureGridModalShown =
}, null, {
postType: 'json'
scope: true,
templateUrl: JsRoutes.Directives.configureGrid.link({format: 'html'})
对应的html代码：
&div id="configure-modal"&
&style type="text/css"&
#configure-modal .modal {
margin-left: -45%;
margin-top: 30
width: 90%;
#configure-modal .modal-body {
max-height:
#configure-modal .fade.in {
&div ui-modal class="fade configure-modal" ng-model="configureGridModalShown"&
#{debug /}
&div class="modal-header"&&h3&定制表格 [{{gridId}}]&/h3&&/div&
&div class="modal-body"&
&table class="table-as-layout"&
&td ui-fixed-width="300"&
&li ng-repeat="field in getFields()"&{{field}}
&a ng-click="addColumn(field)"&[+]&/a&
&li ng-repeat="col in columnDefs"&
&span ng-click="details=!details" style="cursor: pointer"&
&input type="text" class="input input-small" ng-model="col.field" ng-model-onblur/&
- &input type="text" class="input input-small" ng-model="col.displayName" ng-model-onblur/&
&a ng-click="removeColumn(col)"&[-]&/a&
&li&&a ng-click="addColumn('todo')"&[+]&/a&&/li&
&td width="100%"&
&div class="gridStyle" style="width:{{gridWidth}}height:600px" ng-grid="gridOptions"&&/div&
&div class="modal-footer"&
&a class="btn btn-primary" data-dismiss="modal" ng-click="saveGridOptions()"&保存&/a&
&a class="btn" data-dismiss="modal"&关闭&/a&
调用该设计器的代码：
&button class="btn" ng-click="configureGrid()"&
&i class="icon-table"& &/i& 配置表格
&div configure-grid="{id:gridId, dataName: gridDataName}"&
&/div&&script type="text/javascript"&
function Ctrl($scope, JsRoutes, Commons) {
$scope.users = [];
$scope.gridId = 'CAE4701013CAE594B390001';
$scope.gridDataName = 'users';
$scope.columnDefs = [];
$scope.gridOptions = {
data: $scope.gridDataName,
columnDefs: 'columnDefs',
beforeSelectionChange: function (event) {
event.entity.checked = !event.
在页面中使用保存的参数显示表格
Html代码：
&div ng-grid="gridOptions" style="width: 100%;height: 500px"&&/div&
$scope.users = [];
$scope.gridId = 'CAE4701013CAE594B390001';
$scope.gridDataName = 'users';
$scope.columnDefs = [];
$scope.gridOptions = {
data: $scope.gridDataName,
columnDefs: 'columnDefs',
beforeSelectionChange: function (event) {
event.entity.checked = !event.
JsRoutes.Directives.getGridOptions.get({
id: $scope.gridId
}, function (options) {
console.log(options);
if (options && options.columns) {
$scope.columnDefs = options.
注意，以上代码仅供参考思路，里面缺了东西，不能直接运行。另外，ng-grid的代码改得比较快，请注意它的最新文档。
原文地址：, 感谢原作者分享。
您可能感兴趣的代码ng-grid是基于AngularJS和JQuery的富表格控件，由AngularUI Team领衔开发，到目前为止已有2354次Commit，1076个Fork。&
AngualrUI：http://angular-ui.github.io/
ng-grid: http://angular-ui.github.io/ng-grid/
ng-grid(code on Github): https://github.com/angular-ui/ng-grid
入手（官网参照）
1.创建HTML页面和与之相对应的JS，CSS文件
& & ng-index.html
& & js/ng-index.js
& & css/ng-index.css
2.在ng-index.html中添加ng-grid所依赖的JQuery和AngularJS框架。
下载到本地： &
JQuery：http://code.jquery.com/
Angularjs：https://angularjs.org/
在线（进入后选择适合版本）：
JQuery：http://www.bootcdn.cn/jquery/
Angularjs：http://www.bootcdn.cn/angular.js/
3.引入ng-grid的JS和CSS文件
下载到本地：& http://angular-ui.github.io/ng-grid/
在线：http://www.bootcdn.cn/ng-grid/
4.在ng-index.html中添加如下标签。
&div class="gridStyle" ng-grid="gridOptions" /&
?gridStyle: 表格的Style控制，写入ng-index.css中
?gridOptions: ng-index.js中表格所在的Controller的$scope调用赋值（AngularJS数据绑定）
&!DOCTYPE html& &html& &head& &meta charset="UTF-8"& &title&ng-index&/title& &!-- Basic References: JQuery/AngualrJS --& &script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"&&/script& &script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"&&/script& &!-- ng-grid --& &link rel="stylesheet" href="http://cdn.bootcss.com/ng-grid/2.0.11/ng-grid.min.css"/& &script src="http://cdn.bootcss.com/ng-grid/2.0.11/ng-grid.min.js"&&/script& &!--local: ng-index.html --& &script src="js/ng-index.js"&&/script& &link rel="stylesheet" href="css/ng-index.css"/& &/head& &body ng-app="indexApp"& &div id="container" ng-controller="gridCtrl"& &div class="gridStyle" ng-grid="gridOptions" /& &/div& &/body& &/html&
ViewCode(ng-index.html)
5.编写ng-index.css文件
.gridStyle { height:300 }
ViewCode(ng-index.css)
&?HTML页面中表格为div标签，数据在AngularJS中数据绑定到页面中，所以需要指定div标签的高度。
6.编写ng-index.js文件
var indexApp = angular.module('indexApp', ['ngGrid']); indexApp.controller('gridCtrl', function($scope) { $scope.members = [{name: "Moroni", age: 50}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34}]; $scope.gridOptions = { data: 'members' }; });
ViewCode(ng-index.js)
?官网给的例子在用&['ui.grid']是错误的，要改成['ngGrid']，不然Angular初始化不成功。
?将要显示的JSON数据赋值给页面控件的data属性，即可绑定到界面显示。
?表头名称默认显示JSON数据中当字段的字段名称。
7.设置表头显示名称（name&姓名　age&年龄）。
在表格的配置属性中添加columnDefs的配置，详细参照以下代码。
var indexApp = angular.module('indexApp', ['ngGrid']); indexApp.controller('gridCtrl', function($scope) { $scope.members = [{name: "Moroni", age: 50}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34}]; $scope.gridOptions = { data: 'members', columnDefs: [{field: 'name', displayName: '姓名'}, {field:'age', displayName:'年龄'}] }; });
ViewCode(ng-index.js)
Views(...) Comments()没有更多推荐了，
不良信息举报
举报内容：
【AngularJs】ui-grid 使用详解
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！