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"
       url="datagrid8_getdata.php"
       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 style="float:left; margin-left:10px; width:60%;">
                          <table class="subtable">
                            <thead>
                              <th field="column1">Column 1</th>
                              <th field="column2">Column 2</th>
                            </thead>
                          </table>	
                        </div>
</div>`,
                        onOpen:function(){
                        
                          $('.tree').tree({
                          onClick: function(node){
                              $('.subtable').datagrid('loading');
                              setTimeout(function() {
																$('.subtable').datagrid('loaded');
															}, 1000);
                                                           
                              	
                              
    ...