bootstrap-table 的getsections 获取有问题,没有选中也会有值

bootstrap-table 的getsections 获取有问题,没有选中也会有值,第1张

$(document)ready(function(){

$('#skillContentTable')bootstrapTable({

url: querySkillUrl,

columns: [],

resizable: true,

pagination: true,

sidePagination: 'client',

pageNumber: 1,

pageSize: 10,

pageList: [10,20,50,'All'],

search: true,

showRefresh: true,

showToggle: true,

showColumns: true,

});

});

$('#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参数、属性、事件列表: >

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

要显示的数据格式应该是:

[

{

UserID:1,

UserName:"zhangsan"

},

{

UserID:2,

UserName:"lisi"

}

]

以上就是关于bootstrap-table 的getsections 获取有问题,没有选中也会有值全部的内容,包括:bootstrap-table 的getsections 获取有问题,没有选中也会有值、bootstrap-table笔记、bootstrap table 获取数据里面的id可以重新请求数据展等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/10216762.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-06
下一篇2023-05-06

发表评论

登录后才能评论

评论列表(0条)

    保存