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 ,遇到不少 ...

随机推荐

Android Developers - Training
Recently I've been contemplating to create a new App with the true "Android Design",new An ...
「SDFZ听课笔记」二分图&&网络流
二分图? 不存在奇环(长度为奇数的环)的图节点能黑白染色,使得不存在同色图相连的图这两个定义是等价哒. 直观而言,就是这样的图: 二分图有一些神奇的性质,让一些在一般图上复杂度飞天的问题可以在正常 ...
如何应用 AutoIt 修改本机的防火墙配置？（开启，关闭防火墙，添加程序信任到防火墙）
以前,公司的实施人员配置好项目之后,不同的机器之间经常性的无法建立链接,后来发现是防火墙的设置.虽然是个小问题,但是经常性的忘记这个配置. 现在,我决定把对防火墙的设置,加入到我给实施人员的配置工具中 ...
c和c++字符串分割
1.c++版本,第一个参数为待分割的字符串 , 第二个参数为分割字符串 std::vector<std::string> split(const std::string& s, c ...
bzoj3832
拓扑排序+set 如果我们直接记录所有路径是不行的,那么我们要降低路径的数量,于是我们把最短路径转换到边上,这样我们就只有m条路径了. 先计算出f[i]和g[i]表示正反拓扑最长链,把所有g插到set ...
3.11-3.14 Hive 企业使用优化2
一.查看HQL执行计划explain 1.explain hive在执行的时候会把所对应的SQL语句都会转换成mapreduce代码执行,但是具体的MR执行信息我们怎样才能看出来呢? 这里就用到了ex ...
爬虫代码实现四：采用Hbase存储爬虫数据(1)
3.Hbase表设计: 1.窄表:列少行多,表中的每一行尽可能保持唯一. 2.宽表:列多行少,通过时间戳版本来进行区分取值. 窄表:比如说,这个表,rowkey由userid+时间+bbsid假设bb ...
CSS小技巧收藏
居中对齐很多时候我们需要把一个元素在其父级容器里水平.垂直居中对齐.以下我列出了常用的几种方法: 1.在知道子元素宽度与高度的情况下进行居中,采用位置定位:absolute + margin .pa ...
微信API接口文档
传送门
Unity3D教程：无缝地形场景切换的解决方法
http://www.unitymanual.com/6718.html 当我们开发一个大型项目的时候-会遇到这样的问题(地形场景的切换)这个只是字面意思-并不是重场景1的100 100 100坐标 ...

bootstrap-table 基础用法

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

随机推荐

热门专题