BootstrapTable使用

最新推荐文章于 2020-09-06 20:46:11 发布

一只深井的河马

最新推荐文章于 2020-09-06 20:46:11 发布

阅读量422

点赞数

分类专栏：个人文章标签： BootstrapTable绑定查询

本文链接：https://blog.csdn.net/lee3117/article/details/73896297

版权

个人专栏收录该内容

4 篇文章 0 订阅

订阅专栏

//首先添加css和js，网上都有

//然后。。。

$(document).ready(function () {
$('#table').bootstrapTable({
method: 'post',
contentType: "application/x-www-form-urlencoded",//必须的
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: true, //是否启用排序
sortOrder: "asc",
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
url: "/api/Export/GetExport",//这个接口需要处理bootstrap table传递的固定参数
queryParamsType: '', //默认值为 'limit' ,在默认情况下传给服务端的参数为：offset,limit,sort
// 设置为 '' 在这种情况下传给服务器的参数为：pageSize,pageNumber
dataType: "json",
queryParams: queryParams,//前端调用服务时，会默认传递上边提到的参数，如果需要添加自定义参数，可以自定义一个函数返回请求参数
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
//showColumns: true, //是否显示所有的列
//showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
searchOnEnterKey: true,
silent: true,
columns: [{
field: 'spdNum',
title: '审批单编号',
align: 'center',
sortable: true
}, {
field: 'sqdw',
title: '申请单位',
align: 'center',
sortable: true
}, {
field: 'CropName',
title: '作物名称',
align: 'center',
sortable: true
}, {
field: 'pzName',
title: '品种名称',
align: 'center',
sortable: true
}, {
field: 'ckdw',
title: '出口单位',
align: 'center',
width: '25%',
sortable: true
}, {
field: 'ckgj',
title: '出口国家',
align: 'center',
sortable: true
}, {
field: 'yt',
title: '用途',
align: 'center',
sortable: true
}, {
field: 'sqrq',
title: '申请日期',
align: 'center',
sortable: true
}
],
pagination: true
});
function queryParams(params) { //配置参数
var Export = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
pageSize: params.limit, //页面大小
pageNumber: params.pageNumber, //页码
lsh: $('#name0').val(),
spdh: $('#name1').val(),
sqdw: $('#name2').val(),
jkgj: $('#Dropdownstate').val(),
zwmc: $('#namezw').val(),
pzmc: $('#name3').val(),
yt: $('#name4').val(),
gzdw:$('#name5').val()
};
return Export;
}
});
// 搜索按钮触发事件
$(function () {
$("#search").click(function () {
$('#table').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
// console.log("/program/area/findbyItem?offset="+0+"&"+$("#areaform").serialize())
});

});

</script>

//查询条件

<div class="search">
<div class="search1">
<div class="box1">
<p>流水号：</p>
<input name="name0" value="" maxlength="50" id="name0" style="width: 120px;" class="pad5" type="text" />
</div>
<div class="box1">
<p>审批单号：</p>
<input name="name1" value="" maxlength="50" id="name1" style="width: 120px;" class="pad5" type="text" />
</div>

<div class="box1">
<p>申请单位：</p>
<input name="name2" value="" maxlength="50" id="name2" style="width: 120px;" class="pad5" type="text" />
</div>
<div class="box1">
<p>进口国家：</p>
<asp:DropDownList ID="Dropdownstate" runat="server" Width="110" />
</div>
<div class="box1">
<p>作物名称：</p>
<input name="namezw" value="" maxlength="50" id="namezw" style="width: 120px;" class="pad5" type="text" />
</div>
<div class="box1">
<p>品种名称：</p>
<input name="name3" value="" maxlength="50" id="name3" style="width: 120px;" class="pad5" type="text" />
</div>
<div class="box1">
<p>用途：</p>
<select id="name4">
<option selected="selected" value="0">请选择</option>
<option value="大田生产">大田生产</option>
<option value="对外制种">对外制种</option>
<option value="试验">试验</option>
<option value="大田生产自用">大田生产自用</option>
<option value="可转让和销售">可转让和销售</option>
<option value="国内制种">国内制种</option>
</select>
</div>
<div class="box1">
<p>供种单位：</p>
<input name="name5" value="" maxlength="50" id="name5" style="width: 120px;" class="pad5" type="text" />
</div>
</div>
<div class="btnbox">
<input value="查询" id="search" class="btn70" type="button" />
<input value="重置" class="btn70" type="button" />
</div>

</div>