bootstrapTable插件简单用法

版权声明：内容记录学习过成文章，仅供参考 https://blog.csdn.net/qq_40195958/article/details/80939664

 $('#matterLsit').bootstrapTable({//当前table标签Id
    method: 'post',
    contentType: "application/x-www-form-urlencoded",
    url: '',
//  idField: "projectId",
    striped: true, //是否显示行间隔色
    pagination: true, //设置为 true 会在表格底部显示分页条
    pageList: [8, 15, 20], //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
    pageSize: 8, //如果设置了分页，页面数据条数
    pageNumber: 1, //如果设置了分页，首页页码 
    sidePagination: 'server', //设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置 服务器数据地址（url）或者重写ajax方法
    silent: true,
    sortable: true, //设置为false 将禁止所有列的排序
    sortOrder: "desc", //默认排序方式
    silentSort: true, //设置为 false 将在点击分页按钮时，自动记住排序项
    singleSelect: false, //设置True 将禁止多选
    clickToSelect: true, //设置true 将在点击行时，自动选择rediobox 和 checkbox
    search: false, //是否启用搜索框
    strictSearch: false, //设置为 true启用 全匹配搜索，否则为模糊搜索
    showColumns: false, //是否显示 内容列下拉框
    showRefresh: false, //是否显示 刷新按钮
    showToggle: false, //是否显示 切换试图（table/card）按钮
    cardView: false, //设置为 true将显示card视图，适用于移动设备。否则为table试图，适用于pc
    toolbar: "#toolbar",
    queryParams: getMatterData,//刷新列表传递参数
    queryParamsType: "limit",//分页
    columns: [{
            checkbox: true
        },
        {
            title: '序号',
            width:50,
            formatter: function(value, row, index) {
                return getPageSize * (getPageNub - 1) + index + 1;
            }
        },
        {
            field: 'name',
            title: '所属部门',
            sortable: false
        }
    ]
  ,onDblClickRow:addAlreadyRow//回调函数双击事件
});

回调函数

// 提交时传递参数
 var getPageNub = "";
 var getPageSize = "";
 var rows = "";
 var nowpage = "";
 function getMatterData(params){
     var queryDate = {
             "rows": params.limit,
                "nowpage": params.pageNumber,
                "departmentId": $("#searchDepartment").val(),
                "directoryNameSearch": $("#searchProjectName").val(),
                "projectClassifySearch": $("#searchProClassify").val(),
                "sortOrder": params.order,
                "searchText": params.search,
                "sortName": params.sort,
            };
            getPageNub = params.pageNumber;
            getPageSize = params.limit;
            rows = params.limit;
            nowpage = params.pageNumber;
            sortOrder = params.order;
            return queryDate;
 }

行双击事件

//row当前行，通过调用类属性取值
 function addAlreadyRow(row){
     var str = "<tr ondblclick='removeThisRow(this);'>";
        str ="<td>"+row.name+"</td>"+"</tr>";
     $("#alreadyMatter").append(str);
 }

增加查询按钮

 将所需要传递参数放入queryParams的参数中，点击查询调用table刷新即可
$("#searchBtn").click(function() {
    $("#table").bootstrapTable('refresh');
});