Title: Datalist Group and Subgroups
Post by: zombie86 on September 10, 2021, 11:58:05 AM
Hi All,
is there a way to Group Datalist in Hierarchy way as below
First Group Header "General Ledger" First Subgroup No. 1 Header "Accounts" First Subgroup No. 1 Items "View Accounts", "Add Accounts", "Edit Accounts", "Disable Accounts"
First Subgroup No. 2 Header "Journals" First Subgroup No. 2 Items "View Journals", "Add Journals", "Edit Journals", "Void Journals", "Approve Journals"
and so on..
please any help is appreciated
Title: Re: Datalist Group and Subgroups
Post by: jarry on September 10, 2021, 09:13:07 PM
Please refer to the SubGrid example. https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=material-teal&dir=ltr&pitem=Nested%20SubGrid&sort=asc <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery EasyUI</title> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/material-blue/easyui.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-detailview.js"></script> <script type="text/javascript"> var conf = { options: { fitColumns: true, showHeader: false, columns: [[ {field:'group',width:100} ]], data: [ {group:'General Ledger'} ] }, subgrid: { options: { fitColumns: true, showHeader: false, scrollbarSize: 0, columns: [[ {field:'header',width:100} ]], data: [ {header:'Accounts'}, {header:'Journals'} ] }, subgrid: { options: { fitColumns: true, showHeader: false, scrollbarSize: 0, foreignField: 'header', columns: [[ {field:'item',width:100} ]], data: [ {item:'View Accounts',header:'Accounts',width:100}, {item:'Add Accounts',header:'Accounts',width:100}, {item:'Edit Accounts',header:'Accounts',width:100}, {item:'Disable Accounts',header:'Accounts',width:100}, {item:'View Journals',header:'Journals',width:100}, {item:'Add Journals',header:'Journals',width:100} ], loadFilter: function(data){ var opts = $(this).datagrid('options'); var fvalue = opts.queryParams[opts.foreignField]; var rows = []; for(var i=0; i<data.length; i++){ if (data[i][opts.foreignField] == fvalue) { rows.push(data[i]) } } return rows; } } } } } $(function(){ $('#dg').datagrid({ width: 300, height: 500 }).datagrid('subgrid', conf) }) </script> </head> <body> <table id='dg'></table> </body> </html>
Title: Re: Datalist Group and Subgroups
Post by: thecyberzone on September 17, 2021, 09:46:17 AM
There is no documentation found about Datagrid subgrid method. Please include it in the documentation.
Title: Re: Datalist Group and Subgroups
Post by: jarry on September 17, 2021, 06:48:48 PM
The 'subgrid' method is extended in DataGrid View Extension.
https://www.jeasyui.com/extension/datagridview.php
|