生活随笔
收集整理的這篇文章主要介紹了
easyUI 展开DataGrid里面的行显示详细信息
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
http://blog.csdn.net/yanghongchang_/article/details/7854156原著
datagrid 可以改變它的view(視圖)去顯示不同的效果.使用詳細視圖,datagrid可以顯示展開按鈕("+" 或者 "-")在數據行的左邊,用戶可以展開一個行去顯示一個附加的詳細信息.
查看 Demo
?
步驟 1: 創建 DataGrid
[html]?view plaincopy
<table?id="dg"?style="width:500px;height:250px"?url="data/datagrid_data.json"?title="DataGrid?-?Expand?Row"?singleselect="true"?fitcolumns="true">????????<thead>????????????<tr>????????????????<th?field="itemid"?width="60">Item?ID</th>????????????????<th?field="productid"?width="80">Product?ID</th>????????????????<th?field="listprice"?align="right"?width="70">List?Price</th>????????????????<th?field="unitcost"?align="right"?width="70">Unit?Cost</th>????????????????<th?field="status"?width="50"?align="center">Status</th>????????????</tr>????????</thead>????</table>???? 步驟 2: 為DataGrid設置詳細視圖
使用詳細視圖,切記:引入視圖script文件在你的頁面的頭部.
?
?
[html]?view plaincopy
<script?type="text/javascript"?src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script>???? [javascript]?view plaincopy
$('#dg').datagrid({????????view:?detailview,????????detailFormatter:function(index,row){????????????return?'<div?id="ddv-'?+?index?+?'"?style="padding:5px?0"></div>';????????},????????onExpandRow:?function(index,row){????????????$('#ddv-'+index).panel({????????????????border:false,????????????????cache:false,????????????????href:'datagrid21_getdetail.php?itemid='+row.itemid,????????????????onLoad:function(){????????????????????$('#dg').datagrid('fixDetailRowHeight',index);????????????????}????????????});????????????$('#dg').datagrid('fixDetailRowHeight',index);????????}????});???? 我們定義detailFormatter函數告訴datagrid 如何渲染詳細視圖,在這種情況下,我們返回一個簡單的?'<div>'元素,它將充當最為一個詳細內容的容器,
?
注意:詳細信息為空,當用戶點擊展開按鈕('+'),onExpandRow事件將被觸發,所以我們可以寫一些代碼去加載ajax詳細內容,最后我們調用fixDetailRowHeight方法去固定行高度,當詳細內容加載之后.
?
步驟 3: 服務器端代碼
?
datagrid21_getdetail.php
?
[php]?view plaincopy
<?php????$itemid?=?$_REQUEST['itemid'];????????$content?=?file_get_contents('data/datagrid_data.json');????$data?=?json_decode($content,true);????foreach($data['rows']?as?$item){????????if?($item['itemid']?==?$itemid){????????????break;????????}????}?????????>????????<table?class="dv-table"?border="0"?style="width:100%;">????????<tr>????????????<td?rowspan="3"?style="width:60px">????????????????<?php????????????????????echo?"<img?src=\"images/$itemid.gif\"?style=\"height:50px\"/>";?????????????????>????????????</td>????????????<td?class="dv-label">Item?ID:?</td>????????????<td><?php?echo?$item['itemid'];?></td>????????????<td?class="dv-label">Product?ID:</td>????????????<td><?php?echo?$item['productid'];?></td>????????</tr>????????<tr>????????????<td?class="dv-label">List?Price:?</td>????????????<td><?php?echo?$item['listprice'];?></td>????????????<td?class="dv-label">Unit?Cost:</td>????????????<td><?php?echo?$item['unitcost'];?></td>????????</tr>????????<tr>????????????<td?class="dv-label">Attribute:?</td>????????????<td?colspan="3"><?php?echo?$item['attr1'];?></td>????????</tr>????</table> ? ?
轉載于:https://www.cnblogs.com/lacey/p/5884377.html
總結
以上是生活随笔為你收集整理的easyUI 展开DataGrid里面的行显示详细信息的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
