bootstrap-table 基础用法

1.需要添加的引用。

    <script src="@Url.Content("~/js/jquery-2.1.1.js")"></script>

　　 <script src="@Url.Content("~/js/bootstrap.min.js")"></script>

    <script src="@Url.Content("~/js/bootstrap-table.js")"></script>

    <script src="@Url.Content("~/js/bootstrap-table-zh-CN.js")"></script>

2.完整的HTML

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="@Url.Content("~/js/jquery-2.1.1.js")"></script>

    <link href="@Url.Content("~/css/bootstrap.min.css")" rel="stylesheet">

    <link href="@Url.Content("~/font-awesome/css/font-awesome.css")" rel="stylesheet">

    <link href="@Url.Content("~/css/plugins/iCheck/custom.css")" rel="stylesheet">

    <link href="@Url.Content("~/css/animate.css")" rel="stylesheet">

    <link href="@Url.Content("~/css/style.css")" rel="stylesheet">

    <script src="@Url.Content("~/js/jquery-ui-1.10.4.min.js")"></script>

    <script src="@Url.Content("~/js/bootstrap.min.js")"></script>

    <script src="@Url.Content("~/js/bootstrap-table.js")"></script>

    <script src="@Url.Content("~/js/bootstrap-table-zh-CN.js")"></script>

    <script src="@Url.Content("~/js/selectjs/bootstrap-select.js")"></script>

    <link href="@Url.Content("~/js/selectjs/bootstrap-select.min.css")" rel="stylesheet" />

    <script src="@Url.Content("~/js/selectjs/defaults-zh_CN.js")"></script>

    <script src="@Url.Content("~/js/layer/layer.js")"></script>

    <script src="@Url.Content("~/js/bootstrap.min.js")"></script>

    <script src="@Url.Content("~/js/plugins/metisMenu/jquery.metisMenu.js")"></script>

    <script src="@Url.Content("~/js/plugins/slimscroll/jquery.slimscroll.min.js")"></script>

    <!-- Custom and plugin javascript -->

    <script src="@Url.Content("~/js/inspinia.js")"></script>

    <script src="@Url.Content("~/js/plugins/pace/pace.min.js")"></script>

    <!-- iCheck -->

    <script src="@Url.Content("~/js/plugins/iCheck/icheck.min.js")"></script>

    <!-- Jvectormap -->

    <script src="@Url.Content("~/js/plugins/jvectormap/jquery-jvectormap-2.0.2.min.js")"></script>

    <script src="@Url.Content("~/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js")"></script>

    <script src="@Url.Content("~/js/JsIFrame.js")"></script>

    <script src="@Url.Content("~/js/layer/jquery.form.min.js")"></script>

    <script src="@Url.Content("~/js/ReportManage.js")"></script>

</head>

<body onload="IFrameResize()">

    <div style="background-color:#f3f3f3;height:100%">

        <div class="row">

            <div class="col-lg-12">

                <div class="ibox float-e-margins">

                    <div class="ibox-title">

                        <h5>科技查新报告单管理</h5>

                        <div class="ibox-tools">

                            <a class="collapse-link">

                                <i class="fa fa-chevron-up"></i>

                            </a>

                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">

                                <i class="fa fa-wrench"></i>

                            </a>

                            <a class="close-link">

                                <i class="fa fa-times"></i>

                            </a>

                        </div>

                    </div>

                    <div class="ibox-content">

                        <table id="cateTable" style="table-layout:fixed;word-break:break-all" data-toggle="table">

                            <thead>

                                <tr>

                                    <th data-field="ID" data-editable="true">ID</th>

                                    <th data-field="ReportNum">报告单编号</th>

                                    <th data-field="PrjName_CN" data-editable="true">委托单名称</th>

                                    <th data-field="Status" data-editable="true">状态</th>

                                    <th data-field="Addtime" data-editable="true">添加时间</th>

                                </tr>

                            </thead>

                        </table>

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

3. Ajax所在的JS代码（ <script src="@Url.Content("~/js/ReportManage.js")"></script>）

var ztable = null;

$(function () {

    InitTable();

});

//初始加载table

function InitTable() {

    //先销毁表格

    $('#cateTable').bootstrapTable('destroy');

    //初始化表格,动态从服务器加载数据

    ztable = $('#cateTable').bootstrapTable(

          {

              url: '../NoveltyReport/GetAllReport',         //请求后台的URL（*）

              method: 'get',                      //请求方式（*）               //工具按钮用哪个容器

              striped: true,                      //是否显示行间隔色

              cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）

              pagination: true,                   //是否显示分页（*）

              search: true,

              sortOrder: "asc",                   //排序方式

              sidePagination: "client",

              pageNumber: 1,                       //初始化加载第一页，默认第一页

              pageSize: 10,                       //每页的记录行数（*）

              strictSearch: true,

              queryParamsType: "undefined",

              onPageChange: function (number, size) {

                  //PageChanged();

              },

              onClickCell: function (field, value, row, $element) {

                  if (field == 7) {

                      DeleteProxyByID(row.ID);

                  } else if (field == 6) {

                      location.href = "../NoveltyReport/ReportEdit?ReportID=" + row.ID + "&&ProxyID=" + row.ProxyID;

                  } else if (field == 9) {

                      SubitShenHe(row);

                  } else if (field == 8) {

                      location.href = "../Word/DownLoadReport?reportID="+row.ID;

                  }

              },

              clickToSelect: false,                //是否启用点击选中行

              //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度

              uniqueId: "Id",                     //每一行的唯一标识，一般为主键列

              cardView: false,                    //是否显示详细视图

              detailView: false,                   //是否显示父子表

              columns: [

              {

                  field: 'Number',

                  title: '行号',

                  formatter: function (value, row, index) {

                      return index + 1;

                  }

              },

                  {

                      field: 'ID',

                      title: '序号',

                  },

                  {

                      field: 'ReportNum',

                      title: '报告单编号',

                      cellStyle: formatTableUnit

                  }, {

                      field: 'PrjName_CN',

                      title: '委托单名称',

                      cellStyle: formatTableUnit

                  },

                  {

                      field: 'Status',

                      title: '状态',

                      cellStyle: formatTableUnit

                  }, {

                      field: 'Addtime',

                      title: '添加时间',

                      cellStyle: formatTableUnit

                  },

                   {

                       title: "选择",

                       formatter: operateFormatter

                   },

              {

                  field: 'ProxyID',

                  title: '委托单号'

              },

              {

                  title: "下 载",

                  formatter: operateFormatterRed

              }, 

              ]

          }

      );

    $("#cateTable").bootstrapTable('hideColumn', 'ID');

    $("#cateTable").bootstrapTable('hideColumn', 'ProxyID');

}

function formatTableUnit(value, row, index) {

    return {

        css: {

            "overflow": "hidden",

            "white-space": "nowrap",

            "text-overflow": "ellipsis",

            " -webkit-line-clamp": "3"

        }

    }

}

function operateFormatter(value, row, index) {

    return [

        '<button type="button" class="RoleOfA btn btn-default  btn-sm" style="margin-right:15px;">查 看</button>',

    ].join('');

}

function operateFormatterRed(value, row, index) {

    return [

        '<button type="button" class="RoleOfA btn btn-default  btn-sm" style="margin-right:15px;">下 载</button>',

    ].join('');

}

function operateFormatterSH(value, row, index) {

    return [

    '<button type="button" class="RoleOfA btn btn-default  btn-sm" style="margin-right:15px;background-color:Blue;">提交审核</button>',

    ].join('');

}

function DeleteProxyByID(RepoprtID) {

    layer.confirm('您确定要删除数据？', {

        btn: ['确定', '取消'], //按钮

        offset: ["10%", "30%"]

    }, function () {

        $.post("../NoveltyReport/AjaxDeleteReport", { "RepoprtID": RepoprtID }, function (data) {

            if (data != "") {

                var rs = JSON.parse(data);

                if (rs.Result) {

                    layer.msg("删除成功！");

                    InitTable();

                } else {

                    layer.msg(rs.Msg);

                }

            }

        });

    }, function () {

    });

}

function SubitShenHe(row) {

    layer.confirm('您确定将报告单提交审核？', {

        btn: ['确定', '取消'], //按钮

        offset: ["10%", "30%"]

    }, function () {

        $.post("../NoveltyReport/SubReportRatify", { "RepoprtID": row.ID }, function (data) {

            if (data != "") {

                var rs = JSON.parse(data);

                if (rs.Result) {

                    layer.msg("提交审核成功！");

                    InitTable();

                } else {

                    layer.msg(rs.Msg);

                }

            }

        });

    }, function () {

    });

}

bootstrap-table 基础用法的更多相关文章

Bootstrap Table 的用法
记录下 Bootstrap Table 的用法,备忘. <!DOCTYPE html> <html> <head> <meta charset="u ...
web响应式之bootstrap的基础用法。
1/首先必须在head里面引用视窗viewport,以保证之后可以响应式分布  <meta name="viewport" ...
bootstrap table footerFormatter用法统计列求和 sum、average等
其实上一篇blog里已经贴了代码,简单解释一下吧: 1.showFooter: true,很重要,设置footer显示: $(cur_table).bootstrapTable({ url: '/et ...
JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
Bootstrap table的基础用法
一.官方文档 Bootstrap 中文网:http://www.bootcss.com/ Bootstrap Table 中文网 : http://bootstrap-table.wenzhixin. ...
ABP+AdminLTE+Bootstrap Table权限管理系统第二节--在ABP的基础做数据库脚本处理
返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期第一点,上一篇文章中我们讲到codefirst中一些问题包括如图,codefirst在每次执行命令的时候会生成新的 ...
Bootstrap fileinput：文件上传插件的基础用法
官网地址:http://plugins.krajee.com/ 官网提供的样例:http://plugins.krajee.com/file-input/demo 基础用法一导入核心CSS及JS文件 ...
BootStrap Table超好用的表格组件基础入门
右侧导航条有目录哟,看着更方便快速入门表格构建 API简单介绍主要研究功能介绍快速入门最好的资源官方文档官方文档地址****https://bootstrap-table.com/docs ...
bootstrap table教程--使用入门基本用法
笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...
JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

随机推荐

springmvc配置一：ajax请求防止返回中文乱码配置说明
Spring3.0 MVC @ResponseBody 的作用是把返回值直接写到HTTP response body里. Spring使用AnnotationMethodHandlerAdapter的 ...
Flask-SQLAlchemy配置
下面是 Flask-SQLAlchemy 中存在的配置值.Flask-SQLAlchemy 从您的 Flask 主配置中加载这些值. 注意其中的一些在引擎创建后不能修改,所以确保尽早配置且不在运行时修 ...
poj2828 Buy Tickets——倒序处理
题目:http://poj.org/problem?id=2828 这题可以倒序来做,因为越靠后的人实际上优先级越高: 用0和1表示这个位置上是否已经有人,0表示有,1表示没有,这样树状数组维护前缀和 ...
HDU acm1028 整数划分递归问题（递推）
我们用递归+记忆化的方法来解决普通整数划分问题:定义 f(n,m)为将整数n划分为一系列整数之和,其中加数最大不超过m. 得到下面的递推关系式: 当n==1 || m==1 只有一种划分,即 1 或 ...
Invalid content was found starting with element 'mvc:exclude-mapping'.
问题?Invalid content was found starting with element 'mvc:exclude-mapping'. 这是springmvc中显著的错误,在配置拦截器的时 ...
CF-798B
B. Mike and strings time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
3.1-3.3 HBase Shell创建表
一.HBase Shell创建表 1.HBASE shell命令 ## hbase(main):001:0> create_namespace 'ns1' //创建命名空间:ns1 hbase( ...
PHP文件操作的经典案例
<?php /* 遍历目录函数,只读取目录的最外层的内容 */ function readDirectory($path){ $handle = opendir($path); while(($ ...
洛谷1303 A*B Problem 解题报告
洛谷1303 A*B Problem 本题地址:http://www.luogu.org/problem/show?pid=1303 题目描述求两数的积. 输入输出格式输入格式: 两个数输出格式 ...
【Linux】Devops的一些运维工具
一.Devops简介从手工编译.上传服务器文件.执行命令.启动停止服务器.发现BUG再重复一遍流程,软件开发的重复劳动越来越多,在Devops概念之前,全部要靠人工手动完成,也看到了很多运维人员半夜 ...

bootstrap-table 基础用法

bootstrap-table 基础用法的更多相关文章

随机推荐

热门专题