基于SSH的BootstrapTable插件使用小记

Struts.xml部分

<package name=" " namespace="/clue" extends="json-default">        <global-results>            <result name="success">/workbench/clue/index.jsp</result>        </global-results>        <action name="getAllClue" class="clueAction" method="getAllClue">            <result type="json">                <param name="root">map</param>            </result>        </action></package>

Action部分

public class ClueAction{    private static String SUCCESS = "success";     private ClueVo clueVo;    private PageUtil pageUtil;     private ClueService clueService;    //set、get 方法    @SuppressWarnings("unchecked")    public String getAllClue(){        Map<String,Object> resultMap = clueService.getAllClue(clueVo,pageUtil);        int total = (int)resultMap.get("total");        List<ClueVo> rows = (List<ClueVo>)resultMap.get("clueList");        //因插件要求，返回数据的key必须为“total”和“rows”        map.put("total", total);        map.put("rows", rows);        JsonUtils.writeToJson(map);        return SUCCESS;    }}

Service部分

public class ClueServiceImpl implements ClueService {    private ClueDao clueDao;    @Override    public Map<String,Object> getAllClue(ClueVo clueVo,PageUtil pageUtil) {        return clueDao.getAllClue(clueVo,pageUtil);    }}

Dao部分

public class ClueDaoImpl implements ClueDao {    private SessionFactory sessionFactory;    //set get 方法    @Override    public Map<String,Object> getAllClue(ClueVo clueVo,PageUtil pageUtil) {        Map<String,Object> resultMap = new HashMap<String,Object>();        Criteria createCriteria = getSession().createCriteria(ClueVo.class);        //设置参数 获取所有线索的记录数        int total = getClueCounts(createCriteria,clueVo).intValue();        //设置参数 查询所有线索数据        createCriteria = setCriteria(createCriteria, clueVo);        //根据每页显示的数量和总记录数        int pageNo = pageUtil.getPageNo();        //此处第一页为0 故+1        if(pageNo==0){            pageNo++;        }        int pageSize = pageUtil.getPageSize();//因前面查询记录数设置了createCriteria ，故应该获取新的createCriteria 来查询数据        Criteria createCriteria2 = getSession().createCriteria(ClueVo.class);        createCriteria2 = setCriteria(createCriteria2, clueVo);        createCriteria2.setFirstResult((pageNo-1)*pageSize);        createCriteria2.setMaxResults(pageSize);        createCriteria2.addOrder(Order.desc("createTime"));        List<Clue> clueList = createCriteria2.list();        //将总记录数和总页数更新到分页实体类中        resultMap.put("total",total);        resultMap.put("clueList",clueList);        return resultMap;    }

根据参数获取总记录数的方法

public Long getClueCounts(Criteria criteria,ClueVo clueVo){        criteria = setCriteria(criteria,clueVo);        criteria = criteria.setProjection(Projections.rowCount());        Long count = (Long) criteria.uniqueResult();        return count;    }

根据动态参数设置Criteria

//根据参数是否为空，动态生成QBC查询条件public Criteria setCriteria(Criteria criteria,ClueVo clueVo){        if(clueVo.getFullName()!=null && !"".equals(clueVo.getFullName())){            criteria.add(Restrictions.eq("fullName",clueVo.getFullName()));        }        return criteria;    }

html部分

<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">        <div style="width: 200%; position: absolute;top: 5px; left: 10px;">            <div class="btn-toolbar" role="toolbar" style="height: 80px;">                <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">                  <div class="form-group">                    <div class="input-group">                      <div class="input-group-addon">名称</div>                      <input id="searchFullName" class="form-control" type="text">                    </div>                  </div>                  <button id="searchButton" type="button" class="btn btn-default">查询</button>                </form>            </div>            <br>            <div id="toolbar" class="btn-group">                <button id="addButton"  type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>创建</button>                <button id="editButton" type="button" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span>修改 </button>                <button id="delButton"  type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span>删除</button>            </div>            <table id="clueTable" class="table table-hover">            </table>        </div>    </div>

JS部分

$(function(){    pageList();});    function pageList(){           //1.初始化Table            var oTable = new TableInit();            oTable.Init();            //2.初始化Button的点击事件            var oButtonInit = new ButtonInit();            oButtonInit.Init();    }    var TableInit = function(){        var oTableInit = new Object();        //初始化Table        //基于SSH的BootstrapTable插件使用        oTableInit.Init = function(){            $("#clueTable").bootstrapTable({                url : "clue/getAllClue.action",         //请求后台的URL（*）                method : "get",                      //请求方式（*）                toolbar : "#toolbar",                //工具按钮用哪个容器                striped : true,                      //是否显示行间隔色                cache : false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）                pagination : true,                   //是否显示分页（*）                sortable : false,                     //是否启用排序                sortOrder : "desc",                   //排序方式                queryParams: oTableInit.queryParams,//传递参数（*）                sidePagination : "server",           //分页方式：client客户端分页，server服务端分页（*）                pageNumber :1,                       //初始化加载第一页，默认第一页                pageSize : 5,                       //每页的记录行数（*）                pageList : [5,10],        //可供选择的每页的行数（*）                search : false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大                strictSearch : true,                showColumns : true,                  //是否显示所有的列                showRefresh : true,                  //是否显示刷新按钮                minimumCountColumns : 2,             //最少允许的列数                clickToSelect : true,                //是否启用点击选中行                //height : 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度                uniqueId : "ID",                     //每一行的唯一标识，一般为主键列                showToggle :false,                    //是否显示详细视图和列表视图的切换按钮                cardView : false,                    //是否显示详细视图                detailView : false,                contentType: "application/x-www-form-urlencoded",                paginationPreText: "上一页",                paginationNextText: "下一页",                //是否显示父子表                columns: [{                    checkbox: true                }, {                    field : "company",                    title : "公司"                }, {                    field : "phone",                    title : "电话"                }, {                    field : "mphone",                    title : "手机"                },{                    field : "email",                    title : "邮箱"                },{                    field : "source",                    title : "来源"                },{                    field : "owner",                    title : "所有者"                },]            });        };        //得到查询的参数        oTableInit.queryParams = function (params) {            var temp = {                   //键的名字和后台代码中的实体类的属性名一致                "pageUtil.pageSize" : params.limit,   //每页显示的数目                "pageUtil.pageNo" : params.offset,  //页码                 "clueVo.fullName" : $("#searchFullName").val(),                 "clueVo.company" : $("#searchCompany").val()            };            return temp;        };        return oTableInit;    };    var ButtonInit = function () {        var oInit = new Object();        var postdata = {};        oInit.Init = function () {            //初始化按钮        };        return oInit;    };

Spring配置文件略…

模态框禁用空白处点击关闭

$('#myModal').modal({backdrop: 'static', keyboard: false});

backdrop:static时,空白处不关闭.
keyboard:false时,esc键盘不关闭.