bootstrap-table的一些配置参数例子

野性酷女 2022-07-28 00:05 202阅读 0赞

bootstrap-table的一些配置参数

$('#reportTable').bootstrapTable({
      method: 'post',
      url: '/qStock/AjaxPage',
      dataType: "json",
      striped: true,	 //使表格带有条纹
      pagination: true,	//在表格底部显示分页工具栏
      pageSize: 22,
      pageNumber: 1,
      pageList: [10, 20, 50, 100, 200, 500],
      idField: "ProductId",  //标识哪个字段为id主键
      showToggle: false,   //名片格式
      cardView: false,//设置为True时显示名片（card）布局
      showColumns: true, //显示隐藏列  
      showRefresh: true,  //显示刷新按钮
      singleSelect: true,//复选框只能选择一条记录
      search: false,//是否显示右上角的搜索框
      clickToSelect: true,//点击行即可选中单选/复选框
      sidePagination: "server",//表格分页的位置
      queryParams: queryParams, //参数
      queryParamsType: "limit", //参数格式,发送标准的RESTFul类型的参数请求
      toolbar: "#toolbar", //设置工具栏的Id或者class
      columns: column, //列
      silent: true,  //刷新事件必须设置
      formatLoadingMessage: function () {
        return "请稍等，正在加载中...";
      },
      formatNoMatches: function () {  //没有匹配的结果
        return '无符合条件的记录';
      },
      onLoadError: function (data) {
        $('#reportTable').bootstrapTable('removeAll');
      },
      onClickRow: function (row) {
        window.location.href = "/qStock/qProInfo/" + row.ProductId;
      },
    });

bootstrap-table带参到后台去的代码

function queryParams(params) {  //配置参数
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
          pageSize: params.limit,   //页面大小
          pageNumber: params.pageNumber,  //页码
          minSize: $("#leftLabel").val(),
          maxSize: $("#rightLabel").val(),
          minPrice: $("#priceleftLabel").val(),
          maxPrice: $("#pricerightLabel").val(),
          Cut: Cut,
          Color: Color,
          Clarity: Clarity,
          sort: params.sort,  //排序列名
          sortOrder: params.order//排位命令（desc，asc）
        };
        return temp;
      }

转自：[http://www.cnblogs.com/kingdudu/p/4884872.html][http_www.cnblogs.com_kingdudu_p_4884872.html]

[http://www.tuicool.com/articles/aAB7fei][http_www.tuicool.com_articles_aAB7fei]

[http_www.cnblogs.com_kingdudu_p_4884872.html]: http://www.cnblogs.com/kingdudu/p/4884872.html
[http_www.tuicool.com_articles_aAB7fei]: http://www.tuicool.com/articles/aAB7fei