做專案的時候,有時候會遇到多表頭的grid,在extjs4中,多表頭的實現已經很簡單了,本文介紹如何實現多表頭gird的功能。
做專案的時候,有時候會遇到多表頭的grid,在extjs4中,多表頭的實現已經很簡單了,本文介紹如何實現多表頭gird的功能。
之前有一篇文章,講的是如何實現grid的分頁功能(位址是:www.mhzg.net/a/20115/201151811170246.html),本文在此基礎上做出修改,達到多表頭grid+分頁功能。
先看下效果圖:
實現**如下:
html**:
"-//w3c"
"">
"">
"demo"
>
group-header.js:
ext.require([
'ext.grid.*'
,'ext.*******.paging'
,'ext.util.*'
,'ext.data.*'
]);ext.onready(
function
(),'addtime'
]});
//建立資料來源
varstore=ext.create(
'ext.data.store'
,,******sortmode:
true
},sorters:
});//建立grid
vargrid=ext.create(
'ext.grid.panel',,,
]},],height:400,
width:520,
x:20,
y:40,
title:
'extjs4多表頭grid帶分頁示例'
,disableselection:
true
,loadmask:
true
,renderto:
'demo'
,viewconfig:,
bbar:ext.create(
'ext.paging*******'
,-條,共計條'
,emptymsg:
"沒有資料"
})})
store.loadpage(1);})
js**要注意的地方:
1、記得載入'ext.util.*',
2、二級表頭必須指定寬度,如果不指定的話,會提示錯誤。如圖所示,紅框裡的項,必須要指定寬度。
response.contenttype=
"text/html"
response.charset=
"utf-8"
%>
'返回json資料,自定義一些測試資料。。
'這裡的引數與ext3.x相同,區別在於排序欄位和排序方式使用了新的屬性。
'由於這裡是測試資料,接收的引數只用到了start,limit。sorts和dir在實際操作過程中,將之加入sql的orderby裡即可。
start=request(
"start"
)limit=request(
"limit")if
start=
""then
start=0
endif if
limit=
""then
limit=50
endif
sorts=replace(trim(request.form(
"sort"
)),"'",""
)dir=replace(trim(request.form(
"dir"
)),"'",""
)dim
counts:counts=300
'注意,這裡的counts相當於rs.recordcount,也就是記錄總數。
dimls:ls=cint(start)+cint(limit) if
ls>=counts
then
ls=counts
endif
echo("")
ifithen
echo(
",")
endif
next
echo(
"]}"
)function
echo(str)
response.write(str)
endfunction
%>
ExtJS4學習 多表頭Grid
做專案的時候,有時候會遇到多表頭的grid,在extjs4中,多表頭的實現已經很簡單了,本文介紹如何實現多表頭gird的功能。做專案的時候,有時候會遇到多表頭的grid,在extjs4中,多表頭的實現已經很簡單了,本文介紹如何實現多表頭gird的功能。之前有一篇文章,講的是如何實現grid的分頁功能...
ExtJS4學習筆記 九 多表頭Grid
做專案的時候,有時候會遇到多表頭的grid,在extjs4中,多表頭的實現已經很簡單了,本文介紹如何實現多表頭gird的功能。之前有一篇文章,講的是如何實現grid的分頁功能 位址是 www.mhzg.net a 20115 201151811170246.html 本文在此基礎上做出修改,達到多表...
ExtJS4學習筆記 五 Grid分頁
grid元件,當資料量很大的時候,就需要分頁顯示,本文介紹如何實現extjs4 grid的分頁功能。先看thml w3c dtd xhtml 1.0 transitional en demo 這裡引用的js檔案,都是相對於extjs4整個目錄的。如果已經將js和css檔案剝離並分目錄放置了,那麼一定...