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

随机推荐

兼容html5新标签及媒体查询引入插件
 <!--[if lt IE 9]> <script src="htt ...
Linux 命令行 Tricks
区分文件和目录: ls -F ls -F -R:递归显示目录仅改变文件的修改时间,而不修改文件的内容: touch filename: 使用 file 命令查看文件类型: ASCII text di ...
React.js：template
ylbtech-React.js: 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部作者:ylbtech出处:http://ylbtec ...
Linux下的RTC子系统
转自:http://blog.csdn.net/weiqing1981127/article/details/8484268 实时时钟的作用主要是为操作系统提供一个可靠的时间,并在断电下,RTC时钟也 ...
.NET Framework4网站无法运行，提示找不到网络名，IO错误等解决办法
.NET Framework4网站无法运行,提示找不到网络名,IO错误等解决办法我的这个问题解决了,原因是用的远程桌面连接的服务器, 远程桌面中部署网站的文件夹,引用的竟然是连接此服务器的用户的电 ...
storyBoard学习教程一（页面跳转）
今天为了给伙伴作一篇storyBoard快速编程的教程,所以才写下了这篇博客. 有过storyBoard 编程经验的伙伴还是不要阅读本篇博客了,我自己认为,太基础太简单了,为了方便别人学习使用,我还是 ...
sql之索引
作用: - 约束 - 加速查找普通索引:加速查找 create index 索引名称 on 表名(列名,) drop index 索引名称 on 表名主键索引:加速查找+不能为空+不能重复 cr ...
技术胖Flutter第三季-14布局RowWidget的详细讲解
flutter总的地址: https://jspang.com/page/freeVideo.html 视频地址: https://www.bilibili.com/video/av35800108/ ...
Flutter实战视频-移动电商-08.Dio基础_伪造请求头获取数据
08.Dio基础_伪造请求头获取数据上节课代码清楚重新编写HomePage这个动态组件开始写请求的方法请求数据 .但是由于我们没加请求的头所以没有返回数据 451就是表示请求错错误创建请求 ...
Node.js学习（第四章：初见express）
Express框架是一款简洁而灵活的node.js web应用框架.前面我们自己手动创建服务器在Express中就是一个API的事情,这就使得我们更加注重业务的功能和开发效率上,不必纠结过多底层的事情 ...

bootstrap-table 基础用法

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

随机推荐

热门专题