githab
/
Light-Year-Admin-Using-Iframe


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
							<!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://www.bixiaguangnian.com/index/test/testEditTwo",
            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>