bootstrap table get请求改为post请求后,后台无法接收参数问题.


使用bootstrap table组件,原来使用的get请求,后需要改为post,
参数method改为post,发现后台无法接收到请求,

查阅api后发现,需要定义数据编码类型,contentType

bootstrap table默认是application/json

修改为application/x-www-form-urlencode后后台可以正常接收到参数.


$('#exampleTable')
      .bootstrapTable(
         {
            method : 'post', // 服务器数据的请求方式 get or post
            url : dispatchPrefix + "/listByConId", // 服务器数据的加载地址
            striped : true, // 设置为true会有隔行变色效果
            dataType : "json", // 服务器返回的数据类型
            pagination : true, // 设置为true会在底部显示分页条
            // queryParamsType : "limit",
            // //设置为limit则会发送符合RESTFull格式的参数
            singleSelect : false, // 设置为true将禁止多选
            iconSize : 'outline',
            toolbar : '#exampleToolbar',
            contentType : "application/x-www-form-urlencoded",
            //发送到服务器的数据编码类型
            pageSize : 10, // 如果设置了分页,每页数据条数
            pageNumber : 1, // 如果设置了分布,首页页码
            sortable : true,
            order : 'desc',
            search : false, // 是否显示搜索框
            //showColumns : true, // 是否显示内容下拉框(选择显示的列)
            //sidePagination : "client", // 设置在哪里进行分页,可选值为"client" 或者
            sidePagination : "server",
            // "server"
            queryParams : function(params) {
               params.order=params.order=='desc'?'asc':'desc';//反转排序规则,默认第一次点击倒序
               if(typeof(params.sort)=='undefined'){//默认创建时间倒叙
                  params.sort='create_time';
                  params.order='desc';
               }
               return {
                  limit : params.limit,
                  offset : params.offset,
                  /*sort : 'file_number_id',
                  order : 'desc',*/
                  /*name : $('#searchName').val(),
                  sort : 'gmt_create',
                  order : 'desc',*/
                  //sourceOrganName : $("#sourceOrganName").val(),
                  subject : $("#subject").val(),
                  gwConId : conId,
                  title : titleOut,
                  number : numberOut,
                  drafter : drafterOut,
                  issuer : issuerOut,
                  dept : deptOut,
                  year : yearOut,
                  type : typeOut,
                  state : stateOut==''?normalState.toString():stateOut,
                  worry : worryOut,
                  month : monthOut,
                  sort : ifUndifinedToString(params.sort),
                  order : ifUndifinedToString(params.order)
               };
            },
            // queryParams : queryParams,
            // //请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,例如 toolbar 中的参数 如果
            // queryParamsType = 'limit' ,返回参数必须包含
            // limit, offset, search, sort, order 否则, 需要包含:
            // pageSize, pageNumber, searchText, sortName,
            // sortOrder.
            // 返回false将会终止请求
            columns : [
               {
                  title : '序号',
                  field : 'id',
                  width : "80px",
                  align : 'center',
                  formatter : function(value, row, index) {
                     //return index + 1;  
                     var pageSize = $('#exampleTable').bootstrapTable('getOptions').pageSize; //通过表的#id 可以得到每页多少条  
                     var pageNumber = $('#exampleTable').bootstrapTable('getOptions').pageNumber; //通过表的#id 可以得到当前第几页  
                     return pageSize * (pageNumber - 1) + index + 1; //返回每条的序号: 每页条数 * (当前页 - 1                   }
               },
               {
                  field : 'fileNumberName',
                  title : '文件编号',
                  sortable : true
               /*sortable : true*/
               },
               {
                  field : 'processInstName',
                  title : '标题'
               },
               {
                  field : 'createDeptName',
                  title : '发起部门'
               },
               {
                  field : 'createUserName',
                  title : '拟稿人'
               },
               {
                  field : 'createTime',
                  title : '创建时间',
                  formatter : function(value, row, index) {
                     if (value == null) {
                        return "";
                     }
                     var offlineTimeStr = changeDateFormat(value);
                     return offlineTimeStr;
                  },
                  sortable : true
               },
               {
                  title : '操作',
                  field : 'id',
                  align : 'center',
                  formatter : function(value, row, index) {
                     var e = '<a class="btn btn-primary btn-sm " href="#" mce_href="#" title="编辑" ><i class="fa fa-edit"></i></a> ';
                     return e;
                  }
               } ],
            onClickRow : function(row) {
               edit(row.id, row.processInstName);
            }
         });
}





  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想在bootstrapTable中使用json数据,你需要确保json数据满足以下要求: 1. 数据格式为json数组,每个元素代表一行数据。 2. 每个元素是一个json对象,对象的属性名对应表格的列名,属性值对应表格的单元格内容。 下面是一个示例json数据: ```json [ { "id": 1, "name": "John", "age": 30, "gender": "male" }, { "id": 2, "name": "Jane", "age": 25, "gender": "female" }, { "id": 3, "name": "Bob", "age": 40, "gender": "male" } ] ``` 在后台,你可以将数据查询出来,然后转换成json格式,最后返回给前端。如果你使用Java语言,可以使用Gson库将对象转换成json字符串,例如: ```java List<User> userList = userService.getUserList(); Gson gson = new Gson(); String json = gson.toJson(userList); return json; ``` 这里假设User是一个JavaBean类,包含了用户的id、姓名、年龄和性别等属性。getUserList()方法返回一个包含了多个User对象的集合。toJson()方法将集合转换成json字符串。最后在Controller中将json字符串返回给前端即可。 在前端,你需要在bootstrapTable的配置中指定数据来源,例如: ```javascript $('#table').bootstrapTable({ url: '/user/list', // 后台返回json数据的url method: 'get', pagination: true, sidePagination: 'client', columns: [ { field: 'id', title: 'ID' }, { field: 'name', title: '姓名' }, { field: 'age', title: '年龄' }, { field: 'gender', title: '性别' } ] }); ``` 这里的url指定了后台返回json数据的url,method指定了请求方法(get或post),pagination指定了是否启用分页功能,sidePagination指定了分页方式(client或server),columns指定了表格的列名和对应的json属性名。 当bootstrapTable加载完成后,会向后台发送一个get请求后台返回json数据。bootstrapTable根据配置将json数据解析成表格展示出来。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值