Angular中ui grid的使用詳解

angular中ui-grid的使用

在專案開發的過程中，產品經理往往會提出各種需求，以提高使用者體驗。最近，專案中用到的**特別多，而且**的列數和行數也超多。為了讓使用者瀏覽更爽，產品經理提出，當**上下滾動時，表頭固定，左右滾動時，表頭隨動。就這樣乙個看似十分easy的需求，我研究了一周時間，終於給實現了。

剛開始我研究bootstrap-table，這個外掛程式可以實現表頭固定的效果。由於我們的專案用的是angular 開發的，在專案中引入bootstrap-table和其它的檔案衝突了，所以就放棄了。隨後我又發現了angular-ui-grid，這個外掛程式是angular框架封裝好的，依賴angular，這個外掛程式功能也是比較多的，表頭固定，自定義排序，**行編輯，樹形結構等多種用法。

下面我來說一下angular-ui-grid的基本用法：

專案中用的angular版本是angular v1.2.30所以，我就以這個版本為例

npm install [email protected]

注：angular、angular-touch、angular-animate三個檔案版本需保持一致，angular-ui-grid要根據angular的版本進行確定，angular-ui-grid依賴的angular版本<=專案中的angular版本

注意引入檔案的先後順序

檔案依賴關係

angular-touch --> angular

angular-animate --> angular

ui-grid --> angular,angular-touch,angular-animate,csv,pdfmake,vfs_fonts

模組依賴

1、html

1
doctype html
>
2<
html 
>
3<
head
>
4<
link 
rel="stylesheet"
href
="../lib/ui-grid.css"
type
="text/css"
>
5<
link 
rel="stylesheet"
href
="main.css"
type
="text/css"
>
6<
script 
src="../lib/angular.js"
>
script
>
7<
script 
src="../lib/angular-touch.js"
>
script
>
8<
script 
src="../lib/angular-animate.js"
>
script
>
9<
script 
src="../lib/csv.js"
>
script
>
10<
script 
src="../lib/pdfmake.js"
>
script
>
11<
script 
src="../lib/vfs_fonts.js"
>
script
>
12<
script 
src="../lib/ui-grid.js"
>
script
>
13<
script 
src="../lib/ui-grid.eot"
>
script
>
14<
script 
src="../lib/ui-grid.svg"
>
script
>
15<
script 
src="../lib/ui-grid.ttf"
>
script
>
16<
script 
src="../lib/ui-grid.woff"
>
script
>
1718
head
>
19<
body
>
2021
<
div 
ng-controller
="mainctrl"
>
22<
div 
id="grid1"
ui-grid
=""class
="grid"
>
div>
23div
>
2425
26<
script 
src>
script
>
27body
>
28html
>

2、js

1
2($scope) ,12,
18,24,
30,36,,47,
5359
];60 }]);

執行效果：

Angular中ui grid的使用詳解

angular中的服務

angular 中的 DOM 操作

Angular中的資料互動

Angular中ui grid的使用詳解

angular中的服務

angular 中的 DOM 操作

Angular中的資料互動

相關推薦