您的位置：首页 > 其它

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

2017-05-22 15:02 337 查看
<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.je
1cca8
asyui.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"> </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){//若你需要页面在打开时所有分组默认是折叠状态,加上这句代码  

  $('#dataGridADW').datagrid('collapseGroup'); }
 //collapseGroup 折叠一个分组 

">

<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>

<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>

</body>

</html>

所有分组默认折叠状态
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航