easyUI使用datagrid-detailview.js实现二级列表嵌套
本文为博主原创，转载请注明：
在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"}
]}
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="easyui.css">
<link rel="stylesheet" type="text/css" href="icon.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script type="text/javascript" src="datagrid-detailview.js"></script>
</head>
<body>
<h2>Expand row in DataGrid to show subgrid</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"> </div>
<div>Click the expand button to expand row and view subgrid.</div>
</div> <div id="dg" style="width:650px;height:250px"></div>
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
view: detailview,
url:'json2.json',
singleSelect:"true" ,
fitColumns:"true",
striped:true,
checkOnSelect:'true',
columns:[[
{field:'itemid',title:'Order ID',width:200},
{field:'productid',title:'Quantity',width:100,align:'right'},
{field:'unitcost',title:'Unit Price',width:100,align:'right'}
]],
detailFormatter:function(index,row){
return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';
},
onExpandRow: function(index,row){
$('#ddv-'+index).datagrid({
//url:'./javascript/jquery-easyui-1.5.1/datagrid-detaildata.json?itemid='+row.itemid',
url:'json2detail.json',
fitColumns:true,
singleSelect:true,
rownumbers:true,
loadMsg:'',
height:'auto',
columns:[[
{field:'orderid',title:'Order ID',width:200},
{field:'quantity',title:'Quantity',width:100,align:'right'},
{field:'unitprice',title:'Unit Price',width:100,align:'right'},
{field:'op',title:'操作',width:100,align:'right',formatter:formatOper}
]],
detailFormatter:function(index2,row2){
console.log("----------------");
console.log(index2+"==========="+row2);
return '<div style="padding:2px"><table id="ddv2-' + index2 + '"></table></div>';
},
onExpandRow: function(index2,row2){
console.log("+++++++++++++++++++++");
console.log(index2+"==========="+row2);
var ddv2 = $(this).datagrid('getRowDetail',index2).find('#ddv2-'+index2);//严重注意喔
ddv2.datagrid({//?itemid='+row.itemid
//url:'./javascript/jquery-easyui-1.5.1/datagrid-detaildata.json?itemid='+row.itemid',
url:'json2detail.json',
fitColumns:true,
singleSelect:true,
rownumbers:false,
loadMsg:'',
height:'300px',
columns:[[
{field:'orderid',title:'Order ID',width:200},
{field:'quantity',title:'Quantity',width:100,align:'right'},
{field:'unitprice',title:'Unit Price',width:100,align:'right'},
{field:'op',title:'操作',width:100,align:'right',formatter:formatOper}
]], onResize:function(){
$('#dg').datagrid('fixDetailRowHeight',index2);
},
onLoadSuccess:function(){
$('#dg').datagrid("selectRow", index2)
setTimeout(function(){
$('#dg').datagrid('fixDetailRowHeight',index2);
},0);
}
});
$('#dg').datagrid('fixDetailRowHeight',index2);
ddv2.datagrid('fixDetailRowHeight',index2);
$('#dg').datagrid('fixDetailRowHeight',index);
}, onResize:function(){
$('#dg').datagrid('fixDetailRowHeight',index);
},
onLoadSuccess:function(){
$('#dg').datagrid("selectRow", index)
setTimeout(function(){
$('#dg').datagrid('fixDetailRowHeight',index);
},0);
}
});
$('#dg').datagrid('fixDetailRowHeight',index);
}
});
});
function formatOper(val,row,index){
return '<a href="#" onclick="editUser('+index+')">修改</a>';
}
function editUser(index){
alert("ddd");
}
</script> </body>
</html>
实现的效果如下（由于引用的css样式在浏览器没显示，效果如下图所示）：
easyUI使用datagrid-detailview.js实现二级列表嵌套的更多相关文章
- easyui的datagrid用js插入数据等编辑功能的实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery easyui datagrid detailview groupview添加自定义视图view
var myview = $.extend({}, $.fn.datagrid.defaults.view, { onAfterRender: function (target) { $.fn.dat ...
- 按CTRL,SHIFT,ALT等键扩展easyui的datagrid多选实现
//------------------------------------------------------------------------------- // 当然页面文件中还需要引入的文件 ...
- easyUI中datagrid的使用
easyUI中的datagrid数据表格经常被用到,结合项目中的使用情况,总结一下datagrid使用中需要注意的一些问题.使用datagrid展示数据,需要在html.css.js中都要编写代码,h ...
- easyui的datagrid分页写法小结
easyui的datagrid分页死活不起作用...沙雕了...不说了上代码 //关闭tab1打开tab2 查询Detail function refundDetail(){ $('#tt').tab ...
- 第二百二十二节，jQuery EasyUI，DataGrid(数据表格)组件
jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...
- easyui的datagrid行的某一列添加链接
通过formatter方法给easyui 的datagrid 每行增加操作链接. 效果图 jsp代码: <th field="url" width="100&quo ...
- easyui的datagrid打印(转)
在使用easyui插件的时候,使用最多的应该是datagrid插件.有时候根据客户需求,可能需要将datagrid内容进行打印,这时候如果直接调用window.print,可能由于easyui的dat ...
- easyui使用datagrid时列名包含特殊字符导致表头与数据错位的问题
做一个用easyui的datagrid显示数据的功能时发现表格的列头与数据错位了,而且这个现象不总是能重现,一直没搞清楚原因.后来偶然在控制台看出了一点端倪: 推测表头或者单元格的class名应该是用 ...
随机推荐
- Msf的一些常用操作
payload的几个常用生成 生成windows下的反弹木马 msfvenom -p windows/meterpreter/reverse_tcp LHOST=60.205.212.140 LPOR ...
- 13 form表单
form表单中可包括 <input > 类型包括 text(name,value) password(name,value) checkbox(name,value) radio(chec ...
- python __all__
它不仅在第一时间展现了模块的内容大纲,而且也更清晰的提供了外部访问接口. 若__all__的list中未定义,即便有实现也会找不到.
- IsWindowVisible
IsWindowVisible通过该函数可以获得指定窗口的可视状态,即显示或者隐藏. BOOL IsWindowVisible( HWND hWnd ); hWnd:被测试窗口的句柄. 返回值:如果指 ...
- jar命令打jar包
jar -cvfM0 cloudwarehouse-enter.jar ./BOOT-INF ./META-INF ./org jar -cvfM0 xxl-job-admin.war ./BOOT- ...
- POJ 2248 - Addition Chains - [迭代加深DFS]
题目链接:http://bailian.openjudge.cn/practice/2248 题解: 迭代加深DFS. DFS思路:从目前 $x[1 \sim p]$ 中选取两个,作为一个新的值尝试放 ...
- ES6 模块
概述 在 ES6 前, 实现模块化使用的是 RequireJS 或者 seaJS(分别是基于 AMD 规范的模块化库, 和基于 CMD 规范的模块化库). ES6 引入了模块化,其设计思想是在编译时 ...
- loj2876 水壶 [JOISC 2014 Day2] kruscal重构树
正解:kruscal重构树+bfs 解题报告: 我永远喜欢loj! 感觉这题和这题挺像的,,,预处理和解题方法都是,,,所以大概整体二分能过去? 但因为做这题主要是入门一下kruscal重构树,,,所 ...
- Ceph与Gluster之开源存储的对比
一.Ceph与Gluster之开源存储的对比 一.Ceph与Gluster的原理对比 Ceph和Gluster是Red Hat旗下的成熟的开源存储产品,Ceph与Gluster在原理上有着本质上的不同 ...
- C# 并发编程 · 经典实例
http://www.cnblogs.com/savorboard/p/csharp-concurrency-cookbook.html 异步基础 任务暂停,休眠 异步方式暂停或者休眠任务,可以使用 ...