datagrid-expandrow(Java+Mysql+EasyUi实现)

 数据库:m_goods

 

看完效果图:直接上代码

1.test.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <meta name="keywords" content="jquery,ui,easy,easyui,web">  
    <meta name="description"  
        content="easyui help you build your web page easily!">  
    <title>Expand row in DataGrid to show subgrid - jQuery EasyUI  
        Demo</title>  
    <link rel="stylesheet" type="text/css"  
        href="http://www.jeasyui.com/easyui/themes/default/easyui.css">  
    <link rel="stylesheet" type="text/css"  
        href="http://www.jeasyui.com/easyui/themes/icon.css">  
    <link rel="stylesheet" type="text/css"  
        href="http://www.jeasyui.com/easyui/demo/demo.css">  
    <script type="text/javascript"  
        src="http://code.jquery.com/jquery-1.4.4.min.js"></script>  
    <script type="text/javascript"  
        src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>  
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script> 
    </head>  
    <body>  
          <table id="dg" style="width:1850px;height:850px"
            url="goods/onshow2"
            pagination="true" sortName="itemid" sortOrder="desc"
            title="扩展行"
            singleSelect="true" fitColumns="true">
        <thead>
            <tr>
             	<th field="gid" width="60">商品id</th>	
                <th field="gname" width="60">商品名</th>
                <th field="price" width="80">商品单价</th>
                <th field="count" align="right" width="70">商品库存</th>
                <th field="factory" align="right" width="70">生产厂商</th>
            </tr>
        </thead>
    </table>
        <script type="text/javascript">  
        $('#dg').datagrid({
            view: detailview,
            detailFormatter:function(index,row){
                return '<div class="ddv" style="padding:5px 0"></div>';
            },
            onExpandRow: function(index,row){
                var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
                ddv.panel({
                    border:false,
                    cache:false,
                    href:'ShowGoodsDetails?gid='+row.gid,
                    onLoad:function(){
                        $('#dg').datagrid('fixDetailRowHeight',index);
                    }
                });
                $('#dg').datagrid('fixDetailRowHeight',index);
            }
        });
        </script>  
    </body>  
    </html>  

2.GoodsOnShowServlet2

package com.xintouyun.medicine.background.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.google.gson.Gson;
import com.xintouyun.medicine.entity.Goods;
import com.xintouyun.medicine.entity.Provider;
import com.xintouyun.medicine.entity.User;
import com.xintouyun.medicine.model.DataGrid;
import com.xintouyun.medicine.service.GoodsService;
import com.xintouyun.medicine.service.UserService;
import com.xintouyun.medicine.service.impl.GoodsServiceImpl;
import com.xintouyun.medicine.service.impl.UserServiceImpl;
@WebServlet("/goods/onshow2")
public class GoodsOnShowServlet2 extends HttpServlet{
	public void doGet(HttpServletRequest request,HttpServletResponse response) throws IOException,ServletException{		
		
		PrintWriter out=response.getWriter();
		
		int pid=1;
		//1.获取参数
		String page=request.getParameter("page");
		String rows=request.getParameter("rows");
		 // 2.业务响应		
		GoodsService goodsService = new GoodsServiceImpl();
		DataGrid<Goods> data= goodsService.shop_goods_OnList(Integer.parseInt(page),Integer.parseInt(rows), pid);
		 //3.响应
		Gson gson=new Gson();
		String json=gson.toJson(data);
		out.print(json);
		out.close();
	}
	public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException,ServletException{		
		this.doGet(request, response);
	}
}

3.ShowGoodsDetails

package com.xintouyun.medicine.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.xintouyun.medicine.entity.Goods;
import com.xintouyun.medicine.model.Page;
import com.xintouyun.medicine.service.GoodsService;
import com.xintouyun.medicine.service.impl.GoodsServiceImpl;
@WebServlet("/ShowGoodsDetails")
public class ShowGoodsDetails extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		HttpSession session = request.getSession();
		//1.获取参数........
		String gid=request.getParameter("gid");
		System.out.println("gid:"+gid);
		GoodsService goodsService = new GoodsServiceImpl();
		Goods goods = goodsService.show_goods_details(Integer.parseInt(gid));
		session.setAttribute("goods", goods);
		System.out.println("gname:"+goods.getGname());
		request.getRequestDispatcher("goodsDetail.jsp").forward(request, response);
	}
	
	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doGet(request, response);
		
	}
}

4.showgoodsDetail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>   
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table class="dv-table" border="0" style="width:100%;">
    <tr>
        <td rowspan="3" style="width:60px">
            	<img src="${goods.fileName }"></img>
        </td>
        <td class="dv-label">商品名: </td>
        <td>${goods.gname }</td>
        <td class="dv-label">商品单价:</td>
        <td>${goods.price }</td>
    </tr>
    <tr>
        <td class="dv-label">商品库存: </td>
        <td>${goods.price }</td>
        <td class="dv-label">生产厂商:</td>
        <td>${goods.factory }</td>
    </tr>
    <tr>
        <td class="dv-label">商品详情: </td>
        <td colspan="3">${goods.content }</td>
    </tr>
</table>
</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值