zoukankan      html  css  js  c++  java
  • bootstrap -table 给表格单元格内添加按钮和事件

    1、初始化注意事项

     1 //这段必须放在表格初始化之前。
     2 
     3 function addFunctionAlty(value, row, index) {
     4        return [
     5        '<button id="bind" type="button" class="btn btn-default">绑定</button>',
     6        '<button id="unbind" type="button" class="btn btn-default">解绑</button>',
     7        ].join('');
     8      } 
     9 window.operateEvents = {
    10         'click #bind': function (e, value, row, index) {
    11            alert(row.qxxh);
    12            $("#upload").modal('show');
    13          }, 'click #unbind': function (e, value, row, index) {
    14            alert(row.qxxh);
    15            $("#upload").modal('show');
    16          }
    17        };
    18 
    19 // 表格初始化
    20     $('#table').bootstrapTable({
    21         pagination: true,
    22         showColumns: true,
    23         pageSize: 10,
    24         pageNumber: 1,
    25         pageList: [10, 25, 50],
    26         showRefresh: true,
    27         smartDisplay: false,
    28         singleSelect: true, // 单选checkbox
    29         clickToSelect: true,
    30         uniqueId: 'id',
    31         method: 'get',
    32         url: '/sys/netbar/manage/list/data',
    33         dataType: 'json',
    34         sidePagination: 'server',
    35         toolbar: '#toolbar',
    36         queryParams: function (params) {
    37             var params = {
    38                 offset: params.offset,   //数据起始
    39                 limit: params.limit,  //偏移量
    40                 netbarName: $("#netbarName").val(),
    41                 netbarNo: $("#netbarNo").val(),
    42                 areaCode: $("#areaCode").val()
    43             };
    44             return params;
    45         },
    46         columns: [{
    47             checkbox: true
    48         }, {
    49             field: 'netbarNo',
    50             title: '网吧编号',
    51         }, {
    52             field: 'name',
    53             title: '网吧名称',
    54         }, {
    55             field: 'manager',
    56             title: '负责人',
    57         }, {
    58             field: 'phone',
    59             title: '手机号',
    60         }, {
    61             field: 'createTimeStr',
    62             title: '创建时间',
    63         }, {
    64             field: 'address',
    65             title: '地址',
    66         }, {
    67             field: 'operate',
    68             title: '操作',
    69             events: operateEvents,//给按钮注册事件
    70             formatter: addFunctionAlty//表格中增加按钮  
    71         }]
    72     });

    2、效果如下

    参考:

    https://blog.csdn.net/zhaoyaxiansheng/article/details/88121991?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

     https://www.cnblogs.com/Andrew520/p/9706990.html

  • 相关阅读:
    开发day7
    开发day6
    开发day5
    开发day4
    开发day3
    开发day2
    开发day1
    假期学习2/8
    什么是栈帧
    JDK、JRE和JVM到底是什么
  • 原文地址:https://www.cnblogs.com/116970u/p/12561871.html
Copyright © 2011-2022 走看看