bootstrap table总结, bootstrap表格带参请求,基本设置项,bootstrap表格返回参数处理

bootstrap table是bootstrap的引申插件,使用简单,引入,css,js等就可以使用。

首先分享一下网址,基本的入门和配置项文档都有了,可以先学习一下。


入门:bootstrap table中文网 bootstrap table中文网

http://bootstrap-table.wenzhixin.net.cn/zh-cn/

前端代码

我把它写在了一个方法里,注释都很清楚

function creatmodlelist(){
	
	var datechose = $('#modledate').val();
	//临时
	  datechose="2018-02-26";
	  
	//先销毁表格
    $('#detailtable').bootstrapTable('destroy'); 
    $('#detailtable').bootstrapTable({
    	//基本设置
    	url:"faillist.json",
        method: 'get',						//请求方法
        sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
    	striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
        pagination: true,                   //是否显示分页(*)
        sortable: false,                     //是否启用排序
        
        //分页设置
        pagination: true,                   //是否显示分页(*)
        pageNumber:1,                       //初始化加载第一页,默认第一页
        pageSize: 10,                       //每页的记录行数(*)
        pageList: [2, 10, 25, 100],        //可供选择的每页的行数(*)
        
        //外置div区域的工具栏
        toolbar: '#toolbar', //工具按钮用哪个容器
        
        //查询参数,每次调用是会带上这个参数,可自定义                         
                queryParams : function(params) {
                	var faildate = $('#modledate').val();
                	//临时
	  				faildate="2018-02-26";
                    return {
                          pageNum: params.offset+1,
                          pageSize: params.limit,
                          date:faildate
                        };
                },
        //返回数据格式处理
        responseHandler: function(res) {
                return {
                    "total": res.DATA.totalRecordCount,//总页数
                    "rows": res.DATA.itemsList   //数据
                 };
            },
        
        //工具栏
        search:true,						//是否启用搜索框
        searchOnEnterKey:true,				//按回车触发搜索方法
        showColumns: true,                  //是否显示所有的列
        showRefresh: true,                  //是否显示刷新按钮
        showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
        
        //列信息和列设置
        columns: [{
	        field: 'city',
	        title: '地市',
	    }, {
	        field: 'mobile',
	        title: '编号'
	    }, {
	        field: 'orgTime',
	        title: '执行日期'
	    }, {
	        field: 'stage',
	        title: '阶段'
	    }]
    });
}

注意:

    一,bootstrap table 不允许跨域访问,会报错。

        大致意思是本地的链接不能访问其他地方

        解决方式可以用jsonp,这里不多说了。

Failed to load http://.../Manager?action=findAllFail&pageNum=1&pageSize=10&date=2018-02-26&_=1519976999637: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8020' is therefore not allowed access.

            所以我在这里写了一个本地的json文件来测试。

        url:"faillist.json",

    二,bootstrap table 带参访问设置

        queryParams 配置项用来设置第一次请求参数和翻页时的参数

    三,bootstrap table 返回参数要求

        bootstrap table 返回参数要求为json串,而且必须包含 total(总数) 和 rows(数据)

        如果没有可以用responseHandler处理,如下

        

//返回数据格式处理
        responseHandler: function(res) {
                return {
                    "total": res.DATA.totalRecordCount,//总页数
                    "rows": res.DATA.itemsList   //数据
                 };
            },

        





  • 5
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值