文档章节

easyUI使用datagrid-detailview.js实现二级列表嵌套

o
 osc_n6euf5h6
发布于 2019/03/19 21:25
字数 846
阅读 102
收藏 0

精选30+云产品,助力企业轻松上云!>>>

本文为博主原创,转载请注明:

在easyUI中使用datagrid-detailview.js可快速实现二级折叠列表,示例如下:

注意事项:

  原本在谷歌浏览器进行示例测试的,url请求对应的json文件,效果一直显示不出来,换到谷歌和IE是可以正常显示的,

解决方法可参考:http://www.cnblogs.com/shunzdd/p/5585990.html

其中的请求url对应的json文件封装的数据格式如下:

相关属性可参考该博客:https://www.cnblogs.com/cnjava/archive/2013/01/21/2869876.html

附官网demo连接:http://www.jeasyui.net/extension/189.html

{"total":28,"rows":[
    {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},
    {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-2"},
    {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-3"},
    {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-5"},
    {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-6"},
    {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-7"},
    {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-8"},
    {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-9"},
    {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-4"},
    {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-10"}
]}

 

  1 <html>
  2 <head>
  3 
  4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5     <title>jQuery EasyUI</title>
  6     <link rel="stylesheet" type="text/css" href="easyui.css">
  7     <link rel="stylesheet" type="text/css" href="icon.css">
  8     <script type="text/javascript" src="jquery.min.js"></script>
  9     <script type="text/javascript" src="jquery.easyui.min.js"></script>
 10     <script type="text/javascript" src="datagrid-detailview.js"></script>
 11 </head>
 12 <body>
 13     <h2>Expand row in DataGrid to show subgrid</h2>
 14     <div class="demo-info" style="margin-bottom:10px">
 15         <div class="demo-tip icon-tip"> </div>
 16         <div>Click the expand button to expand row and view subgrid.</div>
 17     </div>
 18     
 19     <div id="dg" style="width:650px;height:250px"></div>
 20     <script type="text/javascript">
 21         $(function(){
 22             $('#dg').datagrid({
 23                 view: detailview,
 24                 url:'json2.json',
 25                 singleSelect:"true" ,
 26                 fitColumns:"true",
 27                 striped:true,
 28                 checkOnSelect:'true',
 29                 columns:[[
 30                         {field:'itemid',title:'Order ID',width:200},
 31                         {field:'productid',title:'Quantity',width:100,align:'right'},
 32                         {field:'unitcost',title:'Unit Price',width:100,align:'right'}
 33                     ]],
 34                 detailFormatter:function(index,row){
 35                     return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';
 36                 },
 37                 onExpandRow: function(index,row){
 38                     $('#ddv-'+index).datagrid({
 39                         //url:'./javascript/jquery-easyui-1.5.1/datagrid-detaildata.json?itemid='+row.itemid',
 40                         url:'json2detail.json',
 41                         fitColumns:true,
 42                         singleSelect:true,
 43                         rownumbers:true,
 44                         loadMsg:'',
 45                         height:'auto',
 46                         columns:[[
 47                             {field:'orderid',title:'Order ID',width:200},
 48                             {field:'quantity',title:'Quantity',width:100,align:'right'},
 49                             {field:'unitprice',title:'Unit Price',width:100,align:'right'},
 50                             {field:'op',title:'操作',width:100,align:'right',formatter:formatOper}
 51                         ]],
 52                         detailFormatter:function(index2,row2){
 53                             console.log("----------------");
 54                             console.log(index2+"==========="+row2);
 55                             return '<div style="padding:2px"><table id="ddv2-' + index2 + '"></table></div>';
 56                         },
 57                         onExpandRow: function(index2,row2){
 58                             console.log("+++++++++++++++++++++");
 59                             console.log(index2+"==========="+row2);
 60                             var ddv2 = $(this).datagrid('getRowDetail',index2).find('#ddv2-'+index2);//严重注意喔
 61                             ddv2.datagrid({//?itemid='+row.itemid
 62                                 //url:'./javascript/jquery-easyui-1.5.1/datagrid-detaildata.json?itemid='+row.itemid',
 63                                 url:'json2detail.json',
 64                                 fitColumns:true,
 65                                 singleSelect:true,
 66                                 rownumbers:false,
 67                                 loadMsg:'',
 68                                 height:'300px',
 69                                 columns:[[
 70                                     {field:'orderid',title:'Order ID',width:200},
 71                                     {field:'quantity',title:'Quantity',width:100,align:'right'},
 72                                     {field:'unitprice',title:'Unit Price',width:100,align:'right'},
 73                                     {field:'op',title:'操作',width:100,align:'right',formatter:formatOper}
 74                                 ]],
 75                                 
 76                                 onResize:function(){
 77                                     $('#dg').datagrid('fixDetailRowHeight',index2);
 78                                 },
 79                                 onLoadSuccess:function(){
 80                                     $('#dg').datagrid("selectRow", index2)
 81                                     setTimeout(function(){
 82                                         $('#dg').datagrid('fixDetailRowHeight',index2);
 83                                     },0);
 84                                 }
 85                             });
 86                             $('#dg').datagrid('fixDetailRowHeight',index2);
 87                             ddv2.datagrid('fixDetailRowHeight',index2);
 88                             $('#dg').datagrid('fixDetailRowHeight',index);
 89                         },
 90                 
 91                         onResize:function(){
 92                             $('#dg').datagrid('fixDetailRowHeight',index);
 93                         },
 94                         onLoadSuccess:function(){
 95                             $('#dg').datagrid("selectRow", index)
 96                             setTimeout(function(){
 97                                 $('#dg').datagrid('fixDetailRowHeight',index);
 98                             },0);
 99                         }
100                     });
101                     $('#dg').datagrid('fixDetailRowHeight',index);
102                 }
103             });
104         });
105         function formatOper(val,row,index){  
106             return '<a href="#" onclick="editUser('+index+')">修改</a>';  
107         }  
108         function editUser(index){
109             alert("ddd");
110         }
111     </script>
112     
113 </body>
114 </html>

实现的效果如下(由于引用的css样式在浏览器没显示,效果如下图所示):

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
abp(net core)+easyui+efcore实现仓储管理系统——入库管理之十一(四十七)

abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二) a...

osc_0esgtdby
05/07
3
0
EasyUi subgrid 三级列表实现

工作中用到了EasyUi的subgrid,需做三级列表,由于easyui的demo只支持到两级,故三级扩展如下(备注:最新easyui1.4.1中,提供一个新的Nested SubGrid,本身api就支持多级列表,大家若觉得subgr...

again-Y
2014/08/10
698
0
abp(net core)+easyui+efcore实现仓储管理系统——入库管理之十一(四十七)

abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二) a...

osc_q5m9dzk0
05/07
6
0
abp(net core)+easyui+efcore实现仓储管理系统——入库管理之十一(四十七)

abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二) a...

DotNet菜园
05/06
0
0
abp(net core)+easyui+efcore实现仓储管理系统——入库管理之十一(四十七)

abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二) a...

DotNet菜园
05/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

科技人文丨玻璃心:承受阈值与表达

大家好,我是SKODE。 有趣的灵魂,聊科技人文。 本系列博客地址:传送门 本文转载自B站:安慰记传送门 玻璃心是网络用语,意思是: 对负面事件的接受度很低 还有对别人可能给出的负面评价非常...

osc_u9mt0sus
5分钟前
0
0
迅睿CMS 游客不允许上传附件

游客不允许上传附件 迅睿CMS系统:https://www.xunruicms.com/ 本文档原文地址:https://www.xunruicms.com/doc/752.html...

迅睿CMS-PHP开源CMS程序
5分钟前
0
0
代理,注解,接口和实现类的小测验

* retention : 保留* policy : 策略 ps : 简单测试了一下手写代理,jdk动态代理,和cglib动态代理,根据其不同的结果分析其原理 一:测试目的 主要想看一下不同的代理模式对于目标类中方法上注...

岁一
6分钟前
0
0
V-Ray 5 For 3ds Max 正式发布:超越渲染 - 知乎

15个新功能,V-Ray5助你时间更节省,渲染更出色! 作者:ChaosGroup VRay 5 For 3ds Max 已正式发布! 2分钟视频,抢先预览新功能↓ 知乎视频 www.zhihu.com V-Ray 5 for 3ds Max 新增功能 ...

osc_o9u1um45
6分钟前
0
0
毕业的笑容和悲伤永远是校园的回忆

校园的风轻轻的拂过我的脸庞,风儿显得更加凉爽, 开满火红的凤凰树,染遍了校园的每个角落, 晚上那枝头蝉儿的竞相鸣奏,唱满了令人不舍的毕业歌, 它们彷彿告诉了我们要毕业了。 毕业典礼那...

瑾123
7分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部