https://github.com/wenzhixin/bootstrap-table-examples/blob/master/crud/index.html

<!DOCTYPE html>
<html>
<head>
    <title>CRUD Table</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
    <link rel="stylesheet" href="../assets/examples.css">
    <style>
        .update {
            color: #333;
            margin-right: 5px;
        }
        .remove {
            color: red;
            margin-left: 5px;
        }
        .alert {
            padding: 0 14px;
            margin-bottom: 0;
            display: inline-block;
        }
    </style>
    <script src="../assets/jquery.min.js"></script>
    <script src="../assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
    <script src="../ga.js"></script>
</head>
<body>
    <div class="container">
        <h1>CRUD Table</h1>
        <p class="toolbar">
            <a class="create btn btn-default" href="javascript:">Create Item</a>
            <span class="alert"></span>
        </p>
        <table id="table"
               data-show-refresh="true"
               data-show-columns="true"
               data-search="true"
               data-query-params="queryParams"
               data-toolbar=".toolbar">
            <thead>
            <tr>
                <th data-field="name">Name</th>
                <th data-field="stargazers_count">Stars</th>
                <th data-field="forks_count">Forks</th>
                <th data-field="description">Description</th>
                <th data-field="action"
                    data-align="center"
                    data-formatter="actionFormatter"
                    data-events="actionEvents">Action</th>
            </tr>
            </thead>
        </table>
    </div>

<div id="modal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" class="form-control" name="name" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <label>Stars</label>
                        <input type="number" class="form-control" name="stargazers_count" placeholder="Stars">
                    </div>
                    <div class="form-group">
                        <label>Forks</label>
                        <input type="number" class="form-control" name="forks_count" placeholder="Forks">
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <input type="text" class="form-control" name="description" placeholder="Description">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary submit">Submit</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<script>
    var API_URL = 'http://' + location.host + ':3001/list/';
    var $table = $('#table').bootstrapTable({url: API_URL}),
        $modal = $('#modal').modal({show: false}),
        $alert = $('.alert').hide();
    $(function () {
        // create event
        $('.create').click(function () {
            showModal($(this).text());
        });
        $modal.find('.submit').click(function () {
            var row = {};
            $modal.find('input[name]').each(function () {
                row[$(this).attr('name')] = $(this).val();
            });
            $.ajax({
                url: API_URL + ($modal.data('id') || ''),
                type: $modal.data('id') ? 'put' : 'post',
                contentType: 'application/json',
                data: JSON.stringify(row),
                success: function () {
                    $modal.modal('hide');
                    $table.bootstrapTable('refresh');
                    showAlert(($modal.data('id') ? 'Update' : 'Create') + ' item successful!', 'success');
                },
                error: function () {
                    $modal.modal('hide');
                    showAlert(($modal.data('id') ? 'Update' : 'Create') + ' item error!', 'danger');
                }
            });
        });
    });
    function queryParams(params) {
        return {};
    }
    function actionFormatter(value) {
        return [
            '<a class="update" href="javascript:" title="Update Item"><i class="glyphicon glyphicon-edit"></i></a>',
            '<a class="remove" href="javascript:" title="Delete Item"><i class="glyphicon glyphicon-remove-circle"></i></a>',
        ].join('');
    }
    // update and delete events
    window.actionEvents = {
        'click .update': function (e, value, row) {
            showModal($(this).attr('title'), row);
        },
        'click .remove': function (e, value, row) {
            if (confirm('Are you sure to delete this item?')) {
                $.ajax({
                    url: API_URL + row.id,
                    type: 'delete',
                    success: function () {
                        $table.bootstrapTable('refresh');
                        showAlert('Delete item successful!', 'success');
                    },
                    error: function () {
                        showAlert('Delete item error!', 'danger');
                    }
                })
            }
        }
    };
    function showModal(title, row) {
        row = row || {
            id: '',
            name: '',
            stargazers_count: 0,
            forks_count: 0,
            description: ''
        }; // default row value
        $modal.data('id', row.id);
        $modal.find('.modal-title').text(title);
        for (var name in row) {
            $modal.find('input[name="' + name + '"]').val(row[name]);
        }
        $modal.modal('show');
    }
    function showAlert(title, type) {
        $alert.attr('class', 'alert alert-' + type || 'success')
              .html('<i class="glyphicon glyphicon-check"></i> ' + title).show();
        setTimeout(function () {
            $alert.hide();
        }, 3000);
    }
</script>
</body>
</html>

Bootstrap 实现CRUD示例及代码的更多相关文章

  1. Bootstrap Table 使用示例及代码

    http://issues.wenzhixin.net.cn/bootstrap-table/ <!DOCTYPE html> <html> <head> < ...

  2. bootstrap 基本页面元素，代码，列表

    bootstrap 基本页面元素,代码,列表 <!DOCTYPE html> <html> <head> <title></title> & ...

  3. [示例] 用代码设置 ListView 颜色 （只适用 Win 平台，无需修改官方源码）

    如果可以使用代码随意设置 ListView 的颜色,而不用加载额外的 Style 及修改官方的源码,那该有多好?! 其实 Style 提供了很强了扩充性及可塑性,可以很容易的去操作它. 下面以 Lis ...

  4. 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章  ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...

  5. java框架之SpringBoot(6)-Restful风格的CRUD示例

    准备 环境 IDE:Idea SpringBoot版本:1.5.19 UI:BootStrap 4 模板引擎:thymeleaf 3 效果:Restful 风格 CRUD 功能的 Demo 依赖 &l ...

  6. SpringBoot 整合 MyBatis，实现 CRUD 示例

    目录 前言 创建项目/模块 SpringBoot Console Application CommandLineRunner SpringBoot 集成 MyBatis 创建数据库/表 配置数据源/连 ...

  7. jQueryMobile示例页面代码

    这是一个jQueryMobile示例页面 示例效果:http://hovertree.com/texiao/jquerymobile/ 可以在手机或者触屏浏览器查看效果. 以下是HTML代码: < ...

  8. Bootstrap页面布局10 - BS代码

    网页中标记代码内容使用code和pre标签 要在HTML中显示标签本来的样子需要转化为实体 在此附上百度的实体字符:http://baike.baidu.com/view/4757776.htm#3 ...

  9. Bootstrap方法之--排版、代码

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

随机推荐

  1. ajax 请求数据的两种方法

    实现ajax 异步访问网络的方法有两个.第一个是原始的方法,第二个是利用jquery包的 原始的方法不用引入jquery包,只需在html中编写script 片段 这里我演示的是一个传递参数查询的例子 ...

  2. 【NOIP】2013提高组 花匠(摆花)

    [算法]DP||贪心 [题解] (1)动态规划: 令f[i][0..1]为两种条件下前i株花的最大保留数量,状态转移方程: f[i][0]=max(f[j][1]+1) (j=i-1...1)(h[i ...

  3. nyoj 15 括号匹配（二） （经典dp）

    题目链接 描述 给你一个字符串,里面只包含"(",")","[","]"四种符号,请问你需要至少添加多少个括号才能使这些 ...

  4. HDU 2577 How to Type (字符串处理）

    题目链接 Problem Description Pirates have finished developing the typing software. He called Cathy to te ...

  5. js 的function为什么可以添加属性

    (1) function person(){ this.name = 'Tom'; } (2) function person(){} person.name = 'Tom'; (3) functio ...

  6. HTML5 Canvas时间效果

    Canvas 时间效果: function clockTest() { var canvas = document.getElementById('canvas'); if (!(canvas &am ...

  7. csc_滤镜filter和实现透明的两种方式

    有这样一个需求,给一个地图实现半透明效果. 使用css滤镜属性可以实现:filter. 下面是属性的所以值 filter: none | blur() | brightness() | contras ...

  8. MapperScannerConfigurer不 property-placeholder

    关于org.mybatis.spring.mapper.MapperScannerConfigurer不支持 property-placeholder 参考了http://www.oschina.ne ...

  9. 【Windows使用笔记】Windows日常使用软件

    整理一些对于我来说日常使用的Windows软件. 排名不分先后,仅凭我想起来的顺序! 1 MadAppLauncher 这个对我来说非常需要了. 使用它可以快速启动日常常用的软件,非常快捷高效.一般来 ...

  10. win10远程桌面配置

    Win10连接远程桌面的时候提示您的凭证不工作该怎么办? http://www.cnblogs.com/zhuimengle/p/6048128.html 二.服务器端 1.依旧进入组策略,不过是在服 ...