boostraptable 生成table并选择行

最新推荐文章于 2022-03-04 14:12:11 发布

czx3387170

最新推荐文章于 2022-03-04 14:12:11 发布

阅读量203

点赞数

本文链接：https://blog.csdn.net/czx3387170/article/details/105270252

版权

<!DOCTYPE html>

<head>

<title>table表格插件</title>

integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">

</script>

integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous">

</script>

<style>

.container {

width: 90%;

margin: 0 auto;

}

</style>

</head>

<body>

</div>

$("#table").bootstrapTable({

method: "get",

url: "json/data.json",

contentType: "application/x-www-form-urlencoded", //必须要有！！！！

data: {},

pagination: true,

search: true,

height: 600,

sidePagination: "client",

pageNumber: 1,

pageSize: 10,

pageList: [10, 25, 50, 100],

searchOnEnterKey: true,

searchTimeOut: 500,

showRefresh: true,

showToggle: true,

showFooter: false,

showPaginationSwitch: true,

// idField: "id",

uniqueId: "id",

sortOrder: "desc",

editable: false,

clickToSelect: true,

singleSelect: true, // 只能选中一条，false可以选中多条

cache: false,

toolbar: "#toolbar",

// striped: true,

columns: [{

checkbox: true,

}, {

field: "id",

title: "选择",

align: "center",

visible: true,

}, {

field: "name",

title: "姓名",

align: "center",

visible: true,

}, {

field: "email",

title: "邮箱",

align: "center",

visible: true,

}, {

field: "tel",

title: "电话",

align: "center",

visible: true,

}, {

field: "phone",

title: "手机",

align: "center",

visible: true,

}],

//得到查询的参数

queryParams: function (params) {

//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的

var query_params = {

rows: params.limit, //页面大小

page: (params.offset / params.limit) + 1, //页码

sort: params.sort, //排序列名

sortOrder: params.order, //排位命令（desc，asc）

//查询框中的参数传递给后台

search_kw: $('#search-keyword').val(), // 请求时向服务端传递的参数

};

return query_params;

})

$(function () {

$("#table").click(function () {

var rows = $("#table").bootstrapTable('getSelections');

console.log(rows)

})

</script>

</body>

</html>

czx3387170

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
boostraptable 生成table并选择行

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>table表...
复制链接

扫一扫