做專案的時候,有時候會遇到多表頭的grid,在extjs4中,多表頭的實現已經很簡單了,本文介紹如何實現多表頭gird的功能。
做專案的時候,有時候會遇到多表頭的grid,在extjs4中,多表頭的實現已經很簡單了,本文介紹如何實現多表頭gird的功能。
之前有一篇文章,講的是如何實現grid的分頁功能(位址是:www.mhzg.net/a/20115/201151811170246.html),本文在此基礎上做出修改,達到多表頭grid+分頁功能。
先看下效果圖:
實現**如下:
html**:
"-//w3c//dtd xhtml 1.0 transitional//en"
"">
"">
"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、二級表頭必須指定寬度,如果不指定的話,會提示錯誤。如圖所示,紅框裡的項,必須要指定寬度。
服務端**,這裡使用asp編寫,具體解釋請參考前一篇文章。
response.contenttype =
"text/html"
response.charset =
"utf-8"
%>
'返回json資料,自定義一些測試資料。。
'這裡的引數與ext3.x相同,區別在於排序欄位和排序方式使用了新的屬性。
'由於這裡是測試資料,接收的引數只用到了start,limit。sorts和dir在實際操作過程中,將之加入sql的order by裡即可。
start = request(
"start"
)limit = request(
"limit")if
start =
""then
start = 0
endif
iflimit =
""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)
ifls >= 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檔案剝離並分目錄放置了,那麼一定...