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名应该是用 ...
随机推荐
- phpcms 自定义方法
路径:\install_package\phpcms\libs\functions\extention.func.php <?php //输入栏目ID获取父级栏目名称 function catp ...
- 利用python+selenium在pycharm下进行页面登陆的半自动测试
很久没有写了,现在正式入职,准备好好干,加油! 我的第一个较正式的测试代码: from selenium import webdriverimport unittestimport sysimport ...
- python学习之旅（四）
Python基础知识(3):基本数据类型之数字 一.基本数据类型 数字Number.字符串String.列表List.元组Tuple.集合Set.字典Dictionary 二.数字 Python3支持 ...
- 手把手教你提交文件到git
手把手教你使用git提交到github 作者 数据分析与优化 关注 2016.07.17 10:25 字数 7342 阅读 399评论 1喜欢 6 摘要Git是分布式版本控制系统,那么它就没有中央服务 ...
- ASP.NET页面使用JQuery EasyUI生成Dialog后台取值为空
原因: JQuery EasyUI生成Dialog后原来的文档结构发生了变化,原本在form里的内容被移动form外面,提交到后台后就没有办法取值了. 解决办法: 在生成Dialog后将它append ...
- the pitfull way to create a uClinux image including gdb.
After downloaded and installed the GCT's SDK and toolchain, we try to make an our own image which in ...
- [redis] hiredis-vip 简单使用
redis的C语言client,有几个:https://redis.io/clients#c 支持cluster的只有一个唯品会的版本:https://github.com/vipshop/hired ...
- Python的命令模式和交互模式
Python的命令行模式和交互模式 请注意区分命令行模式和Python交互模式. 在命令行模式下,可以执行python进入Python交互式环境,也可以执行python first.py运行一个.py ...
- Linux Shell编程中的几个特殊符号命令 & 、&& 、 ||
https://blog.csdn.net/hack8/article/details/39672145 Linux Shell编程中的几个特殊符号命令 & .&& . || ...
- Lint found fatal errors while assembling a release target
1.Android 打包错误信息 Generate signed Bundle or APK 打包时,报了一个错,错误信息如下: Error:Execution failed for task ´: ...