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名应该是用 ...
随机推荐
- 27.用webpack自搭react和vue框架
自己搭建react-app vue-cli 前置条件 cnpm i -D webpack webpack-cli webpack-dev-server cnpm i -D css-loader sty ...
- 用 ArrayList 集合调用商品类
public class Commodity{ //定义商品类 String name; //定义商品名字 double size; //定义商品尺寸 double price; //定义商品 ...
- 队列模拟基本操作I
看到这道题,第一个想法就是“搜索”!“回溯”!的确,这种思路是很正确的,BFS和DFS都可以来解决: #include <cstdlib> #include <cstring> ...
- Oracle工具——ADRCI
ADRCI工具是Oracle11g才推出的新工具,主要用来管理alert文件.trace文件.dump文件.健康监事报告等. 这一篇简单介绍ADRCI工具. 用过11g的人都会发现,11g中alert ...
- Unified Temporal and Spatial Calibration for Multi-Sensor Systems
下载链接:点击 为了提高机器人状态估计的准确性和鲁棒性,越来越多的应用依赖于来自多个互补传感器的数据. 为了在传感器融合中获得最佳性能,这些不同的传感器必须在空间上和时间上相互对准.为此,已经开发了许 ...
- linux vue uwsgi nginx 部署路飞学城 安装 vue
vue+uwsgi+nginx部署路飞学城 有一天,老男孩的苑日天给我发来了两个神秘代码,听说是和mjj的结晶 超哥将这两个代码,放到了一个网站上,大家可以自行下载 路飞学城django代码#这个代码 ...
- iOS系统NSNotificationCenter中的常用通知名称
//音频 AVF_EXPORT NSString *const AVAudioSessionInterruptionNotification //音频中断出现 AVF_EXPORT NSString ...
- Kali2安装完成后的设置
1.安装中文输入法 vim /etc/apt/sources.list 全部删除,改为国内源 #中科大 deb http://mirrors.ustc.edu.cn/kali kali-rolling ...
- mescroll在vue中的应用
1.npm install --save mescroll.js 2. <template> <div> <!--全部--> <mescroll-vue re ...
- 一个ping大包不通问题的解决过程
1.问题描述 存在问题: 深圳的采集机MQ程序无法与应用服务器进行通讯,表现为:获取小数据时正常,获取大数据时超时 场景图如下 2.数据下载测试 使用SCP工具和FTP工具进行数据下载测试,主要是想排 ...