bootstrap-table 通过input 输入的值来计算总价

你可以在 单价列和数量列监听方法。在方法中计算值，然后设置row['fltotal']值就行。

提供下思路，如: 单价列。加上属性：events:operatorPrice,然后，其中operatorPrice是对象直接量。在表格初始化之前定义就好。如：

    "change price":function (e,value,row,index) { //单价列，注意通过样式price监听

         //estopPropagation();

         var price = value || 0;//单价

         var nums = row["flnum"] || 0;  //数量

         row['fltotal'] =  price  nums ;   

     },

  "change num":function (e,value,row,index) {//单价列，注意通过样式num(列中input的样式)监听

    //estopPropagation();    

       var nums = value || 0;//数量

         var price = row["flprice"] || 0;  //单价

         row['fltotal'] =  price  nums ;       

   }

 }

public class BootStrapPage<T> {

private Long total;

private List<T> rows;

private int limit=0;

private int offset = 0;

private String order ="asc";

}

然后control直接接收就行了。

public List<Test> queryTest(BootStrapPage temp){}

项目中使用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 方法执行完成后，该函数会重新执行，这样就会把修改后的列的值重新拿到进行处理。

$('#bootstrap-table')bootstrapTable('load', data);

{"total":3"

,rows":[

    {"id":1861,"pid":1860,"name":"拟稿/发起申请"},{"id":1863,"pid":1860,"name":"营业部总经理审批"}

    ,{"id":1862,"pid":1860,"name":"营业部项目经理审批"}

]}

$("#bootstrap-table")bootstrapTable('getData')

$('#bootstrap-table')bootstrapTable('remove', {

field:"seq",

values:[parseInt(seq)]

});

注意：需要注意的是values的数据类型一定要和field一样，不然就找不到需要删除的数据

<table id="bootstrap-table" data-mobile-responsive="true" data-reorderable-rows="true" data-use-row-attr-func="true" data-show-columns="false"></table>

最主要的是开启这三个data-mobile-responsive="true" data-reorderable-rows="true" data-use-row-attr-func="true" 

然后就是导入拖拽的插件：

bootstrap-table-reorderjs

jquerytabledndjs

$('#table')bootstrapTable({

reorderableRows: true, //设置拖动排序

    useRowAttrFunc: true, //设置拖动排序

    //当选中行，拖拽时的哪行数据，并且可以获取这行数据的上一行数据和下一行数据

    onReorderRowsDrag: function(table, row) {

},

//拖拽完成后的这条数据，并且可以获取这行数据的上一行数据和下一行数据

onReorderRowsDrop: function(table, row) {

},

//当拖拽结束后，整个表格的数据

onReorderRow: function(newData) {

    //这里的newData是整个表格数据，数组形式

}

})

BootstrapTable参数、属性、事件列表： >

首先, 你要知道一个基础table的标签怎么去写, 只有知道这个基础, 你才能更好的用bootstrap中的table html在这不过多说明 既然看这篇文章, 肯定都能够理解 然后现在就把bootstrap中的table来详细说明一下 基础的table如下:

下面了解一下bootstrap中table, 没有什么大道理可以讲解 唯有一点, 通过表格的方式展示页面 首先有必要样式table 和一些选用样式 举例说明必要样式 首先要搭建一个基础框架, 请看系列经验第一篇

在搭建的基础框架里面的body部分填写table信息 然后在table的标签上加上基础样式table的css样式 你立刻发现, 界面瞬间好看多了

说明一下除了必要的table之外, 还有很多可选的class 不同的可选class 是可以联合使用的

1我们常用的就有边框的table 只需要使用table-bordered 查看效果图

2斑马线, 也就是隔行相同颜色的一个样式 使用table-striped样式

注意点有2个:

(1)斑马线是对tbody中的行起作用

(2)斑马线的实现方式是通过:nth-child CSS选择器实现的, 但是呢, 他不被ie8支持, 你懂我说的

3鼠标悬停在行上, 改变行的背景颜色 使用table-hover样式

注意: 这个需要多行的时候, 这种效果更加明显

4让表格更加紧凑的样式table-condensed, 它是让表格单元格中的内部（padding）减半展现更多的内容, 和更多的显示内容

其他的提醒说明: 在bootstrap中有这样的几个样式, 可以说是提醒样式 每个样式都是一种提醒方式 这些方式也可以放到table中 只需要使用class即可

上面状态的样式, 可以使用到不同的内容中, 比方说, tr中, td中, 都是可以的 下面的举例说明

注意点: 在使用这个样式的时候不能使用table-striped的样式, 会出现不能正常显示的问题

还有就是现在比较流行的响应式的table 只需要在table包含在table-responsive中即可, 作用为: 当屏幕小于768的时候, 才会出现滚动条, 否则滚动条消失

以上就是关于bootstrap-table 通过input 输入的值来计算总价全部的内容，包括:bootstrap-table 通过input 输入的值来计算总价、spring mvc后台怎么获取 bootstrap table的参数、bootstrap table 获取数据里面的id可以重新请求数据展等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！