Bootstrap-table 给数据行添加事件,注意events要加到head里，否则无效

最新推荐文章于 2021-09-15 13:05:44 发布

鲸鱼姐

最新推荐文章于 2021-09-15 13:05:44 发布

阅读量1.8k

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/zhaolulu916/article/details/95458258

版权

bootstrap 专栏收录该内容

42 篇文章 6 订阅

订阅专栏

一、给数据增加formmater和events
<tr>
    <th data-field="state" data-checkbox="true"></th>
    <th data-field="id" data-sortable="true">ID</th>
    <th data-field="rolename" data-sortable="true" data-searchable="true" data-filter-control="input">角色</th>
    <th data-field="operation" data-formatter="operateFormatter" data-events="actionEvents">操作</th>
</tr>

二、在script里增加operateFormatter

function operateFormatter(value, row, index) {//赋予的参数
    return [
        '<a id="edit" class="btn btn-default" href="#">编辑</a>',
       '<a id="delete"class="btn btn-default" href="#">删除</a>',
        '<a id="roleUser"class="btn btn-default" href="#">分配人员</a>',
        '<a id="roleMenu" class="btn btn-default" href="#">分配权限</a>',
    ].join('');
}

三、在<head></head>里script增加actionEvents，否则无效

window.actionEvents = {
  'click #edit': function(e, value, row, index) {
     //修改操作
    $('#editId').val(row.id);
   $('#editName').val(row.rolename);
   $("#editRoleModal").modal("show");
    },

  'click #delete' : function(e, value, row, index) {
     //删除操作
      if (confirm('确定删除吗？'))
      {
       $.ajax({
         url:"deleteRole",
         dataType:"json",
         traditional: true,//属性在这里设置
         method:"post",
         data:{
            "ids":row.id
         },
         success:function(data){
            document.getElementById("tipContent").innerText="删除成功";
            $("#Tip").modal('show');
            $("#roleTable").bootstrapTable("refresh");
         },
         error:function(){
            document.getElementById("tipContent").innerText="删除失败";
            $("#Tip").modal('show');
         }
      });
      }
    }
  }

鲸鱼姐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap-table 给数据行添加事件,注意events要加到head里，否则无效

一、给数据增加formmater和events<tr> <th data-field="state" data-checkbox="true"></th> <th data-field="id" data-sortable="true">ID</th> <th data-field="rolename" ...
复制链接

扫一扫

专栏目录