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名应该是用 ...
随机推荐
- Vue.js——60分钟快速入门(转载)
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
- 前端上传 base64 编码图片到七牛云存储
参考文档 如何上传base64编码图片到七牛云 调试过程 文档中分别有 java 和 html 的 demo,可以根据文档示例调试. 下面是我调试的过程,可以作为参考,特别注意的是,如果需要给文件起名 ...
- Kafka的安装是否成功的简单测试命令
首先了解一下kafka的基本概念 .1. BrokerKafka集群包含一个或多个服务器,这种服务器被称为broker2. Topic每条发布到Kafka集群的消息都有一个类别,这个类别被称为Topi ...
- java awt 中文乱码 显示为 方块
今天调试同学的五子棋程序,同学的界面是用awt写的,运行的时候,发现菜单栏中的中文都无法正常显示,而是变为了一个个方框, 类似于这样:(图片来源于网络) 即使做了字体设置,比如设置为宋体,也还是无法正 ...
- 【Linux内存源码分析】vmalloc不连续内存管理（转）
https://www.jeanleo.com/2018/09/09/%E3%80%90linux%E5%86%85%E5%AD%98%E6%BA%90%E7%A0%81%E5%88%86%E6%9E ...
- BeeHive小思考
事件分发和事件处理 将所有行为注册为不同的时间类型,配置Module,让他们在事件发生时,响应这些事件(除了系统的事件,还可以注册自定义事件,触发自定义事件) Module注册之后应当会生成单例对象, ...
- SQL基础语法提纲
一.SQL需知5点 1.SQL是Structured Query Language的缩写,是用来访问关系型数据库的,非过程化的,高级编程语言. 2.SQL具有语法高度综合统一,高度的非过程化,对集合进 ...
- 斑马打印机ZT410中文打印
^XA ^CW1, E:SIMSUN.TTF^CI28^FO50,50^A1N,50,50^FD汉字^FS^XZ ******************************************* ...
- ZBX_NOTSUPPORTED: Cannot obtain filesystem information: [13] Permission denied
zabbix有默认两条自动发现规则,其中一条是自动发现已挂载文件系统,但笔者的三个挂载文件系统中两个监控成功了,一个失败 agentd端挂载情况: 仔细研究sdb1的挂载点,发现它是挂载在xiami用 ...
- Jmeter学习之-获取登录的oken值（1）
ps: 这里只着重讲述如何实时获取其他接口返回的值,作为此次接口的参数传递,添加接口请求的相关不再详述,可查看上一篇文章 为了方便管理,此处将:登录接口单独放在一个线程组下面,需要使用登录接口返回的t ...