bootstrap使用问题总结

最新推荐文章于 2024-04-27 23:07:09 发布

牛城小将

最新推荐文章于 2024-04-27 23:07:09 发布

阅读量1.4k

点赞数

分类专栏：其他文章标签： bootstrap

其他专栏收录该内容

29 篇文章 0 订阅

订阅专栏

bootstrap bootstrapTable 参数传递问题:
假设传递方法执行POST,则系列配置必须一起,否则后台获取不到数据.原因post默认会以application/json 方式传输,影响数据接收.
如果没有指定post方式，参数形式,或者request.getParameter(“XX”);都可以获取数据

method : "POST", //使用get请求到服务器获取数据  
contentType: "application/x-www-form-urlencoded",

后台接收实例:

//参数接收形式自选
@ResponseBody
    @RequestMapping(value = "/catedata")
    public String catejson(HttpServletRequest request,Integer cateId,String pagesd) {
        String  id = request.getParameter("pagesd");
//      int cateId = Integer.valueOf(id);
        Map<String, Object> map = new HashMap<>();
        map.put("cateId", cateId);
        List<CateData> list = cateDataDao.selectByMap(map);
        return UtilJson.toJson(list);
    }

bootstrap bootstrapTable 使用实例

HTML jsp页面:

<div class="too">
        <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="table"></table>
    </div>

bootstrap bootstrapTable 相关设置:

function initTable() {
        //先销毁表格  
        $('#table').bootstrapTable('destroy');
        //初始化表格,动态从服务器加载数据  
        $("#table")
                .bootstrapTable(
                        {
                            method : "POST", //使用get请求到服务器获取数据  
                            contentType: "application/x-www-form-urlencoded",
                            url : "${pageContext.request.contextPath}/resume/catedata/catedata",//获取数据的Servlet地址  
                            queryParams: queryParams,
                            toolbar : '#toolbar', //工具按钮用哪个容器
                            striped : true, //表格显示条纹  
                            pagination : true, //启动分页  
                            pageSize : 5, //每页显示的记录数  
                            pageNumber : 1, //当前第几页  
                            pageList : [ 5, 10, 15, 20, 25 ], //记录数可选列表  
                            //idField : "id", //指定主键列
                            uniqueId : "id",//每一行的唯一标识，一般为主键列
                            search : true, //是否启用查询  
                            showColumns : true, //显示下拉框勾选要显示的列  
                            showRefresh : true, //显示刷新按钮  
                            sidePagination : "client", //表示客户端分页  
                            columns : [ {
                                checkbox : true
                            }, {
                                field : 'id',
                                title : 'id',
                                visible : false
                            }, {
                                field : 'content',
                                title : '信息描述'
                            }, {
                                field : 'isopen',
                                title : '是否公开',
                                formatter : function(value, row, index) {
                                    if ("1" == row.isopen) {
                                        return "不公开";
                                    } else {
                                        return "公开";
                                    }
                                }
                            }/* , {
                field : 'button',
                title : '操作',
                events : actionEvents,
                formatter : actionFormatter
            }  */],
                            onLoadSuccess : function(data) { //加载成功时执行  
                                //alert("加载成功!" + data);
                            },
                            onLoadError : function(data) { //加载失败时执行  
                                //alert("加载失败!" + data);
                            }
                        });
    }

// 显示操作类型
function actionFormatter(value, row, index) {
        return '<a class="mod" >修改</a> '
                + '<a id="delete">删除</a>';
    }
//绑定事件操作 可通过ID 或者class 绑定(自选=书写形式参考jquery)
    window.actionEvents = {
        'click .mod' : function(e, value, row, index) {
            window.open(
                    "${pageContext.request.contextPath}/user/updateuser?id="
                            + row.id, "_self");
        },
        'click #delete' : function(e, value, row, index) {
            if (row) {
                $.ajax({
                    type : 'POST',
                    url : '${pageContext.request.contextPath}/user/deleteuser',
                    data : {
                        id : row.id
                    },
                    success : function(data) {
                        if (data) {
                            alert("删除成功!");
                        }
                    },
                    error : function() {
                        alert("删除失败!");
                    }
                })
            }
        }
    }

参数类:

$(document).ready(function() {
        //调用函数，初始化表格  
        initTable();
    });

    function queryParams(params){
        var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                cateId: "10",
                pagesd:"234"
        };
        return temp;
    }

按钮绑定,获取选中行数据:

$("#btn_edit").click(function() {
        var row = $('#table').bootstrapTable('getSelections');
        if (row.length == 0) {
            alert("请先选中数据进行操作!");
        }
        if (row.length > 1) {
            alert("只能选择一行,请重新选择!")
        }
        if (row.length == 1) {
            //处理逻辑
            var updateurl = '${pageContext.request.contextPath}/resume/catedata/update?id='
                    + row[0].id;
            content = '<iframe src="'
                    + updateurl
                    + '+" scrolling="auto" frameborder="0" style="width: 100%; height: 100%;"></iframe>';
            $("#catedetail").html(content);
            //绑定easyui弹窗,可选
            $('#dlg').dialog({
                title : '修改模块详细信息',
                width : 650,
                height : 400
            });
        }
    })

分行情况下参数传递:

function queryData() {
        var PageParam = new Object();
        var ParamMap = attrDatas();
        PageParam.page = params.pageSize ;
        PageParam.pageSize = params.pageNumber;
        var paramsMap = JSON.stringify(ParamMap);
        var map = eval("(" + paramsMap + ")");
        PageParam.searchContent = map;
        var paramsShow = JSON.stringify(PageParam);
}

PageParam 对应的java类结构(适用自定义分页):

public class PageParam {

    private int page;// 当前页
    private int pageSize;// 每页显示的个数
    private Map<String, Object> searchContent;// 查询map
    private List<Order> sort;// 排序集合

    // 存储用户信息 放到查询map中

    public Map<String, Object> getSearchContent() {
        return searchContent;
    }

    public void setSearchContent(Map<String, Object> searchContent) {
        // if(searchContent.get("filter")!=""&&searchContent.get("filter")!=null)
        // {
        // System.out.println(searchContent.get("filter"));
        // }
        this.searchContent = searchContent;
    }

    public int getPage() {
        return page;
    }

    public void setPage(int page) {
        this.page = page;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public List<Order> getSort() {
        return sort;
    }

    public void setSort(List<Order> sort) {
        this.sort = sort;
    }

}