bootstrap table 获取数据里面的id可以重新请求数据展

项目中使用BootStrap editTable 进行行内编辑，编辑后并不实时的修改某列的值，而是在所有需要修改的列修改后，点击后面的确认投资按钮，一次性保存所修改的列。

由于确认投资是页面第一次初始化后出现的，而这时需要修改的列是没有值的，对列进行编辑后，点击按钮是不能获取到编辑后的值。

经过学习Bootstrap editTable  和 bootstarp table的API,找到了解决方案。

方法/步骤

1

引入bootstarp edittable 的 js，css 文件：

<link href="${basePath}/STATIC/plugins/bootstrap3-editable/css/bootstrap-editablecss" rel="stylesheet">

<script src="${basePath}/STATIC/plugins/bootstrap3-editable/js/bootstrap-table-editablejs"></script>

<script src="${basePath}/STATIC/plugins/bootstrap3-editable/js/bootstrap-editablejs"></script>

注意：bootstrap-table-editablejs  不属于 bootstrap3-editable 里面，是第三方或个人扩展的，可以从网上下载。

2

特定的列进行行内编辑：

field: 'autualFinanceAmount',

title: '实际融资金额（万元）',

width: 160,

align: 'center',

formatter:function(value,row,index){

if(value == null || value == ''){

return "-";

}

return value;

},

editable: {

type: 'text',

title: '实际融资金额',

validate: function (v) {

if (!v) return '实际融资金额不能为空';

//正则校验输入格式：最多两位小数。

var patrn=/^([1-9]\d\\d{1,2}|0\\d[1-9]|[1-9]\d)$/;

if(!patrntest(v)){

return '输入格式：最多两位小数';

}

}

}

3

当某列编辑完成后，需要对当前列所在的行进行修改 *** 作：

$("#grid")bootstrapTable({

url:'',

……

…… //其他属性

columns:[{

field:'rowId',

title:'序号',

width:30,

align: 'center',

formatter:function(value,row,index){

rowrowId = index;

return index+1;

}

…… //其他列

}],

onEditableSave: function (field, row, oldValue, $el) {

$table = $('#grid')bootstrapTable({});

$tablebootstrapTable('updateRow', {index: rowrowId, row: row});

}

注意：黑色粗体字就是新增的代码，表示在列编辑完成后，对当前列所在的行进行修改。

index 表示该行所在的索引。由于onEditableSave函数的参数中没有index，只能自己特殊处理了。看到在columns属性中，有一个field:'rowId’就是自己处理的，rowId赋给row。

4

如果你的列中有

formatter:function(value,row,index){} 函数，

在onEditableSave 方法执行完成后，该函数会重新执行，这样就会把修改后的列的值重新拿到进行处理。

opyright © 1999-2020, CSDNNET, All Rights Reserved

打开APP

Bootstrap—table控件的传参取值 原创

2017-05-05 00:02:08

奔跑的大白啊

码龄8年

关注

前言

      最近小编接触的项目中，统一采用扁平化的流行风格，前台使用的Bootstrap框架，相对于EasyUI绑定数据的时候有点复杂，在Table控件传值的时候就卡住了，Bootstrap第一次了解，总结一下它的使用套路。

需求描述

      查询一段时间间隔内的数据，需要获取页面上两个日期控件上的日期值传递到Controller的方法中做进一步的逻辑处理。

代码详解

1 在cshtml页面引用相关组件，并定义一个空的表格       

@bootstrap table组件以及中文包的引用@

 <script src="~/Content/bootstrap-table/bootstrap-tablejs"></script>

 <link href="~/Content/bootstrap-table/bootstrap-tablecss" rel="stylesheet" />

 <script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CNjs"></script>

@定义一个空的table@

<table id="table"></table> 

2 Js初始化  

$(function () {

 //初始化Table

 var oTable = new TableInit();

 oTableInit();

});

var TableInit = function () {

 var oTableInit = new Object();

 //初始化Table

 oTableInitInit = function () {

 $('#table')bootstrapTable({

 url: '/ConfluenceSurvey/Query', //请求后台的URL（）

 method: 'get', //请求方式（）

 toolbar: '#toolbar', //工具按钮用哪个容器

 striped: true, //是否显示行间隔色

 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（）

 pagination: true, //是否显示分页（）

 sortable: false, //是否启用排序

 sortOrder: "asc", //排序方式

 queryParams: oTableInitqueryParams,//传递参数（）

 sidePagination: "client", //分页方式：client客户端分页，server服务端分页（）

 pageNumber:1, //初始化加载第一页，默认第一页

 pageSize: 10, //每页的记录行数（）

 pageList: [10, 25, 50, 100], //可供选择的每页的行数（）

 search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大

 strictSearch: true,

 showColumns: true, //是否显示所有的列

 showRefresh: true, //是否显示刷新按钮

 minimumCountColumns: 2, //最少允许的列数

 clickToSelect: true, //是否启用点击选中行

 height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度

 uniqueId: "ID", //每一行的唯一标识，一般为主键列

 showToggle:true, //是否显示详细视图和列表视图的切换按钮

 cardView: false, //是否显示详细视图

 detailView: false, //是否显示父子表

 columns: [{

 checkbox: true

 }, {

 field: 'date',

 title: '日期'

 }, {

 field: 'daycoin',

 title: '每日小计'

 }, {

 field: 'totalcoin',

 title: '到此日的积分'

  } ]

 });

 };

 //得到查询的参数

 oTableInitqueryParams = function (params) {

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

 limit: paramslimit, //页面大小

 offset: paramsoffset, //页码

startdate: $("#startdate")val(),

 enddate: $("#enddate")val()

 };

 return temp;

 };

 return oTableInit;

};

注：初始化Table必须的几个参数小编用（）做了标记。

3 在Controller中对应的方法

     按照正常的方法传参接收就可以了，此处代码省略

4 效果

重点突破-传参取值

1Table组件中定义传参属性

queryParams: oTableInitqueryParams,//传递参数（）

2 定义具体传参方法

//得到查询的参数

oTableInitqueryParams = function (params) {

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

limit: paramslimit, //页面大小

offset: paramsoffset, //页码

startdate: $("#startdate")val(),

enddate: $("#enddate")val()

};

return temp;

};

return oTableInit;

};

总结

     不怕不知道，就怕不知道，有需求就一定可以实现。

打开CSDN，阅读体验更佳

最新发布 bootstrapTable传参示例

bootstrapTable传参示例

继续访问

bootstrap table配置参数例子

主要为大家详细介绍了bootstrapTable的参数设置，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Bootstrap initTable参数传递

queryParams: function (params) { var searchParams = $('#searchForm')getValues(); var temp = { paraId: arr['id'], paraLB: arr['leibie'] ,

继续访问

Bootstrap-table 查询时通过Post请求传入复杂类型参数到后台控制器

Bootstrap-table默认的传参 Bootstrap-table每次刷新或者排序都会自动向设置好的url发送一个请求，请求中包含4个默认的参数 当data-query-params-type属性设置成limit时（默认情况） 四个参数为：limit,offset,sort,order 当data-query-params-type为空时 四个参数为：pageSize,pa

继续访问

bootstrap-table 获取所有数据_Bootstrap table教程

Bootstrap-table是一个基于Bootstrap的jQuery插件,可以实现将数据库中提取到数据在前端进行相应 *** 作的功能快速上手 对本文有什么疑问或者建议,可以在下方的评论区说明,笔者会尽能力给出解答,另外已经完成了bootstrap-table的增删改查 *** 作,以及增加 *** 作的的模态框(bootstrap modal),以及表单校检(bootstrap-validate),最近有点忙,过一

继续访问

Bootstrap-Table实现自定义条件查询

鉴于最近有人询问Bootstrap-Table的自定义条件查询如何实现，今天特在此说明。首先展示一下效果： 默认查询 条件查询 测试数据 前端代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <

继续访问

BootStrap table 传递搜索参数

转载自：>

态框中的数据我这里尝试似乎不能使用jquery的$()获取，所以只能使用js自带的对象获取工具“documentgetElementById()”这一类工具才能获取。

同时注意如果要获取input框中的值的话就不能用jquery的val()了，得用js自带的value

//获得额外参数的方法

fodderType = function() {

return $("#fodderTypeSelect")val();

};

//初始化fileinput控件（第一次初始化）

function initFileInput(ctrlName, FileExtensions, fileSize) {

var control = $('#' + ctrlName);

controlfileinput({

language: 'zh', //设置语言

uploadUrl: "/WxMedia/ImageUpload", //上传的地址

allowedFileExtensions: FileExtensions, //接收的文件后缀

showUpload: true, //是否显示上传按钮

showCaption: true, //是否显示标题,

maxFileSize: fileSize 1000, //单位为kb，如果为0表示不限制文件大小

browseClass: "btn btn-primary", //按钮样式

previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",

initialCaption: "请选择上传素材",

uploadExtraData: function(previewId, index) { //额外参数的关键点

var obj = {};

objfodder = fodderType();

consolelog(obj);

return obj;

}

});

}

关键点：

可以看到配置文件中uploadExtraData的参数是一个函数形式，这是一个回调函数，会在上传时调用，读取配置的额外参数。

bootstrapTable后端分页后前端翻页事件造成的显示数据偶尔不对

程序逻辑是这样的：

bootstrapTable列中有这样一列，实现自动排序

分页函数及方法：

后台对数据进行了筛选排序和跳页，翻页的时候，经常会出现展示初始数据的情况,ajax请求的数据好像没有加载一样。

分析了一下可能时这样的：

bootstrapTable再翻页时会先触发翻页函数onPageChange，同时也会触发本身向后台请求。所以相当于请求了两次，加载了两次。若上面的seoPageChange函数ajax请求没有数据，就好像做了一次重新加载。添加

翻页之前将数据清空，这样解决了翻页时数据对不上的问题。

但是最好的解决方式还是再翻页时将参数同bootstrapTable本身的后台方法一起传到后台，onPageChange方式比较多余。

以上就是关于bootstrap table 获取数据里面的id可以重新请求数据展全部的内容，包括:bootstrap table 获取数据里面的id可以重新请求数据展、table.init函数可以传参吗、bootstrap模态框显示数据库查询数据等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！