美文网首页
bootstraptable中使用row传值问题

bootstraptable中使用row传值问题

作者: 阿乐_822e | 来源:发表于2023-09-27 16:27 被阅读0次

bootstraptable中,常会碰到选择某行数据做特定操作。通常是选择id来传递参数。如:

$(function() {
  $('#table').bootstrapTable({
    data: [
      {id: 1, name: 'John', age: 25},
      {id: 2, name: 'Jane', age: 30},
      {id: 3, name: 'Tom', age: 28}
    ],
    columns: [{
      field: 'id',
      title: 'ID'
    }, {
      field: 'name',
      title: 'Name'
    }, {
      field: 'age',
      title: 'Age'
    }, {
      title: 'Actions',
      formatter: function(value, row) {
        return '<button onclick="doSomething(' + row.id + ')">Click</button>';
      }
    }]
  });
});

function doSomething(rowId) {
  // 在这里可以根据传入的 rowId 参数做你想要的操作
  console.log('Clicked on row with ID:', rowId);
  // 例如:根据 rowId 发起 API 请求,显示模态框等等
}

但有时,我们或许要多传一些参数过去,这时选择传递row就比较方便了,如下:

$(function() {
  $('#table').bootstrapTable({
    data: [
      {id: 1, name: 'John', age: 25},
      {id: 2, name: 'Jane', age: 30},
      {id: 3, name: 'Tom', age: 28}
    ],
    columns: [{
      field: 'id',
      title: 'ID'
    }, {
      field: 'name',
      title: 'Name'
    }, {
      field: 'age',
      title: 'Age'
    }, {
      title: 'Actions',
      formatter: function(value, row) {
        return '<button onclick="doSomething(' + JSON.stringify(row) + ')">Click</button>';
      }
    }]
  });
});

function doSomething(row) {
  // 在这里可以根据传入的 row 参数做你想要的操作
  console.log('Clicked on row:', row);
  console.log(' rowId:', row.id);
  // 例如:根据 row 的属性进行逻辑判断、调用其他函数等等
}

在这个新的示例中,我们将整个 row 对象通过 JSON.stringify() 方法转换为字符串,并作为参数传递给 doSomething 函数的调用,以便在按钮点击时将整个 row 对象传递给指定的函数。

当用户点击按钮时,doSomething 函数将被调用,并且完整的 row 对象将作为参数传递给该函数。

PS: JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串,而JSON.parse()可以将JSON字符串转为一个对象。两者功能刚好相反。

上面传递参数时,一定要做一下序列化,而不能直接传Object对象: onclick="doSomething(' + row + ')"

相关文章

  • 2018-09-05

    组件传值问题 父组件给子组件传值应该使用props。子组件要给父组件传值,需要调用父组件传递的方法。props传值...

  • iOS页面传值问题(swift2.0篇)

    iOS页面传值问题(swift2.0篇) 同样是介绍iOS开发中的页面传值,此篇与上一篇使用Objective-C...

  • Vue+IView使用过程中使用Table组件Render不生效

    官方文档render中回传的参数未row、column、index,结果使用过程中不生效 下边是可以正常使用的方法...

  • BootstrapTable使用

    基本版本:3.3.7 1、引入基本依赖 bootstrap-table.min.css、bootstrap-tab...

  • vue props传值失败 输出undefined的问题

    如果在prop中传的值为一个没有使用特殊命名规则的变量如:(type),可以顺利传值:而使用驼峰命名可能导致传值失...

  • iOS技术总结(Block)[整理]

    摘要: . Block代码块结构及几种类型. __block使用.使用block在两个界面中传值问题 官方文档:苹...

  • vue的传值方式

    1.query传值 在某处做路由跳转时,使用query传值的方式: 在页面中接受数据的方式: 2.params传值...

  • 前端问题:JSON parse error: Unrecogni

    问题描述: 前端在使用bootstrapTable对一个接口发送POST请求时(即在js 提交 jquery aj...

  • iOS中传值问题

    1.在iOS中正向传值 可以用属性就不多说了,反向传值 从image中传值给controller的时候 我们可以用...

  • iOS页面间传值详解(二)

    在iOS页面间传值详解(一)中,介绍了iOS界面间的正向传值以及逆向传值的两种方法,其实逆向传值还可以使用bloc...

网友评论

      本文标题:bootstraptable中使用row传值问题

      本文链接:https://www.haomeiwen.com/subject/ilmkbdtx.html