Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件，功能比较完备，能够实现数据异步获取，编辑，排序等一系列功能。
官网https://bootstrap-table.com
中文https://www.bootstrap-table.com.cn
前端代码
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>BootStrap Table使用</title> @*1、Jquery组件引用*@ <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> @*2、bootstrap组件引用*@ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"5></script> @*3、bootstrap table组件以及中文包的引用*@ <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css"> <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script> @*4、页面Js文件的引用*@ <script src="~/Scripts/table/Home/Index.js"></script> </head> <body> <div class="panel-body" style="padding-bottom:0px;"> <div class="panel panel-default"> <div class="panel-heading">查询条件</div> <div class="panel-body"> <form id="formSearch" class="form-horizontal"> <div class="form-group" style="margin-top:15px"> <label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label> <div class="col-sm-3"> <input type="text" class="form-control" id="txt_search_departmentname"> </div> <label class="control-label col-sm-1" for="txt_search_statu">状态</label> <div class="col-sm-3"> <input type="text" class="form-control" id="txt_search_statu"> </div> <div class="col-sm-4" style="text-align:left;"> <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button> </div> </div> </form> </div> </div> <div id="toolbar" class="btn-group"> <button id="btn_add" type="button" class="btn btn-success"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <button id="btn_edit" type="button" class="btn btn-primary"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-danger"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </div> <table id="tb_departments"></table> </div> </body> </html>
js代码
$(function () { //1.初始化Table var oTable = new TableInit(); oTable.Init(); //2.初始化Button的点击事件 var oButtonInit = new ButtonInit(); oButtonInit.Init(); }); var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#tb_departments').bootstrapTable({ url: '/Admin/news/getlist1', //请求后台的URL（*） method: 'get', //请求方式（*） dataType: 'json', toolbar: '#toolbar', //工具按钮用哪个容器 theadClasses:'.thead-light', striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） showPaginationSwitch: false, //是否显示分页数 sortable: false, //是否启用排序 sortName: "title", //是否启用排序 sortOrder: "desc", //排序方式 queryParams: oTableInit.queryParams,//传递参数（*） queryParamsType: '', //如果要在oTableInit.queryParams方法获取pageNumber和pageSize的值，需要将此值设置为空字符串（*） sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） pageNumber:1, //初始化加载第一页，默认第一页 pageSize: 10, //每页的记录行数（*） pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 strictSearch: true, showColumns: true, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 singleSelect: false, //是否单选模式 height: $(window).height() - 200, //table总高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 uniqueId: "ID", //每一行的唯一标识，一般为主键列 showToggle: false, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 paginationPreText: "上一页", paginationNextText: "下一页", columns: [{ checkbox: true }, { field: 'title', title: '新闻名称' }, { field: 'cons', title: '新闻内容' }, { field: 'pic', title: '新闻图片' }, { field: 'classID', title: '分类', align: 'center' }, { field: 'times', title: '时间' },] }); }; //得到查询的参数 oTableInit.queryParams = function (params) { // 特别说明： //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 // 如果queryParamsType=limit,params包含{limit, offset, search, sort, order} // 如果queryParamsType!=limit,params包含{pageSize, pageNumber, searchText, sortName, sortOrder} var temp = { pageSize: params.pageSize, //页面大小 pageNumber: params.pageNumber, //页码 departmentname: $("#txt_search_departmentname").val(), statu: $("#txt_search_statu").val() }; return temp; }; return oTableInit; }; var ButtonInit = function () { var oInit = new Object(); var postdata = {}; oInit.Init = function () { $("#btn_add").click(function () { alert("add") }); $("#btn_edit").click(function () { var arrselections = $("#tb_departments").bootstrapTable('getSelections'); if (arrselections.length > 1) { alert('只能选择一行进行编辑'); return; } if (arrselections.length <= 0) { alert('请选择有效数据'); return; } alert("edit") //$("#myModalLabel").text("编辑"); //$("#txt_departmentname").val(arrselections[0].DEPARTMENT_NAME); //$("#txt_parentdepartment").val(arrselections[0].PARENT_ID); //$("#txt_departmentlevel").val(arrselections[0].DEPARTMENT_LEVEL); //$("#txt_statu").val(arrselections[0].STATUS); //postdata.DEPARTMENT_ID = arrselections[0].DEPARTMENT_ID; //$('#myModal').modal(); }); $("#btn_delete").click(function () { var arrselections = $("#tb_departments").bootstrapTable('getSelections'); if (arrselections.length <= 0) { alert('请选择有效数据'); return; } Ewin.confirm({ message: "确认要删除选择的数据吗？" }).on(function (e) { if (!e) { return; } $.ajax({ type: "post", url: "/Home/Delete", data: { "": JSON.stringify(arrselections) }, success: function (data, status) { if (status == "success") { toastr.success('提交数据成功'); $("#tb_departments").bootstrapTable('refresh'); } }, error: function () { toastr.error('Error'); }, complete: function () { } }); }); }); $("#btn_submit").click(function () { //postdata.DEPARTMENT_NAME = $("#txt_departmentname").val(); //postdata.PARENT_ID = $("#txt_parentdepartment").val(); //postdata.DEPARTMENT_LEVEL = $("#txt_departmentlevel").val(); //postdata.STATUS = $("#txt_statu").val(); //$.ajax({ // type: "post", // url: "/Home/GetEdit", // data: { "": JSON.stringify(postdata) }, // success: function (data, status) { // if (status == "success") { // toastr.success('提交数据成功'); // $("#tb_departments").bootstrapTable('refresh'); // } // }, // error: function () { // toastr.error('Error'); // }, // complete: function () { // } //}); }); $("#btn_query").click(function () { $("#tb_departments").bootstrapTable('refresh'); }); }; return oInit; };
接口代码
public JsonResult getlist1(int pageSize, int pageNumber, string departmentname, string statu) { var total = 0; var list=bllNews.FindPageList(pageNumber, pageSize, out total, x=>x.passed=1, false, x => x.ID).ToList(); return Json(new { total = total, rows = list }, JsonRequestBehavior.AllowGet); }
还可以实现无限极树形网格，需要用到插件jquery-treegrid
官方演示https://www.bootstrap-table.com.cn/examples/extensions/treegrid/