六、UI-Grid 结合实例

最新推荐文章于 2023-03-11 15:43:05 发布

西柚叨叨

最新推荐文章于 2023-03-11 15:43:05 发布

阅读量2.1k

点赞数 1

分类专栏： angularjs ui-grid中文api 文章标签： angularjs

原文链接：https://xiyoudaodao.gitee.io/ui-grid/ui-grid-binding-examples/

版权

angularjs ui-grid中文api 专栏收录该内容

35 篇文章 11 订阅

订阅专栏

原文：106 Binding examples
UI-Grid支持在colDef.field的复杂对象绑定。

本教程显示了具有特殊字符、数组元素、嵌套属性和函数的属性的双向绑定。

注意函数不能编辑。

在自定义cellTemplates中可以使用：
COL_FIELD 将取代表格中单元格的值。cellTemplates可以使用在所有允许MODEL_COL_FIELD 取代表格中单元格的值的地方。使用MODEL_COL_FIELD 需要 ng-model=‘field’。

代码：
index.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="grid1" ui-grid="gridOptions" ui-grid-edit class="grid"></div>
    </div>
  </body>
</html>

main.css

.grid {
  width: 500px;
  height: 250px;
}

app.js

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']);
 
app.controller('MainCtrl', ['$scope', function ($scope) {
 
$scope.gridOptions = {
        enableSorting: true,
        columnDefs: [
          { name:'firstName', field: 'first-name' },
          { name:'1stFriend', field: 'friends[0]' },
          { name:'city', field: 'address.city'},
          { name:'getZip', field: 'getZip()', enableCellEdit:false}
        ],
        data : [      {
                           "first-name": "Cox",
                           "friends": ["friend0"],
                           "address": {street:"301 Dove Ave", city:"Laurel", zip:"39565"},
                           "getZip" : function() {return this.address.zip;}
                       }
                   ]
      };
 
}]);

Demo
这里写图片描述

文章来源：西柚叨叨的个人博客

西柚叨叨

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
六、UI-Grid 结合实例

原文：106 Binding examples UI-Grid支持在colDef.field的复杂对象绑定。本教程显示了具有特殊字符、数组元素、嵌套属性和函数的属性的双向绑定。注意函数不能编辑。在自定义cellTemplates中可以使用： COL_FIELD 将取代表格中单元格的值。cellTemplates可以使用在所有允许MODEL_COL_FIELD 取代表格中单元格的值的地方。使用MO
复制链接

扫一扫