jqueryeasyuidatagridviewdetailview使用

要用jquery easyui實(shí)現(xiàn)下圖這種可打開列表的形式

創(chuàng)新互聯(lián)建站專業(yè)提供成都主機(jī)托管四川主機(jī)托管成都服務(wù)器托管四川服務(wù)器托管，支持按月付款！我們的承諾：貴族品質(zhì)、平民價(jià)格，機(jī)房位于中國(guó)電信/網(wǎng)通/移動(dòng)機(jī)房，綿陽(yáng)電信機(jī)房機(jī)柜租用服務(wù)有保障！

（此圖截于easyui的api中）

要實(shí)現(xiàn)這種主從顯示效果就要用到datagrid中的屬性view:detailview和事件onExpandRow:function(index,row){}

但是，要使用detailview首先要引入detailview.js，內(nèi)容如下，自己存成js在頁(yè)面中引用就行了

http://code.google.com/p/jeasyui/source/browse/trunk/easyui/WebRoot/js/datagrid-detailview.js?r=12

首先還是要在頁(yè)面上有個(gè)表格，id為tt

<div region="center"  border="false">
  <table id="tt"></table>
</div>

我們有個(gè)數(shù)據(jù)庫(kù)表student，里面有字段id, name, sex, nation

我們要在主表顯示id和name,點(diǎn)+號(hào)展開從表時(shí)，在從表中顯示sex和nation

$("#tt").datagrid({
url: "findForPage",
title:"學(xué)生基本信息管理",
width : 800,
height : 300,
fit : false,
pageSize : 5,
pageList : [ 5, 10, 15, 20 ],
columns : [ [ {
field : "學(xué)號(hào)",
title : "學(xué)號(hào)",
align : "center"
}, {
field : "姓名",
title : "姓名",
align : "center"
} ] ],
view:detailview,//注意1
detailFormatter:function(index,row){
return "<div><table id='ddv-"+index+"'></table></div>";//注意2
},
onExpandRow:function(index,row){//注意3
$("#ddv-"+index).datagrid({
data:[{
"性別":row.sex,
"民族":row.nation}
],
width:600,
height:"auto",
columns:[[
    {field:"性別",title:"性別"},
    {field:"民族",title:"民族"}
]],
onResize:function(){  //注意4
                    $('#tt').datagrid('fixDetailRowHeight',index);  
                },  
                onLoadSuccess:function(){
                    setTimeout(function(){
                        $('#tt').datagrid('fixDetailRowHeight',index);  
                    },0);  
                }
});
$('#tt').datagrid('fixDetailRowHeight',index);//注意5
},
pagination : true
});

注意1處必寫

注意2處必寫。此處function(index,row)兩個(gè)參數(shù)，index是行索引，row是行數(shù)據(jù)。

函數(shù)中return里的table是用于在下面onExpandRow中進(jìn)行datagrid

注意3處的index和row與上同

因?yàn)閞ow中已經(jīng)存儲(chǔ)了這一行的所有數(shù)據(jù)

所以沒必要在下面的datagrid里再用url:, 再查一遍數(shù)據(jù)庫(kù)

那這里就不用url，而用data

下面還有columns，格式不變，但注意data:后面的格式，只有這種格式才能正常讀取數(shù)據(jù)，用另一種格式：

data:[{"性別":row.sex},{"民族":row.nation}]

這種格式能讀出數(shù)據(jù)，但顯示不正常，還有其它格式，比如再加個(gè)中括號(hào)之類的根本就讀不出數(shù)據(jù)

再看注意4和注意5，這兩塊代碼必須得寫，不然首次展開從表顯示會(huì)出現(xiàn)不正常，有了這兩塊就沒問題了

網(wǎng)站標(biāo)題：jqueryeasyuidatagridviewdetailview使用
本文URL：http://bm7419.com/article20/gejcco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、云服務(wù)器、域名注冊(cè)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)