HTML5数据展示问题，不规则DIV内展示数据

Posted 2023-05-17

如图所示，DIV中固定一个DIV,剩余空间展示数据，有新的数据在最前面追加一个，后面所有的数据向后移动一下，这种不规则的数据展示如何实现？

可以采用浮动布局，当有新的数据到来的时候，后面的数据会自动向后移动。如果要保持高度不变，那么久需要宽度不做限制，这样，在横向的空间内就可以无限延展。

你可能会问下面的div怎么保证位置，你可以分层，每个div只在自己的层浮动，这样就不会浮动到其它层，不会移位，当然对于固定的位置，你也可以对他绝对定位，这样其它元素改变位置的时候，它依然可以保持自己的位置。 参考技术A 浮动布局吧。

ssh整合问题总结--使用HibernateTemplate实现数据分页展示

　　在进行大量的数据展示时,必须要使用分页查询,第一次使用在SSH框架整合中使用分页查询,遇到了一些问题,下面以我练习的项目为例详细介绍,如何在Spring+hibernate(+action)的环境下完成数据的分页查询.

　　在utils包下新建一个pageBean(这个实体类用于封装当前页面的数据集合,以及和page相关的参数):

public class PageBean<T> {

    private int page;//当前页数
    private int totalCount;//总记录数
    private int totalPage;//总页数(总记录数/每页记录数)
    private int limit;//每页记录数
    private List<T> list;//包含商品的集合
//set/get方法省略
}

在我的案例中,在页面中,当点击"全部商品"时,会跳入到(商品的action类)GoodsAction,并且传入一个参数page,默认为1.

GoodsAction:

public class GoodsAction extends ActionSupport implements ModelDriven<Goods>,ServletRequestAware{

    private GoodsService goodsService;
    private Goods goods=new Goods();
    HttpServletRequest request;
    
    private int page;
    /**
     * 展示所有商品
     * @return
     */
    public String showAll(){
        //List<Goods> gList=goodsService.findAll();
        PageBean<Goods> pagebean=goodsService.findByPage(page);
        ActionContext.getContext().getValueStack().set("pageBean", pagebean);
        return "findAll_succ";
    }
    
    public void setGoodsService(GoodsService goodsService) {
        this.goodsService = goodsService;
    }


    @Override
    public Goods getModel() {
        return goods;
    }

    @Override
    public void setServletRequest(HttpServletRequest request) {
        this.request=request;
    }
    public void setPage(int page) {
        this.page = page;
    }
    public int getPage() {
        return page;
    }
}

在action,需要返回得到pageBean的所有私有成员的信息,并且设置到值栈(ValueStack)栈顶,以供页面回显调用.

下面是GoodsService:

package com.wang.shop.goods.service;
import java.util.List;
import com.wang.shop.goods.dao.GoodsDao;
import com.wang.shop.goods.entity.Goods;
import com.wang.shop.util.PageBean;

public class GoodsService {

    private GoodsDao goodsDao;
    
    public void setGoodsDao(GoodsDao goodsDao) {
        this.goodsDao = goodsDao;
    }

    public PageBean<Goods> findByPage(int page) {
        PageBean<Goods> pageBean =new PageBean<Goods>();
        pageBean.setPage(page);
        int limit=4;
        pageBean.setLimit(limit);
        int totalCount=goodsDao.findTotalCount();
        pageBean.setTotalCount(totalCount);
        int totalpage=(int)Math.ceil(totalCount/limit);
        pageBean.setTotalPage(totalpage);
        //每页显示的数据集合
        int begin=(page-1)*limit;
        List<Goods> list=goodsDao.findByPageId(begin,limit);
        pageBean.setList(list);
        return pageBean;
    }
    
}

在service中,设置pageBean的每个属性,可以得到的直接设置,得不到的去Dao层中进行数据库查询.

GoodsDao:

package com.wang.shop.goods.dao;

import java.util.List;

import org.springframework.orm.hibernate4.HibernateCallback;
import org.springframework.orm.hibernate4.support.HibernateDaoSupport;

import com.wang.shop.goods.entity.Goods;
import com.wang.shop.util.PageHibernateCallback;

public class GoodsDao extends HibernateDaoSupport{

    public List<Goods> findAll() {
        List<Goods> list=(List<Goods>) this.getHibernateTemplate().find("from Goods");
        
        return list;
    }

    public Goods findById(int goodsId) {
        Goods goods=this.getHibernateTemplate().get(Goods.class, goodsId);
        return goods;
    }
     //查询goods表中总记录数
    public int findTotalCount() {
        String hql="select count(*) from Goods";
        List<Long> list=(List<Long>) this.getHibernateTemplate().find(hql);
        if(list!=null&&list.size()>0){
            return list.get(0).intValue();
        }
        return 0;
    }

    //查询当前页面的商品集合
    public List<Goods> findByPageId(int begin, int limit) {
        String hql="from Goods";
        List<Goods> list=(List<Goods>) this.getHibernateTemplate().execute((HibernateCallback<Goods>) new PageHibernateCallback(hql, new Object[]{}, begin, limit));
        if(list!=null&&list.size()>0){
            
            return list;
        }
        return null;
    }

}

注意这里我用到了一个PageHibernateCallback类,通常情况下,我们会写一个HibernateCallBack的匿名内部类,然后在里边写相关代码,为了代码复用,这里重新写了一个类来实现HibernateCallback接口,再通过泛型依赖注入,就可以得到一个工具类了.下面是代码.

PageHibernateCallback:

package com.wang.shop.util;

import java.sql.SQLException;
import java.util.List;

import org.hibernate.HibernateException;
import org.hibernate.Query;
import org.hibernate.Session;
import org.springframework.orm.hibernate4.HibernateCallback;

public class PageHibernateCallback<T> implements HibernateCallback<List<T>>{
    
    private String hql;
    private Object[] params;
    private int startIndex;
    private int pageSize;
    

    public PageHibernateCallback(String hql, Object[] params,
            int startIndex, int pageSize) {
        super();
        this.hql = hql;
        this.params = params;
        this.startIndex = startIndex;
        this.pageSize = pageSize;
    }



    public List<T> doInHibernate(Session session) throws HibernateException {
        Query query = session.createQuery(hql);
        
        if(params != null){
            for(int i = 0 ; i < params.length ; i ++){
                query.setParameter(i, params[i]);
            }
        }
        
        query.setFirstResult(startIndex);
        query.setMaxResults(pageSize);
        
        return query.list();
    }

}

　　上面代码的构造方法中的第二个参数是一个object类型的数组,用于设置hql语句中的"?",如果你没有这个参数,可以在调用的时候,写为 new Object[]{}.

　　以上就可以实现,数据的分页查询了.