easyui表格组建onExpandRow

在这里插入图片描述需要引入文件datagrid-detailview.js
js代码:

    $(function(){
    	$("#data-list").datagrid({
    			view: detailview,
    			title:'订单',
    			url:getRootPath()+'/reUserOrder/dataList.do',
    			idField : "order_id",//唯一键字段
    			rownumbers: true,//行显示编号		
    			fit : true,		 // 自适应
    			fitColumns : true,// 是否有横向滚动条 false:有 
    			nowrap : false,	//列超出长度,换行
    			pagination:true,
    			rownumbers:true,
    			sortName:'create_time',
    			sortOrder:'desc',
    			pageSize:20,//每页显示数量
    	   		pageList:[10,20,30,50],//可选数量
    	         columns:[[
    					{field:'order_id',checkbox:true},
    					{field:'order_number',title:'订单号',align:'center',sortable:true,width:100,
    							formatter:function(value,row,index){
    								return row.order_number;
    							}
    						},
    					{field:'total_price',title:'支付金额',align:'center',sortable:true,width:50,
    							formatter:function(value,row,index){
    								return "¥"+row.total_price;
    							}
    						},
    					{field:'balance_pice',title:'平台余额',align:'center',sortable:true,width:50,
    							formatter:function(value,row,index){
    								return "¥"+row.balance_pice;
    							}
    						},
    					{field:'freight_fee',title:'运费',align:'center',sortable:true,width:50,
    							formatter:function(value,row,index){
    								return "¥"+row.freight_fee;
    							}
    						},
    					{field:'remarke',title:'备注',align:'center',sortable:true,width:100,
    						formatter:function(value,row,index){
    							return row.remarke;
    						}
    					},
    					{field:'create_time',title:'创建日期',align:'center',sortable:true,width:100,
    							formatter:function(value,row,index){
    								return row.create_time;
    							}
    						},
    
    					]],
    					detai在这里插入代码片lFormatter:function(index,row){//注意2  
    		                return '<table id="ddv-' + index + '"></table>';  
    		            }, 
    		            onExpandRow:function(index,node){
    		            	$('#ddv-'+index).datagrid({
    		            		url:getRootPath()+"/reUserOrderDetal/dataList.do?order_id="+node.order_id,
    		            		idField : "order_details_id",//唯一键字段  
    		        			fitColumns : true,// 是否有横向滚动条 false:有
    		        			nowrap : true,	//列超出长度,换行  
    		        			columns:[[
    		        						{field:'order_details_id',hidden:true},
    		        						{field:'acount',title:'数量',align:'center',sortable:true,width:50,
    		        								formatter:function(value,row,index){
    		        									return row.acount;
    		        								}
    		        							},
    		        						{field:'price',title:'价格',align:'center',sortable:true,width:50,
    		        								formatter:function(value,row,index){
    		        									return row.price;
    		        								}
    		        							},
    		        						{field:'all_price',title:'商品总价',align:'center',sortable:true,width:50,
    		        								formatter:function(value,row,index){
    		        									return row.all_price;
    		        								}
    		        							},
    		        						{field:'create_time',title:'操作时间',align:'center',sortable:true,width:100,
    		        								formatter:function(value,row,index){
    		        									return row.create_time;
    		        								}
    		        							},
    		        						]],
    		        	   		onResize:function(){                      
    		                        $('#centerdatagrid').datagrid('fixDetailRowHeight',index);                                        
    		                    },  
    		                    onLoadSuccess:function(){  
    		                        setTimeout(function(){  
    		                            $('#data-list').datagrid('fixDetailRowHeight',index);//在加载爷爷列表明细(即:父列表)成功时,获取此时整个列表的高度,使其适应变化后的高度,此时的索引  
    		                            $('#data-list').datagrid('fixRowHeight',index);//防止出现滑动条  
    		                        },0);  
    		                    }  
    		            	});
    		            	$('#data-list').datagrid('fixDetailRowHeight',index);  
    		            },            
    	});
    });

//搜索
function seach(){
	var company_name = $('#company_name').textbox('getValue');
	var state = $('#state').combobox('getValue');
	var start_time=$('#startTime').val();
	var end_time=$('#endTime').val();
	$("#data-list").datagrid("reload",{"state":state,"company_name":company_name,"startTime":start_time,"endTime":end_time});	
	$("#searchForm").form("clear");			//清除表单数据
}
//重置
function seachClear(){
	$("#searchForm").form("clear");			//清除表单数据
	$("#data-list").datagrid("reload",{"order_number":""});
}

jsp代码:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  </head>
  <body class="easyui-layout"> 
     <!--  Search panel end -->

     <!-- Data List -->
     <div region="center" border="false" >
     <table id="data-list"></table>
	 </div>
  	 <script type="text/javascript" src="<%=basePath%>/js/jquery-easyui-1.3.2/datagrid-detailview.js"></script>
  	 <script type="text/javascript" src="<%=basePath%>/view/ant/order/page-reUserOrder.js"></script>
  </body>
</html>

项目下载地址:http://www.zrscsoft.com/sitepic/12019.html

猜你喜欢

转载自blog.csdn.net/xiangchenliuwei/article/details/88351059
今日推荐