❮ Plugins Mb Splitbutton Ext Treegrid Dnd ❯

jQuery EasyUI Extension - DataGrid View

DataGrid DetailView

Usage

Step 1: Create an HTML Page

<head>
    <script type="text/javascript" src="datagrid-detailview.js"></script>
</head>
<body>
    <table id="tt"></table>
</body>

Step 2: Create a DataGrid

$('#tt').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"><img decoding="async" src="images/' + rowData.itemid + '.png" style="height:50px;"></td>' +
            '<td style="border:0">' +
            '<p>Attribute: ' + rowData.attr1 + '</p>' +
            '<p>Status: ' + rowData.status + '</p>' +
            '</td>' +
            '</tr></table>';
    }
});

Properties

Name	Type	Description	Default
detailFormatter	function(index, row)	Returns the formatted detail content for a row.

Events

Name	Parameters	Description
onExpandRow	index, row	Triggered when a row is expanded.
onCollapseRow	index, row	Triggered when a row is collapsed.

Methods

Name	Parameters	Description
fixDetailRowHeight	index	Fixes the height of the detail row.
getExpander	index	Gets the row expander object.
getRowDetail	index	Gets the row detail container.
expandRow	index	Expands a row.
collapseRow	index	Collapses a row.

DataGrid GroupView

Usage

Step 1: Create an HTML Page

<head>
    <script type="text/javascript" src="datagrid-groupview.js"></script>
</head>
<body>
    <table id="tt"></table>
</body>

Step 2: Create a DataGrid

$('#tt').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)';
    }
});

Properties

Name	Type	Description	Default
groupField	string	Indicates the field to group by.
groupFormatter	function(value, rows)	Returns the formatted content for a group. <br>The value parameter indicates the group value defined by the 'groupField' property. <br>The rows parameter indicates the data rows for the specified group value.

Methods

Name	Parameters	Description
expandGroup	groupIndex	Expands a group.
collapseGroup	groupIndex	Collapses a group.

DataGrid BufferView

Step 1: Include the 'datagrid-bufferview.js' File

<head>
    <script type="text/javascript" src="datagrid-bufferview.js"></script>
</head>

Step 2: Create a DataGrid

<table id="tt" class="easyui-datagrid" style="width:700px;height:250px"
    title="DataGrid - BufferView" 
    data-options="url:'get_data.php',view:bufferview,rownumbers:true,singleSelect:true,autoRowHeight:false,pageSize:50">
    <thead>
        <tr>
            <th field="inv" width="80">Inv No</th>
            <th field="date" width="100">Date</th>
            <th field="name" width="80">Name</th>
            <th field="amount" width="80" align="right">Amount</th>
            <th field="price" width="80" align="right">Price</th>
            <th field="cost" width="100" align="right">Cost</th>
            <th field="note" width="110">Note</th>
        </tr>
    </thead>
</table>

DataGrid VirtualScrollView

Step 1: Include the 'datagrid-scrollview.js' File

<head>
    <script type="text/javascript" src="datagrid-scrollview.js"></script>
</head>

Step 2: Create a DataGrid with Virtual Scroll View

<table id="tt" class="easyui-datagrid" style="width:700px;height:250px"
    title="DataGrid - VirtualScrollView"
    data-options="url:'get_data.php',view:scrollview,rownumbers:true,singleSelect:true,autoRowHeight:false,pageSize:50">
    <thead>
        <tr>
            <th field="inv" width="80">Inv No</th>
            <th field="date" width="100">Date</th>
            <th field="name" width="80">Name</th>
            <th field="amount" width="80" align="right">Amount</th>

<th field="price" width="80" align="right">Price</th>
<th field="cost" width="100" align="right">Cost</th>
<th field="note" width="110">Note</th>
</tr>
</thead>
</table>

Download jQuery EasyUI Example

jquery-easyui-datagridview.zip

❮ Plugins Mb Splitbutton Ext Treegrid Dnd ❯