新增表格插件,微调样式

README.md

@@ -37,6 +37,10 @@
 - Bootstrap-Multitabs
 
 ### 更新记录
+2019.05.13
+略微调整单选框和复选框的样式
+新增表格插件(bootstrap-table)简单示例页面
+
 2019.05.05
 修改Bootstrap-Multitabs插件js，新增缓存配置cache，默认为false，如果需要缓存，可以在index.min.js增加配置cache : true
 

css/style.min.css

@@ -141,7 +141,8 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 .table>tfoot>tr>th,
 .table>thead>tr>td,
 .table>thead>tr>th {
-    padding: .75em;
+    /*padding: .75em;*/
+    padding: 10px;
 	line-height: 1.5;
     border-color: #eceeef;
 }
@@ -568,6 +569,8 @@ button.list-group-item:hover {
     padding-left: 30px;
     font-weight: 400;
     min-height: 18px;
+    height: auto!important;
+    line-height: 18px!important;
 }
 input[type=checkbox],
 input[type=radio] {
@@ -589,7 +592,7 @@ input[type=radio] {
     height: 18px;
     width: 18px;
     left: 0;
-    top: 1px;
+    top: 0px;
     border: 2px solid #ebebeb;;
     -webkit-transition: all .1s;
     -o-transition: all .1s;
@@ -603,7 +606,7 @@ input[type=radio] {
     width: 5px;
     height: 10px;
     left: 7px;
-    top: 4px;
+    top: 3px;
     border: solid #4d5259;
     border-width: 0 2px 2px 0;
     -webkit-transform: rotate(45deg);
@@ -733,7 +736,7 @@ input[type=radio] {
     border: 0;
     height: 6px;
     left: 6px;
-    top: 7px;
+    top: 6px;
     width: 6px;
     background: #4d5259;
     -webkit-border-radius: 100%;

index.html

@@ -66,6 +66,7 @@
                 <li> <a class="multitabs" href="lyear_pages_rabc.html">设置权限</a> </li>
                 <li> <a class="multitabs" href="lyear_pages_add_doc.html">新增文档</a> </li>
                 <li> <a class="multitabs" href="lyear_pages_guide.html">表单向导</a> </li>
+                <li> <a class="multitabs" href="lyear_pages_data_table.html">表格插件</a> </li>
                 <li> <a href="lyear_pages_login.html" target="_blank">登录页面</a> </li>
                 <li> <a href="lyear_pages_error.html" target="_blank">错误页面</a> </li>
               </ul>

js/bootstrap-table/extensions/defer-url/bootstrap-table-defer-url.min.js

@@ -0,0 +1,10 @@
+/**
+  * bootstrap-table - An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3).
+  *
+  * @version v1.14.2
+  * @homepage https://bootstrap-table.com
+  * @author wenzhixin <wenzhixin2010@gmail.com> (http://wenzhixin.net.cn/)
+  * @license MIT
+  */
+
+(function(a,b){if('function'==typeof define&&define.amd)define([],b);else if('undefined'!=typeof exports)b();else{b(),a.bootstrapTableDeferUrl={exports:{}}.exports}})(this,function(){'use strict';(function(a){a.extend(a.fn.bootstrapTable.defaults,{deferUrl:void 0});var b=a.fn.bootstrapTable.Constructor,c=b.prototype.init;b.prototype.init=function(){c.apply(this,Array.prototype.slice.apply(arguments)),this.options.deferUrl&&(this.options.url=this.options.deferUrl)}})(jQuery)});

js/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.min.css

@@ -0,0 +1,10 @@
+/**
+  * bootstrap-table - An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3).
+  *
+  * @version v1.14.2
+  * @homepage https://bootstrap-table.com
+  * @author wenzhixin <wenzhixin2010@gmail.com> (http://wenzhixin.net.cn/)
+  * @license MIT
+  */
+
+.no-filter-control{height:34px}.filter-control{margin:0 2px 2px 2px}

js/bootstrap-table/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css

@@ -0,0 +1,10 @@
+/**
+  * bootstrap-table - An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3).
+  *
+  * @version v1.14.2
+  * @homepage https://bootstrap-table.com
+  * @author wenzhixin <wenzhixin2010@gmail.com> (http://wenzhixin.net.cn/)
+  * @license MIT
+  */
+
+.fixed-table-header-columns,.fixed-table-body-columns{position:absolute;background-color:#fff;box-sizing:border-box;overflow:hidden;z-index:1}.fixed-table-header-columns{z-index:2}.fixed-table-header-columns .table,.fixed-table-body-columns .table{border-right:1px solid #ddd}.fixed-table-header-columns .table.table-no-bordered,.fixed-table-body-columns .table.table-no-bordered{border-right:1px solid transparent}.fixed-table-body-columns table{position:absolute;animation:none}

js/bootstrap-table/extensions/group-by-v2/bootstrap-table-group-by.min.css

@@ -0,0 +1,10 @@
+/**
+  * bootstrap-table - An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3).
+  *
+  * @version v1.14.2
+  * @homepage https://bootstrap-table.com
+  * @author wenzhixin <wenzhixin2010@gmail.com> (http://wenzhixin.net.cn/)
+  * @license MIT
+  */
+
+.bootstrap-table .table>tbody>tr.groupBy{cursor:pointer}.bootstrap-table .table>tbody>tr.hidden+tr.detail-view{display:none}

js/bootstrap-table/extensions/multiple-selection-row/bootstrap-table-multiple-selection-row.min.css

@@ -0,0 +1,10 @@
+/**
+  * bootstrap-table - An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3).
+  *
+  * @version v1.14.2
+  * @homepage https://bootstrap-table.com
+  * @author wenzhixin <wenzhixin2010@gmail.com> (http://wenzhixin.net.cn/)
+  * @license MIT
+  */
+
+.multiple-select-row-selected{background:lightBlue}.table tbody tr:hover td,.table tbody tr:hover th{background-color:transparent}.table-striped tbody tr:nth-child(odd):hover td{background-color:#f9f9f9}.fixed-table-container tbody .selected td{background:lightBlue}

js/bootstrap-table/extensions/natural-sorting/bootstrap-table-natural-sorting.min.js

@@ -0,0 +1,10 @@
+/**
+  * bootstrap-table - An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3).
+  *
+  * @version v1.14.2
+  * @homepage https://bootstrap-table.com
+  * @author wenzhixin <wenzhixin2010@gmail.com> (http://wenzhixin.net.cn/)
+  * @license MIT
+  */
+
+(function(a,b){if("function"==typeof define&&define.amd)define([],b);else if("undefined"!=typeof exports)b();else{b(),a.bootstrapTableNaturalSorting={exports:{}}.exports}})(this,function(){"use strict"});

js/bootstrap-table/extensions/page-jump-to/bootstrap-table-page-jump-to.min.css

@@ -0,0 +1,10 @@
+/**
+  * bootstrap-table - An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3).
+  *
+  * @version v1.14.2
+  * @homepage https://bootstrap-table.com
+  * @author wenzhixin <wenzhixin2010@gmail.com> (http://wenzhixin.net.cn/)
+  * @license MIT
+  */
+
+.jumpto input{height:31px;width:50px;margin-left:5px;margin-right:5px;text-align:center;display:inline-block}

js/bootstrap-table/extensions/sticky-header/bootstrap-table-sticky-header.min.css

@@ -0,0 +1,10 @@
+/**
+  * bootstrap-table - An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3).
+  *
+  * @version v1.14.2
+  * @homepage https://bootstrap-table.com
+  * @author wenzhixin <wenzhixin2010@gmail.com> (http://wenzhixin.net.cn/)
+  * @license MIT
+  */
+
+.fix-sticky{position:fixed!important;overflow:hidden;z-index:100}.fix-sticky table thead{background:#fff}.fix-sticky table thead.thead-light{background:#e9ecef}.fix-sticky table thead.thead-light{background:#212529}

lyear_pages_data_table.html

@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+<title>bootstrap-table - 光年(Light Year Admin)后台管理系统模板</title>
+<link rel="icon" href="favicon.ico" type="image/ico">
+<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
+<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
+<meta name="author" content="yinqi">
+<link href="css/bootstrap.min.css" rel="stylesheet">
+<link href="css/materialdesignicons.min.css" rel="stylesheet">
+<link href="css/animate.css" rel="stylesheet">
+<link href="css/style.min.css" rel="stylesheet">
+<link href="js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
+</head>
+  
+<body>
+<div class="container-fluid p-t-15">
+  
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="card">
+        <div class="card-header"><h4>bootstrap-table简单示例</h4></div>
+        <div class="card-body">
+          
+          <div id="toolbar" class="toolbar-btn-action">
+            <button id="btn_add" type="button" class="btn btn-primary m-r-5">
+              <span class="mdi mdi-plus" aria-hidden="true"></span>新增
+            </button>
+            <button id="btn_edit" type="button" class="btn btn-success m-r-5">
+              <span class="mdi mdi-check" aria-hidden="true"></span>启用
+            </button>
+            <button id="btn_edit" type="button" class="btn btn-warning m-r-5">
+              <span class="mdi mdi-block-helper" aria-hidden="true"></span>禁用
+            </button>
+            <button id="btn_delete" type="button" class="btn btn-danger">
+              <span class="mdi mdi-window-close" aria-hidden="true"></span>删除
+            </button>
+          </div>
+          <table id="tb_departments"></table>
+ 
+        </div>
+      </div>
+    </div>
+    
+  </div>
+  
+</div>
+
+<script type="text/javascript" src="js/jquery.min.js"></script>
+<script type="text/javascript" src="js/bootstrap.min.js"></script>
+<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
+<script type="text/javascript" src="js/bootstrap-table/bootstrap-table.js"></script>
+<script type="text/javascript" src="js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
+
+<!--行内编辑插件-->
+<link href="js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
+<script type="text/javascript" src="js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
+<script type="text/javascript" src="js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>
+
+<script type="text/javascript" src="js/main.min.js"></script>
+<script type="text/javascript">
+$('#tb_departments').bootstrapTable({
+    classes: 'table table-bordered table-hover table-striped',
+    url: 'http://www.bixiaguangnian.com/index/test/getExampleJson',
+    method: 'get',
+    dataType : 'jsonp',        // 因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
+    uniqueId: 'id',
+    idField: 'id',             // 每行的唯一标识字段
+    toolbar: '#toolbar',       // 工具按钮容器
+    //clickToSelect: true,     // 是否启用点击选中行
+    showColumns: true,         // 是否显示所有的列
+    showRefresh: true,         // 是否显示刷新按钮
+    
+    //showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
+  
+    pagination: true,                    // 是否显示分页
+    sortOrder: "asc",                    // 排序方式
+    queryParams: function(params) {
+        var temp = {
+            limit: params.limit,         // 每页数据量
+            offset: params.offset,       // sql语句起始索引
+            page: (params.offset / params.limit) + 1,
+            sort: params.sort,           // 排序的列名
+            sortOrder: params.order      // 排序方式'asc' 'desc'
+        };
+        return temp;
+    },                                   // 传递参数
+    sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
+    pageNumber: 1,                       // 初始化加载第一页，默认第一页
+    pageSize: 10,                        // 每页的记录行数
+    pageList: [10, 25, 50, 100],         // 可供选择的每页的行数
+    //search: true,                      // 是否显示表格搜索，此搜索是客户端搜索
+    
+    //showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
+    //exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据
+  
+    columns: [{
+        checkbox: true    // 是否显示复选框
+    }, {
+        field: 'id',
+        title: 'ID',
+        sortable: true    // 是否排序
+    }, {
+        field: 'author',
+        title: '作者'
+    }, {
+        field: 'dynasty',
+        title: '朝代',
+    }, {
+        field: 'nationality',
+        title: '国籍'
+    }, {
+        field: 'opus',
+        title: '作品'
+    }, {
+        field: 'category',
+        title: '分类'
+    }, {
+        field: 'status',
+        title: '状态',
+        editable: {
+            type: 'select',
+            title: "状态",
+            pk: 1,
+            source: [
+                { value: 0, text: '禁用'},
+                { value: 1, text: '正常'}
+            ],
+            noeditFormatter: function (value, row, index) {
+                var result;
+                if (value == '0' || value == '禁用') {
+                    result = { filed: "status", value: "禁用", class: "label label-danger" };
+                } else if (value == '1' || value == '正常') {
+                    result = { filed: "status", value: "正常", class: "label label-success" };
+                }
+                
+                return result; // 这里对bootstrap-table-editable.min.js做了一些修改，让其能接收class
+            },
+            // 可以按列分开做保存，也可以用后面的onEditableSave
+            url: 'http://www.bixiaguangnian.com/index/test/testEditJson',
+            ajaxOptions: {
+                type: 'get',
+                dataType: 'jsonp'
+            }, // 默认是post方式提交,这里因为跨域,改成get
+            success: function(response, newValue) {
+                if (response.code == '200') {
+                    // 这里的状态显示有自定义样式区分，做单元格更新
+                    $('#tb_departments').bootstrapTable('updateCellById', {id: response.id, field: 'status', value: newValue});
+                } else {
+                    return response.msg;
+                }
+            },
+            highlight: false
+        }
+    }, {
+        field: 'operate',
+        title: '操作',
+        formatter: btnGroup,  // 自定义方法
+        events: {
+            'click .edit-btn': function (event, value, row, index) {
+                editUser(row.id);
+            },
+            'click .del-btn': function (event, value, row, index) {
+                delUser(row.id);
+            }
+        }
+    }],
+    /*
+    onEditableSave: function (field, row, oldValue, $el) {
+        $.ajax({
+            type: "get",
+            url: "http://127.0.0.113/edit.php",
+            data: row,
+            dataType: 'jsonp',
+            success: function (data, status) {
+                if (data.code == '200') {
+                    // 这里的状态显示有自定义样式区分，做单行的更新
+                    $('.example-table').bootstrapTable('updateRow', {index: row.id, row: row});
+                } else {
+                    alert(data.msg);
+                }
+            },
+            error: function () {
+                alert('修改失败，请稍后再试');
+            }
+        });
+    }
+    */
+    onLoadSuccess: function(data){
+        $("[data-toggle='tooltip']").tooltip();
+    }
+});
+
+// 操作按钮
+function btnGroup ()
+{
+    let html =
+        '<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
+        '<a href="#!" class="btn btn-xs btn-default del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
+    return html;
+}
+
+// 操作方法 - 编辑
+function editUser()
+{
+    alert('编辑信息跳转');
+}
+// 操作方法 - 删除
+function delUser()
+{
+    alert('信息删除成功');
+}
+</script>
+</body>
+</html>