关于老赵让改成bootstrap框架搭建的过程

最新推荐文章于 2021-02-27 11:41:06 发布

xlj3

最新推荐文章于 2021-02-27 11:41:06 发布

阅读量898

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/luman1991/article/details/53440063

版权

bootstrap 专栏收录该内容

0 篇文章

订阅专栏

客户就是上帝，你大爷的！

jsp代码：数据与springMvc交互

<!DOCTYPE>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="/WEB-INF/tlds/im.tld" prefix="im" %>
<%@ page isELIgnored="false"%>
<%
	String rootPath = request.getContextPath();
%><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta name="viewport" content="width=device-width" />
 <title>BootStrap Table使用</title>
<link href="<%=rootPath%>/pages/artifiForm/bootstrap.min.css" rel="stylesheet" />
<link href="<%=rootPath%>/pages/artifiForm/bootstrap-table.css" rel="stylesheet" />
<script type="text/javascript" src="<%=rootPath%>/pages/artifiForm/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="<%=rootPath%>/pages/artifiForm/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=rootPath%>/pages/artifiForm/bootstrap-table.js"></script>
<script type="text/javascript" src="<%=rootPath%>/pages/artifiForm/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript">
var rootPath = "<%=rootPath%>";	
var baseURL = rootPath +"/pages/artifiForm/";
var url = baseURL+"getBootstrap.json";
$(function () {

    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();

    //2.初始化Button的点击事件
    var oButtonInit = new ButtonInit();
    oButtonInit.Init();

});


var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#list_data').bootstrapTable({
            url: url,        					 
            method: 'get',                      //请求方式（*）
            sortName: "flowid",                 //排序列 
            singleSelect: true,                 //仅允许单选 
            escape: true,                       //过滤危险字符
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            pageIndex: 1,                       //起始页
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            columns: [{
                checkbox: true
            }, {
                field: 'name',
                title: '模板名称'
            }, {
                field: 'flowid',
                title: '流程ID'
            }, {
                field: 'flowname',
                title: '流程名称'
            }, {
                field: 'url',
                title: '模板URL'
            },{
                title: '操作',
                field: 'id',
                align: 'center',
                formatter:function(value,row,index){  
		             var e = '<a href="#" mce_href="#" οnclick="edit(\''+ row.id + '\')">编辑</a> ';  
		             var d = '<a href="#" mce_href="#" οnclick="del(\''+ row.id +'\')">删除</a> ';  
                 	 return e+d;  
              }}, ]
        });
    };

    
    oTableInit.queryParams = function (params) {
        var temp = {   
        	rows: params.limit,   
        	page: params.pageNumber,  
        	search:params.search,
        };
        return temp;
    };
    return oTableInit;
};


var ButtonInit = function () {
    var oInit = new Object();
    var postdata = {};

    oInit.Init = function () {
        //初始化页面上面的按钮事件
    };

    return oInit;
};

</script>
</head>
<body>
    <div class="panel-body" style="padding-bottom:0px;">
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group" style="margin-top:15px">
                        <label class="control-label col-sm-1" for="txt_search_departmentname">模板名称</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="txt_search_departmentname">
                        </div>
                        <label class="control-label col-sm-1" for="txt_search_statu">状态</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="txt_search_statu">
                        </div>
                        <div class="col-sm-4" style="text-align:left;">
                            <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>       

        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
        </div>
        <table id="list_data"></table>
    </div>
</body>
</html>

java测试代码：

/**
	 * bootStrap测试
	 */
	@RequestMapping(value = "getBootstrap.json")
	public PageView getBootstrap(HttpServletRequest request,HttpServletResponse response) {
		IMap params = new IMap(request);
		int pageSize = Integer.valueOf(params.getString("rows").equals("")?"1":params.getString("rows"));
		int pageNow = Integer.valueOf(params.getString("page").equals("")?"10":params.getString("page"));
		PageView pageView = new PageView(pageSize, pageNow);
		pageView = pimArtifiDefineFormSrv.getAtrifiFormList(pageView, params);
		return pageView;
	}

注意：有的版本的bootstrap-table或min.js要改源码，就看后台数据是要什么了，我们要的是limit和pageNumber不要params.offset，但有的js没有

只能改源码

如下加入了

params.pageNumber=this.options.pageNumber;；

if (this.options.queryParamsType === 'limit') {
            params = {
                search: params.searchText,
                sort: params.sortName,
                order: params.sortOrder
            };

            if (this.options.pagination) {
                params.offset = this.options.pageSize === this.options.formatAllRows() ?
                    0 : this.options.pageSize * (this.options.pageNumber - 1);
                params.limit = this.options.pageSize === this.options.formatAllRows() ?
                    this.options.totalRows : this.options.pageSize;
                params.pageNumber=this.options.pageNumber;
            }
        }