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名应该是用 ...
随机推荐
- V8 javascript 引擎
V8是一个由丹麦Google开发的开源java script引擎,用于Google Chrome中.[2]Lars Bak是这个项目的组长.[3] V8在执行之前将java script编译成了机 ...
- vue里的样式添加之行间样式
一:行间样式 :和绑定其他dom的属性一样, v-bind:style= <div v-bind:style={backgroundColor:color}>2</ ...
- Nginx打卡
Nginx打卡 此括号中的是干货 [ 直接说最关心的事:如何去掉访问路径的端口号? 答案:使用Nginx啊 具体安装还需看底下啰嗦的东东,安装OK且完美启动的同学,server proxy_pass ...
- Android adb调试
1.首先是adb 修改 devices/amlogic/p201_iptv/system.prop service.adb.tcp.port=5555 或者直接在盒子串口下修改 system/buil ...
- odoo中self的使用
一:self是什么 目前新版的Odoo中使用到的self,是对 游标cr.用户ID.模型.上下文.记录集.缓存 的封装. 我们可以通过 self.XX 获取到这些封装的东西,比如:self.cr. ...
- Struts2 学习
Struts2简介 1.概念:轻量级的MVC框架,主要解决了请求分发的问题,重心在控制层和表现层.低侵入性,与业务代码的耦合度很低.Struts2实现了MVC,并提供了一系列API,采用模式化方式简化 ...
- xutils android studio引用问题
然后rebuild--->关闭项目-->重启,ok public class MyApplication extends Application { @Override public vo ...
- Kali2安装完成后的设置
1.安装中文输入法 vim /etc/apt/sources.list 全部删除,改为国内源 #中科大 deb http://mirrors.ustc.edu.cn/kali kali-rolling ...
- PHP Echarts Ajax Json柱形图示例
<?php $server = '127.0.0.1'; $user = 'root'; $password = ''; $database = 'yiibaidb'; $conn = new ...
- 常见web UI 元素操作 及API使用
1. 链接(Link) // 找到链接元素,这个方法比较直接,即通过超文本链接上的文字信息来定位元素,这种方式一般专门用于定位页面上的超文本链接 WebElement link1 = driver.f ...