表格插件-bootstrap table的表内查看编辑删除

简介: 表格插件-bootstrap table的表内查看编辑删除

基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。

上一篇写到分页的实际应用,今天写的是表格插件-bootstrap table的表内查看编辑删除,要实现的效果如下图:

其实很简单,只需要在js的columns:里面添加操作一栏的代码

            title : '操作',
            field : 'id',
            formatter : option
        }

然后继续定义一个函数option;定义删除、更新操作

 // 定义删除、更新操作
    function option(value, row, index) {
        var htm = '<button id="delUser" userId='
                + value
                + ' onclick="delUser(this)">删除</button><button id="dupUser" onclick="updUser('
                + value + ')">修改</button>'
        return htm;
    }

完整参考代码示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- 引入的css文件  -->
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="css/bootstrap-table.min.css" rel="stylesheet">
        <title></title>
        <style>
            #delUser,#dupUser{
                background: #1caf9a;
                color: #FFFFFF;
                border: none;
                margin-left: 12px;
            }
        </style>
    </head>
    <body>
        <table id="mytable"></table>
    </body>
    <!-- 引入的js文件 -->
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table-zh-CN.min.js"></script>
    <script>
        $('#mytable').bootstrapTable({
            columns: [{
                field: 'id',
                title: '编号名'
            }, {
                field: 'name',
                title: '姓名'
            }, {
                field: 'photo',
                title: '联系方式'
            },{
            title : '操作',
            field : 'id',
            formatter : option
        }],
            data: [{
                id: 1,
                name: '王小婷',
                photo: '1373717324'
            }, {
                id: 2,
                name: '安安',
                photo: '131313'
            }]
        })
 // 定义删除、更新操作
    function option(value, row, index) {
        var htm = '<button id="delUser" userId='
                + value
                + ' onclick="delUser(this)">删除</button><button id="dupUser" onclick="updUser('
                + value + ')">修改</button>'
        return htm;
    }
    // 删除用户
function delUser(dom) {
    var mymessage = confirm("确认删除嘛?");
    if (mymessage == true) {
        $.ajax({
            url : path + '/user/' + $(dom).attr("userId"),
            type : 'delete',
            success : function(data) {
                $(dom).parent().parent().hide();
            },
            error : function(data){
                alert("服务器繁忙")
            }
        });
    }
}
// 编辑用户
function updUser(id) {
    layer.open({
        type : 2,
        title : '编辑用户',
        area : [ '500px', '440px' ],
        fix : false, // 
        content : path + '/user/pageUpd/' + id,
        end : function() {
            $("#mytab").bootstrapTable('refresh', {
                url : path + "/user/list"
            });
        }
    });
}
    </script>
</html>
相关文章
|
4月前
|
JSON 前端开发 数据格式
bootstrap table表格的点击详情按钮操作
bootstrap table表格的点击详情按钮操作
42 1
|
4月前
|
前端开发 JavaScript
Bootstrap Table根据参数搜索功能
Bootstrap Table根据参数搜索功能
37 0
|
4月前
|
前端开发
bootstrap table点击修改按钮给弹框赋值
bootstrap table点击修改按钮给弹框赋值
19 0
|
4月前
|
JSON 前端开发 数据库
Bootstrap Table使用教程(请求json数据渲染表格)
Bootstrap Table使用教程(请求json数据渲染表格)
42 0
|
4月前
|
前端开发
bootstrap table分页悬停颜色改变
bootstrap table分页悬停颜色改变
18 0
|
4月前
|
前端开发
解决bootstrap table刷新加载时白色闪屏问题
解决bootstrap table刷新加载时白色闪屏问题
28 0
|
4月前
|
前端开发
bootstrap table+layer实现一个表格删除
bootstrap table+layer实现一个表格删除
17 0
|
4月前
|
前端开发
bootstrap table表格去掉排序箭头
bootstrap table表格去掉排序箭头
33 2
|
4月前
|
前端开发
bootstrap table表格外面的边框全部去掉
bootstrap table表格外面的边框全部去掉
60 1
|
4月前
|
JSON 前端开发 JavaScript
bootstrap table表格内容居中对齐
bootstrap table表格内容居中对齐
40 0

相关产品

  • 云迁移中心