前端列表模板(可直接使用)

2023年6月21日发(作者：)

前端列表模板（可直接使⽤）

2. $(function() { load(); $(document).on('keydown', function (event) { // 键盘翻页事件 var e = event || || nts[0]; if (e && e == 38 || e && e == 37) {//上,左 // 上⼀页 $('.page-pre').click() } if (e && e == 40 || e && e == 39) {//下,右 // 下⼀页 $('.page-next').click() } })});function load() { var api = "/view/list/findAnalyse"; $('#exampleTable').bootstrapTable({ url : api, // 请求的后台URL（*） method : 'get', // 请求⽅式：get/post（*） showRefresh : true, // 是否显⽰刷新按钮 showToggle : false, // 是否显⽰详细视图和列表视图的切换按钮 showColumns : false, // 是否显⽰列操作按钮 detailView : false, // 是否显⽰详细视图 striped : true, // 设置为true会有隔⾏变⾊效果 dataType : 'json', // 服务器返回的数据类型 cache : false, pagination: true, //是否显⽰分页（*） paginationLoop: true, paginationHAlign: 'right', //right, left paginationVAlign: 'bottom', //bottom, top, both paginationDetailHAlign: 'left', //right, left paginationDetailHAlign: 'left', //right, left paginationPreText: '上⼀页', paginationNextText: '下⼀页', pageSize : 10, // 如果设置了分页，每页数据条数 pageNumber : 1, // 如果设置了分布，⾸页页码 queryParamsType:'undefined', // 设置为limit则会发送符合RESTFull格式的参数 singleSelect : true, // 设置为true将禁⽌多选 clickToSelect : true, // 是否启⽤点击选中⾏ dataField: 'msg', //后端代码返回的数据格式对应列的key() // contentType : "application/x-www-form-urlencoded", // 发送到服务器的数据编码类型 pageList: [10, 25, 50, 100],

search : false, // 是否显⽰搜索框 sidePagination : "server", // 设置在哪⾥进⾏分页，可选值为"client" 或者 "server" queryParams : function(params) { return { // 说明：传⼊后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对 pageNo : mber, pageSize : ze, //search : , }; }, //加载成功时执⾏ onLoadSuccess: function(data){

("加载成功");

}, //加载失败时执⾏

onLoadError: function(status){

("加载数据失败"+status);

}, columns : [ { title : '序号', field : 'pkid', align : 'left', valign : 'center', width : '10%', formatter: function (value, row, index) { return value; } }, { title : '⽤户ID', field : 'Code', align : 'left', valign : 'center', width : '20%' }, /*{ title : '⽤户姓名', field : 'Name', align : 'left', valign : 'center', width : '50%', cellStyle : function(value, row, index) { return { css : { "word-wrap" : "break-word", "word-break" : "normal" } }; } }*/ ] });}

2023年6月21日发(作者：)

前端列表模板（可直接使⽤）

2. $(function() { load(); $(document).on('keydown', function (event) { // 键盘翻页事件 var e = event || || nts[0]; if (e && e == 38 || e && e == 37) {//上,左 // 上⼀页 $('.page-pre').click() } if (e && e == 40 || e && e == 39) {//下,右 // 下⼀页 $('.page-next').click() } })});function load() { var api = "/view/list/findAnalyse"; $('#exampleTable').bootstrapTable({ url : api, // 请求的后台URL（*） method : 'get', // 请求⽅式：get/post（*） showRefresh : true, // 是否显⽰刷新按钮 showToggle : false, // 是否显⽰详细视图和列表视图的切换按钮 showColumns : false, // 是否显⽰列操作按钮 detailView : false, // 是否显⽰详细视图 striped : true, // 设置为true会有隔⾏变⾊效果 dataType : 'json', // 服务器返回的数据类型 cache : false, pagination: true, //是否显⽰分页（*） paginationLoop: true, paginationHAlign: 'right', //right, left paginationVAlign: 'bottom', //bottom, top, both paginationDetailHAlign: 'left', //right, left paginationDetailHAlign: 'left', //right, left paginationPreText: '上⼀页', paginationNextText: '下⼀页', pageSize : 10, // 如果设置了分页，每页数据条数 pageNumber : 1, // 如果设置了分布，⾸页页码 queryParamsType:'undefined', // 设置为limit则会发送符合RESTFull格式的参数 singleSelect : true, // 设置为true将禁⽌多选 clickToSelect : true, // 是否启⽤点击选中⾏ dataField: 'msg', //后端代码返回的数据格式对应列的key() // contentType : "application/x-www-form-urlencoded", // 发送到服务器的数据编码类型 pageList: [10, 25, 50, 100],

search : false, // 是否显⽰搜索框 sidePagination : "server", // 设置在哪⾥进⾏分页，可选值为"client" 或者 "server" queryParams : function(params) { return { // 说明：传⼊后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对 pageNo : mber, pageSize : ze, //search : , }; }, //加载成功时执⾏ onLoadSuccess: function(data){

("加载成功");

}, //加载失败时执⾏

onLoadError: function(status){

("加载数据失败"+status);

}, columns : [ { title : '序号', field : 'pkid', align : 'left', valign : 'center', width : '10%', formatter: function (value, row, index) { return value; } }, { title : '⽤户ID', field : 'Code', align : 'left', valign : 'center', width : '20%' }, /*{ title : '⽤户姓名', field : 'Name', align : 'left', valign : 'center', width : '50%', cellStyle : function(value, row, index) { return { css : { "word-wrap" : "break-word", "word-break" : "normal" } }; } }*/ ] });}