专栏首页编程微刊bootstrap table点击修改按钮给弹框赋值
原创

bootstrap table点击修改按钮给弹框赋值

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Dashboard | Nadhif - Responsive Admin Template</title>
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.min.js"></script>
    </head>
    <style>
        .page-content-wrapper {
            width: 800px;
            position: absolute;
            top: 10%;
            left: 24%;
            background: #fff;
            border: 1px solid #999;
            padding: 3% 0 0 9%;
            display: none;
        }
        .inputstyle {
            width: 60%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    </style>
    <body>

        <table id="mytab" class="table table-hover"></table>
        <!-- 新增和修改界面 -->
        <div class="page-content-wrapper">
            <input type="text" class="inputstyle" id="id" style="display: none;">
            <div class="form-group">
                <label>工号:</label> <input type="text" class="inputstyle" id="deviceId">
            </div>
            <div class="form-group">
                <label>姓名:</label> <input type="text" class="inputstyle" id="name">
            </div>
            <div class="form-group">
                <label>电话:</label> <input type="text" class="inputstyle" id="phone">
            </div>
            <div class="form-group">
                <label>公司:</label> <input type="text" class="inputstyle" id="organName">
            </div>


            <div class="modal-footer">
                <button type="button" class="btn default" data-dismiss="modal" id="close">关闭</button>
                <button type="button" class="btn blue" id="addBtn">保存</button>

            </div>
        </div>

        <script>
            $('#mytab').bootstrapTable({
                method: 'get',
                url: "test.json", // 请求路径
                striped: true, // 是否显示行间隔色
                pageNumber: 1, // 初始化加载第一页
                pagination: true, // 是否分页
                sidePagination: 'client', // server:服务器端分页|client:前端分页
                pageSize: 5, // 单页记录数
                pageList: [5, 20, 30],
                // showRefresh : true,// 刷新按钮
                queryParams: function(params) { // 上传服务器的参数
                    var temp = {

                    };
                    return temp;
                },
                columns: [{
                    title: 'id',
                    field: 'id',
                    visible: false
                }, {
                    title: '工号',
                    field: 'deviceId',

                }, {
                    title: '姓名',
                    field: 'name',

                }, {
                    title: '联系电话',
                    field: 'phone'
                }, {
                    title: '公司部门',
                    field: 'organName'
                }, {
                    title: '操作',
                    field: 'id',
                    formatter: option
                }]
            })

            // 定义删除、更新按钮
            function option(value, row, index) {
                var htm = "";
                htm = '<button id="upd"  onclick="update(\'' + escape(JSON.stringify(row)) + '\')">修改</button>';
                return htm;
            }

            function update(row) {
                $(".page-content-wrapper").show();
                var data = JSON.parse(unescape(row))
                $('#deviceId').val(data.deviceId)
                $('#name').val(data.name)
                $('#phone').val(data.phone)
                $('#organName').val(data.organName)

            }
            $("#close").on("click", function() {
                $(".page-content-wrapper").hide();
            })
        </script>
    </body>

</html>

test.json

[
    {
        "id": 1,
        "deviceId": "43445",
        "name": "王小婷",
        "phone": "1567865475",
        "organName": "字节跳动"
    },  {
        "id": 2,
        "deviceId": "53456",
        "name": "最帅的坏兔子",
        "phone": "1567865475",
        "organName": "腾讯" 
    },{
        "id": 3,
        "deviceId": "2345",
        "name": "阿强",
        "phone": "1567865475",
        "organName": "360" 
    },{
        "id": 4,
        "deviceId": "2345",
        "name": "阿花",
        "phone": "1567865475",
        "organName": "百度" 
    },
    {
        "id": 5,
        "deviceId": "2345",
        "name": "阿奶",
        "phone": "1567865475",
        "organName": "蚂蚁金服" 
    },{
        "id": 5,
        "deviceId": "2345",
        "name": "阿狗",
        "phone": "1567865475",
        "organName": "阿里" 
    }
]

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • bootstrap table点击修改按钮给弹框赋值

    王小婷
  • ztree实现左边动态生成树,右边为具体信息功能

    王小婷
  • input输入框自动消除空格

    今天遇到了一个问题,用户在在前端的input里面输入id的时候,多写了个空格,数据库里面就找不到id了,所以无法获取输入的id所绑定的标签位置在哪里,现在需要在...

    王小婷
  • bootstrap table点击修改按钮给弹框赋值

    王小婷
  • 【专业技术】CSS作用及用法

    层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的...

    程序员互动联盟
  • Bootstrap-3-Typeahead

    是Bootstrap-3-Typeahead,不是Twitter open source的typeahead,两者用法有差异。外加如果配合原生的Bootstra...

    _淡定_
  • 坑 - 当insert ignore遇到not null

    INSERT IGNORE不仅仅会忽略DUPLICATE KEY错误,也会忽略非空错误

    十毛
  • JavaWeb——JQuery之五种选择器的应用及实践案例总结(基本选择器、层级选择器、属性选择器、过滤选择器、表单过滤选择器)

    2)入口函数:(function () {});       注意:window.onload 和(function () 的区别, 前者只能定义一次,定义多次...

    Winter_world
  • WTM 构建DotNetCore开源生态,坐而论道不如起而行之

    我记得大约是18、9岁的时候接触的java,比dotnet更早,毕竟java更早出来的。但是后来有了C#之后,我喜新厌旧了,原因很简单,好比两个姑娘,C#更美,...

    梁规晓
  • Laravel 5 系列入门教程(二)【最适合中国人的 Laravel 教程】

    我们将改变学习路线,不再像 Laravel 4 教程那样先构建登录系统。在本篇教程中,我们将一起构建 Pages 的管理功能,尝试 Laravel 的路由和 P...

    貟王軍

扫码关注云+社区

领取腾讯云代金券