bootstrap -table 给表格单元格内添加按钮和事件

 

//表格

<table id="table" data-mobile-responsive="true">

//这段必须放在表格初始化之前。

function addFunctionAlty(value, row, index) {
       return [
       '<button id="bind" type="button" class="btn btn-default">绑定</button>',
       '<button id="unbind" type="button" class="btn btn-default">解绑</button>',
       ].join('');
     } 
window.operateEvents = {
        'click #bind': function (e, value, row, index) {
           alert(row.qxxh);
           $("#upload").modal('show');
         }, 'click #unbind': function (e, value, row, index) {
           alert(row.qxxh);
           $("#upload").modal('show');
         }
       };

// 表格初始化
    $('#table').bootstrapTable({
        pagination: true,
        showColumns: true,
        pageSize: 10,
        pageNumber: 1,
        pageList: [10, 25, 50],
        showRefresh: true,
        smartDisplay: false,
        singleSelect: true, // 单选checkbox
        clickToSelect: true,
        uniqueId: 'id',
        method: 'get',
        url: '/sys/netbar/manage/list/data',
        dataType: 'json',
        sidePagination: 'server',
        toolbar: '#toolbar',
        queryParams: function (params) {
            var params = {
                offset: params.offset,   //数据起始
                limit: params.limit,  //偏移量
                netbarName: $("#netbarName").val(),
                netbarNo: $("#netbarNo").val(),
                areaCode: $("#areaCode").val()
            };
            return params;
        },
        columns: [{
            checkbox: true
        }, {
            field: 'netbarNo',
            title: '网吧编号',
        }, {
            field: 'name',
            title: '网吧名称',
        }, {
            field: 'manager',
            title: '负责人',
        }, {
            field: 'phone',
            title: '手机号',
        }, {
            field: 'createTimeStr',
            title: '创建时间',
        }, {
            field: 'address',
            title: '地址',
        }, {
            field: 'operate',
            title: '操作',
            events: operateEvents,//给按钮注册事件
            formatter: addFunctionAlty//表格中增加按钮  

        }]
    });

//效果如下

 

  • 2
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要合并单元,需要使用 `react-bootstrap-table-next` 中的 `rowSpan` 和 `colSpan` 属性。这些属性可以在 `columns` 对象中定义,用于指定表格中每个单元应该跨越的行和列的数量。 具体的实现步骤如下: 1. 在 `columns` 对象中定义需要合并单元的列,为其添加 `rowSpan` 和 `colSpan` 属性。 2. 在 `data` 数组中为需要合并单元的行添加相应的属性值,这些属性值将在表格渲染时被引用。 下面是一个例子: ```javascript import BootstrapTable from 'react-bootstrap-table-next'; import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'; const columns = [ { dataField: 'id', text: 'ID', }, { dataField: 'name', text: 'Name', }, { dataField: 'age', text: 'Age', }, { dataField: 'gender', text: 'Gender', rowSpan: 2, // 跨越两行 }, { dataField: 'location', text: 'Location', colSpan: 2, // 跨越两列 }, { dataField: 'address', text: 'Address', hidden: true, // 隐藏该列 }, { dataField: 'city', text: 'City', }, { dataField: 'state', text: 'State', }, ]; const data = [ { id: 1, name: 'John', age: 30, gender: 'Male', location: 'New York', address: '123 Main St', city: 'New York', state: 'NY', }, { id: 2, name: 'Jane', age: 25, gender: 'Female', location: 'San Francisco', address: '456 Elm St', city: 'San Francisco', state: 'CA', }, ]; <BootstrapTable keyField='id' data={ data } columns={ columns }/> ``` 在上面的例子中,表格中的 `Gender` 列跨越了两行,`Location` 列跨越了两列。注意,在定义了 `colSpan` 属性的列后面应该添加相应数量的列来占据跨度。 希望这可以帮助你实现合并单元的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值