The DataGrid's data grid Detailed view and the grouped view of the data grid are described below
1, the first reference JS and CSS files
1) contains four files required by Eauyui easyui.css,icon.css, Jquery-min.js, jquery-easyui.min.js
and detailed views required for detailview.js and grouping views groupview.js
<link rel= "stylesheet" type= "Text/css" href= "Js/easyui.css" >
<link rel= "stylesheet" type= "Text/css" href= "Js/icon.css" >
<script type= "Text/javascript" src= "Js/jquery.min.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.easyui.min.js" ></script>
<script type= "Text/javascript" src= "Js/datagrid-detailview.js" ></script>
<script type= "Text/javascript" src= "Js/datagrid-groupview.js" ></script>
Create a detailed view of the data grid
1) Create an HTML page
2) Create a detailed view of the data
<script>
$ (function () {
Data Grid Detail View events
$ (' #aa '). DataGrid ({
Title: ' Datagrid-detailview ',
WIDTH:500,
HEIGHT:250,
Remotesort:false,
Singleselect:true,
Nowrap:false,
Fitcolumns:true,
URL: ' Datagrid_data.json ',
columns:[[
{field: ' Itemid ', title: ' Item ID ', width:80},
{field: ' ProductID ', title: ' Product ID ', width:100,sortable:true},
{field: ' ListPrice ', title: ' List price ', width:80,align: ' Right ', sortable:true},
{field: ' UnitCost ', title: ' Unit cost ', width:80,align: ' Right ', sortable:true},
{field: ' Attr1 ', title: ' Attribute ', width:150,sortable:true},
{field: ' Status ', title: ' Status ', Width:60,align: ' Center '}
]],
View:detailview,
Detailformatter:function (RowIndex, RowData) {
Return ' <table><tr> ' +
' <td rowspan=2 style= "border:0" ></td> ' +
' <td style= ' border:0 ' > ' +
' <p>attribute: ' + rowdata.attr1 + ' </p> ' +
' <p>status: ' + rowdata.status + ' </p> ' +
' </td> ' +
' </tr></table> ';
}
});
});
</script>
3) Implementation of
Second, create a data grid grouping view
1) Create an HTML page
<body>
<div align= "center" >
<P><H2>2, Data grid grouping view <table id= "BB" ></table>
</div>
</body>
2) Create a data grid grouping event
<script>
$ (function () {
$ (' #bb '). DataGrid ({
Title: ' Datagrid-groupview ',
WIDTH:500,
HEIGHT:250,
Rownumbers:true,
Remotesort:false,
Nowrap:false,
Fitcolumns:true,
URL: ' Datagrid_data.json ',
columns:[[
{field: ' ProductID ', title: ' Product ID ', width:100,sortable:true},
{field: ' ListPrice ', title: ' List price ', width:80,align: ' Right ', sortable:true},
{field: ' UnitCost ', title: ' Unit cost ', width:80,align: ' Right ', sortable:true},
{field: ' Attr1 ', title: ' Attribute ', width:150,sortable:true},
{field: ' Status ', title: ' Status ', Width:60,align: ' Center '}
]],
GroupField: ' ProductID ',
View:groupview,
Groupformatter:function (value, rows) {
return value + '-' + rows.length + ' Item (s) ';
}
});
});
</script>
3) Group view
Third, other data grid cache view and data grid Virtual scrolling View examples are available on this, just a reference, please.
Http://www.jeasyui.net/extension/189.html
Simple application of the Easyui data grid view (Datagrid view)