Bootstrap table的使用，与后台数据连接，可自动翻页（客户端翻页）

其他 2019-02-28 02:08:21 阅读次数: 0

项目源码下载上传于csdn：点击打开链接


参考文章：

http://blog.csdn.net/lzxadsl/article/details/49181127


原来的文章并没有实现后台程序，我试着改造了一下。用java实现了json数据传送和查询条件的动态数据。



界面效果如下：




运行环境JDK8，Tomcat8.5



Bootstrap版本： v3.3.7 (http://getbootstrap.com)

Bootstrap table控件版本：version: 1.11.0 https://github.com/wenzhixin/bootstrap-table/

参数介绍和说明参考官方网站：http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/



主要函数说明：

    //编辑表格
            $('#reportTable').bootstrapTable({
                method: 'post',
                editable:false,//开启编辑模式
                clickToSelect: true,
                columns: [             ],  //表头和栏目数据定义
                 url:'/bts/DataList', //请求数据的URL，例如：http://localhost:8080/bts/DataList
                 dataType:'json', //服务器返回数据类型，
//                 //contentType:'application/json', //发送服务器数据类型
//                 ajaxOptions:'{"realname":"李四"}'    ,//提交ajax请求时的附加参数，可用参数列请查看http://api.jquery.com/jQuery.ajax.
//                 cache: false,
                    pagination    : true,
                     pageNumber: 1,                       //初始化加载第一页，默认第一页
                    pageSize: 2,                       //每页的记录行数（*）
                    pageList: [2, 4, 8],        //可供选择的每页的行数（*）
                data : []
            });


后台数据实现是纯servlet，模拟一下json对象的数据。

方法如下：


protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
        String queryStr=request.getParameter("realname");
        System.out.println("查询参数："+queryStr);
        String jsonRet = "[{\"realname\":\"王三\",\"card_id\":\"620511199410183376\",\"phone\":\"13652671416\",\"usremail\":\"\",\"credit\":0},"
                + "{\"realname\":\"李四\",\"card_id\":\"110102198506020018\",\"phone\":\"18951295644\",\"usremail\":\"[email protected]\",\"credit\":0},"
                + "{\"realname\":\"李6\",\"card_id\":\"110102198506020018\",\"phone\":\"18951295644\",\"usremail\":\"[email protected]\",\"credit\":0},"
                + "{\"realname\":\"李7\",\"card_id\":\"110102198506020018\",\"phone\":\"18951295644\",\"usremail\":\"[email protected]\",\"credit\":0},"
                + "{\"realname\":\"李8\",\"card_id\":\"110102198506020018\",\"phone\":\"18951295644\",\"usremail\":\"[email protected]\",\"credit\":0},"
                + "{\"realname\":\"周八皮\",\"card_id\":\"430202198709111516\",\"phone\":\"13915979089\",\"usremail\":\"[email protected]\",\"credit\":0}]";

        String jsonRetQuery = "[{\"realname\":\"王三\",\"card_id\":\"620511199410183376\",\"phone\":\"13652671416\",\"usremail\":\"\",\"credit\":0},"
                            + "{\"realname\":\"周八皮\",\"card_id\":\"430202198709111516\",\"phone\":\"13915979089\",\"usremail\":\"[email protected]\",\"credit\":0}]";
        if(queryStr==null || ("").equals(queryStr)){
            resposWrite(response, jsonRet);
        }else{
            resposWrite(response, jsonRetQuery); //条件查询，记录变少了
        }
    }


后记:

getRowByUniqueId

Get data from table, the row that contains the id passed by parameter: $table.bootstrapTable('getRowByUniqueId', 1);

这个方法必须设置表格的唯一主键。

formatter注意问题：如果参数为纯数字而且又超级长，则会有精度问题，传到js中会损失掉后面的数据，必须强制加上\‘，将参数变成字符串才可以正确。

                                        formatter : function(value, row,
                                                rowIndex) {
                                            
                                            var strHtml = '<a href="javascript:void(0);" onclick="modyRow('
                                                    + value
                                                    + ')">详情</a> &nbsp;<a href="javascript:void(0);" onclick="grayMdy(\''
                                                    + value +'\')">加入灰名单</a>&nbsp;<a href="javascript:void(0);" onclick="removeRow('
                                                    + value + ')">加入白名单</a>';
                                            return strHtml;
                                        },

==========================================================================

以上方式为JS翻页，client处理翻页数据，下面给出服务器翻页额例子，红字部分是必需注意的参数，注意服务器返回数据必需包含total，rows两个参数内容：


js：

        //编辑表格
        $('#reportTable').bootstrapTable({
            method : 'post',
            editable : false,//开启编辑模式
            clickToSelect : true,
            columns : [
            [            {
                field : "user_id",
                edit : false,
                title : "主键",
                visible : false, //隐藏列
                align : "center"

            }, {
                field : "realname",
                edit : false,
                title : "姓名",
                align : "center",
                width : "100px"
            }, {
                field : "card_id",
                title : "身份证号",
                align : "left",
                width : "166px"
            }, {
                field : "phone",
                title : "手机号码",
                align : "left",
                width : "115px"
            }, {
                field : "email",
                title : "邮箱",
                align : "left",
                width : "160px"
            },
             {
                field : "memo",
                title : "备注",
                align : "left",
                width : "200px"
            },
             {
                field : "statusEcho",
                title : "工作状态",
                align : "center"
            },
             {
                field : "second_statusEcho",
                title : "是否停用",
                visible : false, //隐藏列
                align : "center"
            },            
            {
                field : "user_id",
                title : "操作",
                align : "center",
                formatter : function(value, row,
                        rowIndex) {
                    var sEcho=row.statusEcho;
                    var butText='';
                    if(sEcho=='启用'){
                        butText='停用';
                    }else if(sEcho=='停用'){
                        butText='启用';
                    }
                    var strHtml = '<a href="javascript:void(0);" onclick="queryDetail(\''
                            + value +'\')" class="td-btn">查看</a>&nbsp;<a href="javascript:void(0);" onclick="queryMdy(\''
                            + value + '\')" class="td-btn">修改</a>&nbsp;<a href="javascript:void(0);" onclick="stopUser(\''
                                + value + '\')" class="td-btn">'+butText+'</a>';
                    return strHtml;
                },
                edit : false
            } ] ],
            url : GRCpre + "/apiBack/userList2.do", //请求数据的URL，例如：http://localhost:8080/bts/DataList
            dataType : 'json', //服务器返回数据类型，
            contentType:'application/x-www-form-urlencoded; charset=UTF-8', //发送服务器数据类型
            //                 ajaxOptions:'{"realname":"李四"}'    ,//提交ajax请求时的附加参数，可用参数列请查看http://api.jquery.com/jQuery.ajax.
            cache: false,
            queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset(记录指针),limit（每页条数）,sort
            // 设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber
                            ////查询参数,每次调用是会带上这个参数，可自定义                         
            queryParams : function(params){
                 var state = $('#state option:selected').val();
                 var querC = $('#querC').val();
                 alert(params);
                 return {
                     //  pageNumber: params.offset+1,
                     //  pageSize: params.limit,
                       pageNumber: params.pageNumber,
                       pageSize: params.pageSize,
                       state:state,
                       querC:querC
                     };
             },
             //分页方式：client客户端分页，server服务端分页（*）
            sidePagination: "server",
            pagination : true,
            pageNumber : 1, //初始化加载第一页，默认第一页
            pageSize : 2, //每页的记录行数（*）
            //pageList : [ 10 ], //可供选择的每页的行数（*）
            data : []
        });

    });


    /**
   自定义查询按钮
     */
    function queryTab() {
        var jsonuserinfo = $("#form1").serialize();
        jQuery.ajax({
            type : "POST",
            url : GRCpre+"/apiBack/credit/imp/getList3.do",
            data : jsonuserinfo,
            dataType : 'json',
            success : function(result) {
                var retCode = result.RespCode;

                if (retCode == '000') {
                    var listJson = result.rows;
                    //alert(listJson);
                    $('#reportTable').bootstrapTable('load', result);
                } else {
                    if (retCode == '400' || retCode == '401') {
                        logoutInfo(retCode);
                    }else{
                        alert(retCode+":"+result.RespDesc);
                    }
                }

            },
            error : function(jqXHR, textStatus, errorThrown) {
                /*弹出jqXHR对象的信息*/
                alert(jqXHR.responseText);
                alert(jqXHR.status);
//                 alert(jqXHR.readyState);
//                 alert(jqXHR.statusText);
//                 /*弹出其他两个参数的信息*/
//                 alert(textStatus);
//                 alert(errorThrown);
            }
        });

        //alert(333);
    }



=====================================================================

java服务器代码部分：


    /**
     * 催收员列表查询
     */
    @ResponseBody
    @RequestMapping("apiBack/userList2.do")
    public HashMap<String, Object> userList2(HttpSession session,String querC,String state,Integer pageNumber,Integer pageSize) {
        HashMap<String, Object> retTable = new HashMap<String, Object>();
        System.out.println("pageNumber:"+pageNumber+"pageSize:"+pageSize);
        List<SquAduser> userList=colUsrService.userList(querC,state,pageNumber,pageSize);
        retTable.put("RespDesc", "成功！！");
        retTable.put("RespCode", "000");
        retTable.put("rows", userList);
        retTable.put("total",userList.size());
        return retTable;
    }




=============================================================================

与多选框联系使用

    $('#reportTable').bootstrapTable({
        method : 'post',
        editable : false,//开启编辑模式
        clickToSelect : false,
        columns : [
        [            
            {
                
                
                checkbox: true
                
            },
            {
            field : "user_id",
            edit : false,
            title : "主键",
            visible : false, //隐藏列
            align : "center"

        },
        {  
            //field: 'Number',//可不加  
            title: '序号',//标题  可不加  
            align : "center",
            width : "132px",
            formatter: function (value, row, index) {  
                return index+1;  
            }  
        }

。。。。。

        pagination : true,
        pageNumber : 1, //初始化加载第一页，默认第一页
        pageSize : 10, //每页的记录行数（*）
        pageList : [ 10 ], //可供选择的每页的行数（*）
        data : []
    });

});


增加红字部分配置，则会多出一栏多选框，并且支持全选和取消，JS部分获取选中项如下：



//显示新增
function addUser(){
     var selectContent = $('#reportTable').bootstrapTable('getSelections'); //获得多项的行数据
     alert(JSON.stringify(selectContent));
。。。。。

}


选中项会解析为一组json对象，包含多选的每一行数据：

例如：

[
    {
        "0": true,
        "user_id": 49,
        "username": "wuzhudan",
        "email": "",

        "logintime": 0,
        "last_ip": "",
        "last_time": 0,
        "status": 2,
        "statusEcho": "初始密码",
        "second_status": 0,
        "second_statusEcho": null,
        "errtime": 0,
        "reg_timeEcho": null,
        "up_timeEcho": null,
        "userType": 1,
        "userTypeEcho": "1",
        "up_ip": null,
        "up_time": 1496801232,
        "card_id": "",
        "phone": "18613807256",
        "memo": "",

        "ipList": "*"
    },
    {
        "0": true,
        "user_id": 48,
        "username": "xnnc",
        "email": "",

        "logintime": 33,
        "last_ip": "0:0:0:0:0:0:0:1",
        "last_time": 1498110398,
        "status": 0,
        "statusEcho": "启用",
        "second_status": 0,
        "second_statusEcho": null,
        "errtime": 0,
        "reg_timeEcho": null,
        "up_timeEcho": null,
        "userType": 1,
        "userTypeEcho": "1",
        "up_ip": "0:0:0:0:0:0:0:1",
        "up_time": 1498032156,
        "card_id": "",
        "phone": "15810001961",
        "memo": "",

        "ipList": "*"
    },
    {
        "0": true,
        "user_id": 47,
        "username": "qyjf",
        "email": "",

        "logintime": 195,
        "last_ip": "113.208.117.10",
        "last_time": 1499048783,
        "status": 0,
        "statusEcho": "启用",
        "second_status": 0,
        "second_statusEcho": null,
        "errtime": 0,
        "reg_timeEcho": null,
        "up_timeEcho": null,
        "userType": 2,
        "userTypeEcho": "2",
        "up_ip": "0:0:0:0:0:0:0:1",
        "up_time": 1499048115,
        "card_id": "",
        "phone": "17715611687",
        "memo": "",

        "ipList": "*"
    }
]

猜你喜欢

转载自blog.csdn.net/rishengcsdn/article/details/53669180
今日推荐
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
周排行
阿里云短信服务平台注册
Windows下的字符串处理(1)
sqoop: mysql导入数据到hdfs, hive, hbase
commons.lang中常用的工具类
离线安装PostgreSQL11.6
使用PyTorch简单实现卷积神经网络模型
一文彻底搞定谱聚类
一道面试题引发的血案
One Chat for Mac(聊天工具)
TCP/IP的底层队列是如何实现的？
每日归档
更多
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022