Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件，功能比较完备，能够实现数据异步获取，编辑，排序等一系列功能。
官网https://bootstrap-table.com
中文https://www.bootstrap-table.com.cn

前端代码

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.     <meta name="viewport" content="width=device-width" />
  6.     <title>BootStrap Table使用</title>
  7.     @*1、Jquery组件引用*@
  8.     <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  9.  
  10.     @*2、bootstrap组件引用*@
  11.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  12.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  13.  
  14.     @*3、bootstrap table组件以及中文包的引用*@
  15.     <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
  16.     <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
  17.     <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
  18.     @*4、页面Js文件的引用*@
  19.     <script src="~/Scripts/table/Home/Index.js"></script>
  20. </head>
  21. <body>
  22.     <div class="panel-body" style="padding-bottom:0px;">
  23.         <div class="panel panel-default">
  24.             <div class="panel-heading">查询条件</div>
  25.             <div class="panel-body">
  26.                 <form id="formSearch" class="form-horizontal">
  27.                     <div class="form-group" style="margin-top:15px">
  28.                         <label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label>
  29.                         <div class="col-sm-3">
  30.                             <input type="text" class="form-control" id="txt_search_departmentname">
  31.                         </div>
  32.                         <label class="control-label col-sm-1" for="txt_search_statu">状态</label>
  33.                         <div class="col-sm-3">
  34.                             <input type="text" class="form-control" id="txt_search_statu">
  35.                         </div>
  36.                         <div class="col-sm-4" style="text-align:left;">
  37.                             <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
  38.                         </div>
  39.                     </div>
  40.                 </form>
  41.             </div>
  42.         </div>
  43.  
  44.         <div id="toolbar" class="btn-group">
  45.             <button id="btn_add" type="button" class="btn btn-success">
  46.                 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
  47.             </button>
  48.             <button id="btn_edit" type="button" class="btn btn-primary">
  49.                 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
  50.             </button>
  51.             <button id="btn_delete" type="button" class="btn btn-danger">
  52.                 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
  53.             </button>
  54.         </div>
  55.         <table id="tb_departments"></table>
  56.     </div>
  57. </body>
  58. </html>

js代码

  1. $(function () {
  2.  
  3.     //1.初始化Table
  4.     var oTable = new TableInit();
  5.     oTable.Init();
  6.  
  7.     //2.初始化Button的点击事件
  8.     var oButtonInit = new ButtonInit();
  9.     oButtonInit.Init();
  10.  
  11. });
  12.  
  13. var TableInit = function () {
  14.     var oTableInit = new Object();
  15.     //初始化Table
  16.     oTableInit.Init = function () {
  17.         $('#tb_departments').bootstrapTable({
  18.             url: '/Admin/news/getlist1',         //请求后台的URL（*）
  19.             method: 'get',                      //请求方式（*）
  20.             dataType: 'json',
  21.             toolbar: '#toolbar',                //工具按钮用哪个容器
  22.             theadClasses:'.thead-light',
  23.             striped: true,                      //是否显示行间隔色
  24.             cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
  25.             pagination: true,                   //是否显示分页（*）
  26.             showPaginationSwitch: false,        //是否显示分页数
  27.             sortable: false,                     //是否启用排序
  28.             sortName: "title",                     //是否启用排序
  29.             sortOrder: "desc",                   //排序方式
  30.             queryParams: oTableInit.queryParams,//传递参数（*）
  31.             queryParamsType: '',                //如果要在oTableInit.queryParams方法获取pageNumber和pageSize的值，需要将此值设置为空字符串（*）
  32.             sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
  33.             pageNumber:1,                       //初始化加载第一页，默认第一页
  34.             pageSize: 10,                       //每页的记录行数（*）
  35.             pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
  36.             search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
  37.             strictSearch: true,
  38.             showColumns: true,                  //是否显示所有的列
  39.             showRefresh: true,                  //是否显示刷新按钮
  40.             minimumCountColumns: 2,             //最少允许的列数
  41.             clickToSelect: true,                //是否启用点击选中行
  42.             singleSelect: false,                 //是否单选模式
  43.             height: $(window).height() - 200,   //table总高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
  44.             uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
  45.             showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
  46.             cardView: false,                    //是否显示详细视图
  47.             detailView: false,                   //是否显示父子表
  48.             paginationPreText: "上一页",
  49.             paginationNextText: "下一页",
  50.             columns: [{
  51.                 checkbox: true
  52.             }, {
  53.                 field: 'title',
  54.                 title: '新闻名称'
  55.             }, {
  56.                 field: 'cons',
  57.                 title: '新闻内容'
  58.             }, {
  59.                 field: 'pic',
  60.                 title: '新闻图片'
  61.             }, {
  62.                 field: 'classID',
  63.                 title: '分类',
  64.                 align: 'center'
  65.             }, {
  66.                     field: 'times',
  67.                     title: '时间'
  68.                 },]
  69.         });
  70.     };
  71.  
  72.     //得到查询的参数
  73.     oTableInit.queryParams = function (params) {
  74.         // 特别说明：
  75.         //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
  76. 　　　　　// 如果queryParamsType=limit,params包含{limit, offset, search, sort, order}
  77. 　　　　　// 如果queryParamsType!=limit,params包含{pageSize, pageNumber, searchText, sortName, sortOrder}
  78.         var temp = {
  79.             pageSize: params.pageSize,   //页面大小
  80.             pageNumber: params.pageNumber,  //页码
  81.             departmentname: $("#txt_search_departmentname").val(),
  82.             statu: $("#txt_search_statu").val()
  83.         };
  84.         return temp;
  85.     };
  86.     return oTableInit;
  87. };
  88.  
  89. var ButtonInit = function () {
  90.     var oInit = new Object();
  91.     var postdata = {};
  92.  
  93.     oInit.Init = function () {
  94.         $("#btn_add").click(function () {
  95.             alert("add")
  96.         });
  97.  
  98.         $("#btn_edit").click(function () {
  99.             var arrselections = $("#tb_departments").bootstrapTable('getSelections');
  100.             if (arrselections.length > 1) {
  101.                 alert('只能选择一行进行编辑');
  102.  
  103.                 return;
  104.             }
  105.             if (arrselections.length <= 0) {
  106.                 alert('请选择有效数据');
  107.                 return;
  108.             }
  109.             alert("edit")
  110.             //$("#myModalLabel").text("编辑");
  111.             //$("#txt_departmentname").val(arrselections[0].DEPARTMENT_NAME);
  112.             //$("#txt_parentdepartment").val(arrselections[0].PARENT_ID);
  113.             //$("#txt_departmentlevel").val(arrselections[0].DEPARTMENT_LEVEL);
  114.             //$("#txt_statu").val(arrselections[0].STATUS);
  115.  
  116.             //postdata.DEPARTMENT_ID = arrselections[0].DEPARTMENT_ID;
  117.             //$('#myModal').modal();
  118.         });
  119.  
  120.         $("#btn_delete").click(function () {
  121.             var arrselections = $("#tb_departments").bootstrapTable('getSelections');
  122.             if (arrselections.length <= 0) {
  123.                 alert('请选择有效数据');
  124.                 return;
  125.             }
  126.  
  127.             Ewin.confirm({ message: "确认要删除选择的数据吗？" }).on(function (e) {
  128.                 if (!e) {
  129.                     return;
  130.                 }
  131.                 $.ajax({
  132.                     type: "post",
  133.                     url: "/Home/Delete",
  134.                     data: { "": JSON.stringify(arrselections) },
  135.                     success: function (data, status) {
  136.                         if (status == "success") {
  137.                             toastr.success('提交数据成功');
  138.                             $("#tb_departments").bootstrapTable('refresh');
  139.                         }
  140.                     },
  141.                     error: function () {
  142.                         toastr.error('Error');
  143.                     },
  144.                     complete: function () {
  145.  
  146.                     }
  147.  
  148.                 });
  149.             });
  150.         });
  151.  
  152.         $("#btn_submit").click(function () {
  153.             //postdata.DEPARTMENT_NAME = $("#txt_departmentname").val();
  154.             //postdata.PARENT_ID = $("#txt_parentdepartment").val();
  155.             //postdata.DEPARTMENT_LEVEL = $("#txt_departmentlevel").val();
  156.             //postdata.STATUS = $("#txt_statu").val();
  157.             //$.ajax({
  158.             //    type: "post",
  159.             //    url: "/Home/GetEdit",
  160.             //    data: { "": JSON.stringify(postdata) },
  161.             //    success: function (data, status) {
  162.             //        if (status == "success") {
  163.             //            toastr.success('提交数据成功');
  164.             //            $("#tb_departments").bootstrapTable('refresh');
  165.             //        }
  166.             //    },
  167.             //    error: function () {
  168.             //        toastr.error('Error');
  169.             //    },
  170.             //    complete: function () {
  171.  
  172.             //    }
  173.  
  174.             //});
  175.         });
  176.  
  177.         $("#btn_query").click(function () {
  178.             $("#tb_departments").bootstrapTable('refresh');
  179.         });
  180.     };
  181.  
  182.     return oInit;
  183. };

接口代码

  1. public JsonResult getlist1(int pageSize, int pageNumber, string departmentname, string statu)
  2.         {
  3.  
  4.             var total = ;
  5.             var list=bllNews.FindPageList(pageNumber, pageSize, out total, x=>x.passed=, false, x => x.ID).ToList();
  6.  
  7.             return Json(new { total = total, rows = list }, JsonRequestBehavior.AllowGet);
  8.         }

还可以实现无限极树形网格，需要用到插件jquery-treegrid

官方演示https://www.bootstrap-table.com.cn/examples/extensions/treegrid/

表格插件BootStrap-Table使用教程的更多相关文章

  1. 好用的自适应表格插件-bootstrap table （支持固定表头）

    最近工作中找到了一款十分好用的表格插件,不但支持分页,样式,搜索,事件等等表格插件常有的功能外,最主要的就是他自带的冻结表头功能,让开发制作表格十分容易,不过网上大多都是英文文档,第一次使用会比较麻烦 ...

  2. 轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...

  3. 【转载】BootStrap表格组件bootstrap table详解

    (转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...

  4. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  5. Bootstrap表格组件 Bootstrap Table

    Bootstrap Table是Bootstrap的一个组件 Bootstrap Table Demo:http://issues.wenzhixin.net.cn/bootstrap-table/i ...

  6. [译]MVC网站教程（四）：MVC4网站中集成jqGrid表格插件（系列完结）

    目录 1.   介绍 2.   软件环境 3.   在运行示例代码之前(源代码 + 示例登陆帐号) 4.         jqGrid和AJAX 5.         GridSettings 6.  ...

  7. Bootstrap Table使用方法详解

    http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...

  8. 使用bootstrap table 插件固定表头时 表头与表格内容无法对齐

    在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况 表头对不齐效果: 解决的方法: ...

  9. [转]手把手教你--Bootstrap Table表格插件及数据导出(可导出Excel2003及Exce2007)

    原文地址:https://blog.csdn.net/javayoucome/article/details/80081771 1.介绍 Bootstrap Table介绍见官网:http://boo ...

  10. bootstrap table + spring + springmvc + mybatis 实现从前端到后端的表格分页

    1.使用准备 前台需要的资源文件,主要有Bootstrap3相关css.js以及bootstrap Table相关css.js: <-- 样式 --> <link rel=" ...

随机推荐

  1. HTTP之缓存是如何保持副本的新鲜的！

    缓存保持副本的新鲜 ========================摘自<HTTP权威指南>================================= 可能不是所有已缓存副本都与服 ...

  2. ng使用bootstrap

    1.在项目中使用命令 npm i bootstrap -s来创建bootstrap 2.创建完成之后在 angular.json中引入进去 "styles": [          ...

  3. Flink task之间的数据交换

    Flink中的数据交换是围绕着下面的原则设计的: 1.数据交换的控制流(即,为了启动交换而传递的消息)是由接收者发起的,就像原始的MapReduce一样. 2.用于数据交换的数据流,即通过电缆的实际数 ...

  4. Centos 7.5 安装JDK

    #wget --no-cookies --no-check-certificate --header "Cookie: gpw_e24=http%3A%2F%2Fwww.oracle.com ...

  5. TF-IDF & CNN

    TF-IDF----------------------------------------------------------------认为一个单词出现的文本频率越小,它区别不同类别的能力就越大, ...

  6. HUT 排序训练赛 F - 水果

    Problem's Link Mean: 略. analyse: 使用结构体排序. 首先,定义一个结构体,用来存放输入的数据,然后就是输入,注意:这儿有一个小细节,输入数字,然后紧跟着输入字符串,这时 ...

  7. 【转】.Net程序员学习Linux最简单的方法

    有很多关于Linux的书籍.博客.大多数都会比较“粗暴“的将一大堆的命令塞给读者,从而使很多.NET程序员望而却步.未入其门就路过了. 所以我设想用一种更为平滑的学习方式, 就是在学习命令时,先用纯语 ...

  8. Kafka学习笔记之K8S内filebeat传输到kafka报错带解决方案

    0x00 概述 filebeat非常轻量级,正常情况下占用的资源几乎都能忽略不计,但是部署后发现资源占用很大,所以怀疑是filebeat本身出了问题. 第一时间查看filebeat日志(默认路径/va ...

  9. 获取Ext Tree选中的节点

    获取Ext Tree选中的节点 text: '确认', handler: function () { //获取当前选中树的节点方法 var ck = rightsTree.getChecked(); ...

  10. 用友U9 基础使用文件所在目录

    元数据存主位置 D:\yonyou\UBFV50\U9.VOB.Product.Metadata 日志文件位置 D:\yonyou\U9V50\Portal\log UI热插支持文件 D:\yonyo ...