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

随机推荐

java推荐书籍及下载
前言一直有这么个想法,列一下我个人认为在学习和使用Java过程中可以推荐一读的书籍,给初学者或者想深入的朋友一些建议,帮助成长.推荐的的都是我自己读过,也会推荐一些朋友读过并且口碑不错的书籍.以下的 ...
[转载]Android版本更新与JSON解析
/* *注意,这篇文章转载自: *http://blog.csdn.net/xjanker2/article/details/6303937 *一切权利归作者所有,这里只是转载,曾经用到过这篇文 ...
zabbix snmp、jmx配置使用
SNMP: snmp是很古老的监控,我萌几乎可以在所有设备上看到它的身影 [root@linux-node1 ~]# yum install net-snmp net-snmp-libs net-sn ...
如何在ubuntu下使用windows下的程序（eg: .exe）
为了在ubutu下安装百度云管家,上网查了下如何在ubuntu 下安装.exe文件,其中遇到一些问题记录如下: 使用的命令: 开始时直接使用的sudo apt-get install wine 在运行 ...
免证书发布ipa文件真机测试
首先设备得越狱众所周知,在Xcode上开发的程序只能在模拟器中运行,如果要放到真机上则要花费99美金购买开发者证书iDP.这严重阻碍了我等草根开发者探索的脚步.写个小程序,同学间分享一下这个小小的愿 ...
多叉树结构：JSON数据解析（二）
多叉树结构:JSON数据解析(二) 在上篇文章中提到了JSON数据解析的基本方法,但是方法效率太低,这里接着上篇文章写写如何利用多叉树结构,定义对象,实现JSON数据字段快速随机访问. JSON数据通 ...
QDUOJ 生化危机邻接表存图+BFS
生化危机发布时间: 2015年10月10日 18:05 时间限制: 1000ms 内存限制: 256M 描述 X博士想造福人类, 研发一种可以再生肢体的药物, 可是很不幸......研究失败 ...
模板 - 数据结构 - ST表 + 二维ST表
区间最大值,$O(nlogn)$ 预处理,$O(1)$ 查询,不能动态修改.在查询次数M显著大于元素数量N的时候看得出差距. 令 $f[i][j]$ 表示 $[i,i+2^j-1]$ 的最大值. 显然 ...
jqgrid 不能选中行，每次点击单元格都自动选中第一行
最使用jqgrid表格插件写了一个功能.功能完成后显示一切正常,但是经过测试后发现,每次点击数据行时,都会自动选中第一行,无法选中其他数据行.经过一番探索,最终发现是加载进来的字段没有主键导致了这个问 ...
HDU2489【状压枚举】
题意: 给你n个点的图,然后让你在图里挑m个点,达到sumedge/sumnode最小思路: 由于数据范围小,状压枚举符合m个点的状态,我是用vactor存了结点位置,也记录了结点的sum值,然后跑 ...

bootstrap-table 基础用法

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

随机推荐

热门专题