Rumah >hujung hadapan web >html tutorial >Angular表格工具“ui-grid”的应用

Angular表格工具“ui-grid”的应用

一个新手asal: 2017-10-02 19:42:361868semak imbas

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>
    <p ng-controller="MainCtrl">
      <p id="user-grid" ui-grid="gridOptions" class="user-grid" ui-grid-resize-columns></p></p>
    </p>
  </body></html>

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

Jvar app = angular.module('app', ['ngTouch', 'ui.grid']);

{roleName:&#39;后端&#39;,&#39;roleId&#39;:3}],
             &#39;accountId&#39;:201

{roleName:&#39;后端&#39;,&#39;roleId&#39;:3}],
             &#39;accountId&#39;:201
          }

       ]

}]);

效果如下：

ui-grid使用中文:i18nService.setCurrentLang("zh-cn");
设置ui-grid格式:通过html中的ui-grid=&#39;gridOptions&#39; (gridOptions可以自己定义) 再通过$scope.gridOptions来绑定
在上面的代码中：
enableSorting:定义是否排序
对于列的定义columnDefs中：
field就是表格数据$scope.gridOptions.data中的字段，
displayName就是显示在表格中的显示的列项名，如果没有定义，那么显示的就是field的名称
可以使用，单元格定义的html中如果要绑定函数，并不能像angular常规的来绑定，需要在绑定的函数前加上“grid.appScope”，比如“grid.appScope.func()”
ui-grid如果要将某行的某个数据传入函数中需要使用这样的形式：“row.entity.createTime”，creatTime就是你要传入的参数的名称（对应于“field”）
表格的数据可以通过请求后端接口来获取，赋值给$scope.gridOptions.data，需要注意数据格式是否符合要求，否则就要先处理好。

Atas ialah kandungan terperinci Angular表格工具“ui-grid”的应用 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：从输入 URL 到页面加载完成的过程是什么样的Artikel seterusnya：有关单页应用的体验问题

Artikel berkaitan

Lihat lagi