Assets list POC

by sectioni

HTML

<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script src="https://www.jeasyui.com/easyui/datagrid-detailview.js"></script>
<h2>Assets list Grid POC</h2>

<div style="margin-bottom:10px">
  <p>Click the expand button to expand row and view details.</p>
</div>

<table id="dg" style="width:700px;height:350px"       
       pagination="true" sortName="itemid" sortOrder="desc"
       title="DataGrid - Expand Row"
       singleSelect="true" fitColumns="true">
  <thead>
    <tr>
      <th field="itemid" width="80">Item ID</th>
      <th field="productid" width="100">Product ID</th>
      <th field="listprice" align="right" width="80">List Price</th>
      <th field="unitcost" align="right" width="80">Unit Cost</th>
      <th field="attr1" width="220">Attribute</th>
      <th field="status" width="60" align="center">Status</th>
    </tr>
  </thead>
</table>

JavaScript

$(function(){
            $('#dg').datagrid({
                data: [
                  {itemid:'value11', productid:'value12'},
                  {itemid:'value21', productid:'value22'},
                  {itemid:'value11', productid:'value12'},
                  {itemid:'value21', productid:'value22'},
                  {itemid:'value11', productid:'value12'},
                  {itemid:'value21', productid:'value22'}
                ],
                view: detailview,                
                detailFormatter:function(index,row){
                    return '<div class="ddv" style="padding:5px 0"></div>';
                },
                onExpandRow: function(index,row){
                    var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
                    ddv.panel({
                        height:150,
                        border:false,
                        cache:false,
                        content: `<div style="overflow:auto; height:150px;">
                        						<div style="float:left; width:33%"><ul class="tree" class="easyui-tree"></ul></div
																</div>`,
                        onOpen:function(){
                        
                          $('.tree').tree({
                          	url: 'routes.asp?app=assets&mode=GetData&action=GETASSETDETAILS',     
                          	loadFilter: function(data,parent) {
														}
                          });                        
                        
                      
                          $('#dg').datagrid('fixDetailRowHeight',index);
                        }
                    });
                    $('#dg').datagrid('fixDetailRowHeight',index);
                }
            });
        });