easyUI下datagrid嵌套显示

主要是运用 easyui的方法进行行内嵌套显示,让一行可以显示更多的东西,让一行显示JSON的字符串、从表之类的东西。

下边先看效果图:
效果图

接下来说实现过程:
(1)在首次加载中添加代码

view: detailview,
detailFormatter:function(index,row){
return '<div style="padding:2px"><table class="ddv"></table></div>';
 },
 onExpandRow: function(index,row){
var ddv=$(this).datagrid('getRowDetail',index).find('table.ddv');
ddv.datagrid({
     url:'datagrid22_getdetail.php?itemid='+row.itemid,//从表的查询
   fitColumns:true,
    singleSelect:true,
   rownumbers:true,
   loadMsg:'',
   height:'auto',
   columns:[[
   {field:'orderid',title:'Order ID',width:100},
                            {field:'quantity',title:'Quantity',width:100},
{field:'unitprice',title:'Unit Price',width:100}
 ]],
onResize:function(){                          $('#orderList').datagrid('fixDetailRowHeight', index);
 },//调节高度
 onLoadSuccess:function(){
    setTimeout(function(){                  $('#orderList').datagrid('fixDetailRowHeight', index);
   },0);
       }
        });                 $('#orderList').datagrid('fixDetailRowHeight', index);
}
  });

因为我是做了显示排序翻页的,所以放在了他们下边。如果没有,那么就放在你显示的字段下边就好了。

要显示的字段也写在上边就可以。

当用户点击展开按钮(’+’)时,将会触发“onExpandRow”事件。我们用树列创建一个新的子网格。当subgrid加载数据成功或调整大小时,请记住为master datagrid调用’fixDetailRowHeight’方法。

(2)如果前台报找不到detailview,那你需要在easyui中添加一个方法,我会放到我的资源下载中。由于要的可以下载。

(3)引用这个文件时记得放在这个引用下边
这里写图片描述



最后这个操作借鉴了一下引导,感谢作者。

http://www.jeasyui.com/tutorial/datagrid/datagrid22.php

posted on 2017-07-27 17:09  Grant-fu  阅读(213)  评论(0编辑  收藏  举报

导航