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>
<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:'后端','roleId':3}],
'accountId':201{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的名称
可以使用，单元格定义的html中如果要绑定函数，并不能像angular常规的来绑定，需要在绑定的函数前加上“grid.appScope”，比如“grid.appScope.func()”
ui-grid如果要将某行的某个数据传入函数中需要使用这样的形式：“row.entity.createTime”，creatTime就是你要传入的参数的名称（对应于“field”）
表格的数据可以通过请求后端接口来获取，赋值给$scope.gridOptions.data，需要注意数据格式是否符合要求，否则就要先处理好。以上是Angular表格工具「ui-grid」的應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何在iPhone中撤銷從主畫面中刪除
Apr 17, 2024 pm 07:37 PM
從主畫面中刪除了重要內容並試圖將其取回？您可以透過多種方式將應用程式圖示放回螢幕。我們已經討論了您可以遵循的所有方法，並將應用程式圖示放回主畫面如何在iPhone中撤消從主畫面中刪除正如我們之前提到的，有幾種方法可以在iPhone上恢復此變更。方法1–替換應用程式庫中的應用程式圖示您可以直接從應用程式庫將應用程式圖示放置在主畫面上。步驟1–橫向滑動以尋找應用程式庫中的所有應用程式。步驟2–找到您先前刪除的應用程式圖示。步驟3–只需將應用程式圖示從主庫拖曳到主畫面上的正確位置即可。這是將應用程式圖
PHP中箭頭符號的作用及實作應用
Mar 22, 2024 am 11:30 AM
PHP中箭頭符號的作用及實踐應用在PHP中，箭頭符號（->）通常用於存取物件的屬性和方法。物件是PHP中物件導向程式設計（OOP）的基本概念之一，在實際開發中，箭頭符號在操作物件時發揮重要作用。本文將介紹箭頭符號的作用以及實踐應用，並提供具體的程式碼範例來幫助讀者更好地理解。一、箭頭符號的作用存取物件的屬性箭頭符號可以用來存取物件的屬性。當我們實例化一個對
如何在Ubuntu 24.04上安裝Angular
Mar 23, 2024 pm 12:20 PM
Angular.js是一種可自由存取的JavaScript平台，用於建立動態應用程式。它允許您透過擴展HTML的語法作為模板語言，以快速、清晰地表示應用程式的各個方面。 Angular.js提供了一系列工具，可協助您編寫、更新和測試程式碼。此外，它還提供了許多功能，如路由和表單管理。本指南將討論在Ubuntu24上安裝Angular的方法。首先，您需要安裝Node.js。 Node.js是一個基於ChromeV8引擎的JavaScript運行環境，可讓您在伺服器端執行JavaScript程式碼。要在Ub
從入門到精通：探索Linux tee命令的各種應用場景
Mar 20, 2024 am 10:00 AM
Linuxtee命令是一個非常有用的命令列工具，它可以在不影響已有輸出的情況下，將輸出寫入檔案或將輸出送到另一個命令。在本文中，我們將深入探索Linuxtee命令的各種應用場景，從入門到精通。 1.基本用法首先，我們來看看tee指令的基本用法。 tee指令的語法如下：tee[OPTION]...[FILE]...該指令會從標準輸入讀取數據，並將數據
Angular元件及其顯示屬性：了解非block預設值
Mar 15, 2024 pm 04:51 PM
Angular框架中元件的預設顯示行為不是區塊級元素。這種設計選擇促進了元件樣式的封裝，並鼓勵開發人員有意識地定義每個元件的顯示方式。透過明確設定CSS屬性 display，Angular組件的顯示可以完全控制，從而實現所需的佈局和響應能力。
探索Go語言的優勢及應用場景
Mar 27, 2024 pm 03:48 PM
Go語言是一種由Google開發的開源程式語言，於2007年首次發布。它被設計成一種簡單易學、高效、並發性強的語言，受到越來越多開發者的青睞。本文將探討Go語言的優勢，並介紹一些適合Go語言的應用場景，同時給出具體的程式碼範例。優勢並發性強：Go語言內建支援輕量級執行緒－goroutine，能夠輕鬆實現並發程式設計。透過使用go關鍵字就可以啟動goroutin
Linux在雲端運算領域的廣泛應用
Mar 20, 2024 pm 04:51 PM
Linux在雲端運算領域的廣泛應用隨著雲端運算技術的不斷發展和普及，Linux作為一種開源作業系統在雲端運算領域中發揮重要作用。由於其穩定性、安全性和靈活性，Linux系統被廣泛應用於各種雲端運算平台和服務中，為雲端運算技術的發展提供了堅實的基礎。本文將介紹Linux在雲端運算領域的廣泛應用，並給出具體的程式碼範例。一、Linux在雲端運算平台中的應用虛擬化技術虛擬化技術
理解MySQL時間戳記：功能、特性與應用場景
Mar 15, 2024 pm 04:36 PM
MySQL時間戳記是十分重要的資料類型，它可以儲存日期、時間或日期加時間。在實際的開發過程中，合理地使用時間戳記可以提高資料庫操作的效率，並且方便進行時間相關的查詢和計算。本文將從MySQL時間戳記的功能、功能和應用場景等面向展開探討，並結合具體的程式碼範例來講解。一、MySQL時間戳記的功能與特性MySQL中有兩種類型的時間戳，一種是TIMESTAMP
