数据网格分组视图（DataGrid GroupView）

最新推荐文章于 2022-09-28 11:58:22 发布

diandiandelphi

最新推荐文章于 2022-09-28 11:58:22 发布

阅读量2.9k

点赞数

分类专栏： easyui 文章标签： datagrid 网格数据

easyui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <meta name="keywords" content="jquery,ui,easy,easyui,web" /> 
  <meta name="description" content="easyui help you build your web page easily!" /> 
  <title>Group Rows in DataGrid - jQuery EasyUI Demo</title> 
  <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css" /> 
  <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css" /> 
  <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css" /> 
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
  <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> 
  <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-groupview.js"></script> 
 </head> 
 <body> 
  <h2>Group Rows in DataGrid</h2> 
  <div class="demo-info" style="margin-bottom:10px"> 
   <div class="demo-tip icon-tip">
    &nbsp;
   </div> 
   <div>
    This sample shows how to group rows via specified column.
   </div> 
  </div> 
  <table id="dataGridADW" class="easyui-datagrid" title="Group Rows in DataGrid" style="width:700px;height:250px" data-options="
singleSelect:true,
collapsible:true,
rownumbers:true,
fitColumns:true,
data:data,
view:groupview,
groupField:'productid',
groupFormatter:function(value,rows){
return value + ' - ' + rows.length + ' Item(s)';
},
onLoadSuccess:function(data){//若你需要页面在打开时所有分组默认是折叠状态,加上这句代码&nbsp;&nbsp;
&nbsp;&nbsp;$('#dataGridADW').datagrid('collapseGroup');&nbsp;} &nbsp;//collapseGroup&nbsp;折叠一个分组&nbsp;
"> 
   <thead> 
    <tr> 
     <th data-options="field:'itemid',width:80">Item ID</th> 
     <th data-options="field:'productid',width:100">Product</th> 
     <th data-options="field:'listprice',width:80,align:'right'">List Price</th> 
     <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th> 
     <th data-options="field:'attr1',width:250">Attribute</th> 
     <th data-options="field:'status',width:60,align:'center'">Status</th> 
    </tr> 
   </thead> 
  </table>  
 </body>
</html>

<script type="text/javascript">
var data = [
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
];
</script>

所有分组默认折叠状态