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. BigBlueButton简介

    BigBlueButton是一套开源的视频会议系统,特别适用于远程教育但也可以用于标准的会议.该系统 可以让多个用户登录共享他们的摄像头并同时能够通过VOIP进行交流.可以在线演示PDF和Office ...

  2. LightOJ 1269 - Consecutive Sum Trie树

    题意:给出一串序列,求区间连续异或值的最大和最小. 思路:如果不是出在专题里,想不到可以用字典树做.先求前缀异或值,转为二进制,加入Trie树中,如果要求最大,就是尽可能走和当前位数字相反的,这样异或 ...

  3. Sass 基本特性-运算 感觉满满都是坑

    Sass中的基本运算 一.加法 在 CSS 中能做运算的,到目前为止仅有 calc() 函数可行.但在 Sass 中,运算只是其基本特性之一.      sass做加法运算是可以不考虑参数带单位,但需 ...

  4. PowerDesigner逆向工程

    再用PD建表完成后导成SQL脚本然后在SQL Server中运行后生成数据库后,就想到,可不可以将直接将数据库的内容生成PD文档?经过上网查,当然可以的. 要将SQL Server中的数据库导入到PD ...

  5. UIImageView属性---iOS-Apple苹果官方文档翻译

    本系列所有开发文档翻译链接地址:iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址  //转载请注明出处--本文永久链接:http://www.cnblogs.com/C ...

  6. bzoj 1057 单调栈

    首先我们可以枚举每个一点,然后向下一直拓展到不能拓展为止,然后向下拓展的同时我们可以算出来向左最多拓展的个数,用单调栈来维护一个上升的序列,这样就类似与悬线法找最大01子矩阵了,但是对于这题01交替来 ...

  7. JQuery-Ajax后台提交数据与获取数据 Java代码

    function jqajax(){ var urlName = $("#urlName").val(); var urla = $("#url").val() ...

  8. hdu 1200 To and Fro(简单模拟或DP)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1200 To and Fro Time Limit: 2000/1000 MS (Java/Others ...

  9. hdu 1395 2^x mod n = 1（暴力题）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1395 2^x mod n = 1 Time Limit: 2000/1000 MS (Java/Oth ...

  10. MapperScannerConfigurer不 property-placeholder

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