Bootstrap Table 的用法
记录下 Bootstrap Table 的用法，备忘。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>WebDemo</title> <!--1. Jquery组件引用--> <script type="text/javascript" src="../Content/jquery/jquery-3.3.1.min.js"></script> <!--2. bootstrap组件引用 --> <script type="text/javascript" src="../Content/bootstrap/bootstrap.js"></script> <link rel="stylesheet" href="../Content/bootstrap/bootstrap.css" /> <!--3. bootstrap table组件以及中文包的引用--> <link rel="stylesheet" href="../Content/bootstrap/bootstrap-table.css"> <script type="text/javascript" src="../Content/bootstrap/bootstrap-table.js"></script> <script type="text/javascript" src="../Content/bootstrap/bootstrap-table-zh-CN.js"></script> <!--4. layer组件的引用--> <script type="text/javascript" src="../Content/layer/layer.js"></script> <style type="text/css"> /*bootstrap-table选中行颜色*/ .table tbody .selected td { background-color: #EEE8AA; } /*表头颜色*/ /*thead { background-color: #333333; color: #fdfdfd; }*/ /*隔行变色*/ /*table tbody tr:nth-child(even) { background-color: #b6ff00; }*/ /*表头固定 todo*/ </style> </head> <body> <div class="panel-body"> <div id="toolbar"> <div class="btn-group" style="float:left"> <button id="btn_add" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增 </button> <button id="btn_edit" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 修改 </button> <button id="btn_delete" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除 </button> </div> <!--https://blog.csdn.net/yaomingyang/article/details/80346678--> <form class="form-inline" style="float:left;margin-left:5px"> <div class="form-group"> <div class="input-group"> <div class="input-group-addon">院系</div> <input type="text" class="form-control" name="searchTexts" id="txt_search_department" placeholder="请输入关键字..."> </div> </div> <button id="btn_search" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查询 </button> </form> </div> <div class="table-responsive"> <!--自适应水平滚动条--> <table id="table"> </table> </div> </div> <script type="text/javascript"> window.onload = function () { getStudentQueryByPage(); $("#btn_search").click(function () { getStudentQueryByPage(); }) } function getStudentQueryByPage() { $('#table').bootstrapTable('destroy'); $('#table').bootstrapTable({ method: 'post', //请求方式 contentType: "application/x-www-form-urlencoded", url: "../Controllers/IndexController.ashx?action=getStudentQueryByPage", //要请求数据的文件路径 // height: return $(window).height(), //高度调整 // searchTimeOut: '5000', // showHeader:true, striped: true, //是否显示行间隔色 pageNumber: 1, //初始化加载第一页，默认第一页 pagination: true, //是否分页 sidePagination: 'server', //指定服务器端分页 pageSize: 2, //单页记录数 pageList: [2, 5, 10], //分页步进值 [10, 20, 50] showColumns: true, //是否显示所有的列 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 sortable: 'true', //是否启用排序 sortName: 'id', sortOrder: 'desc', //排序方式 toolbar: '#toolbar', //工具按钮用哪个容器 cache: true, //是否使用缓存，默认是true //search: true, //搜索框 //searchOnEnterKey: true, //按回车触发搜索方法 showRefresh: true, //刷新按钮 showToggle: true, //详细视图和列表视图的切换按钮 //cardView:false, //fixedColumns: true, //fixedNumber:1, //固定列数 queryParamsType: 'undefined', //查询参数组织方式 queryParams: queryParams, //请求服务器时所传的参数 responseHandler: function (res) { return res; }, //单机和双击触发的事件，当双击就会获取row，row就是该整行的内容，其中"row.RealName"中"RealName"是data-field定义的字段. onDblClickRow: function (row, $element, field) { layer.msg("选中行用户的真实姓名:" + row.name); }, onClickRow: function (row, $element, field) { //var i = $element.data("index");//可通过此参数获取当前行号 //layer.msg(i + "，" + row.name + "，" + field); var r = row[field]; //获取当前选中单元格内容 //判断当前单元格是否为空 if (r.length != 0) { layer.msg(r); } }, //获取选中行的数据 //onCheck: function (row) { // layer.msg("您选中的行的姓名为" + row.name + "，您选中的行的院系为" + row.department); //}, singleSelect: true, //单选checkbox，只能选中一行 columns: [ { checkbox: true }, { title: '编号', align: 'center',//居中 //valign: 'bottom', //手动实现编号 或者通过row_number实现服务器编号 formatter: function (value, row, index) { var pageNumber = $('#table').bootstrapTable("getOptions").pageNumber; var pageSize = $('#table').bootstrapTable("getOptions").pageSize; return pageSize * (pageNumber - 1) + index + 1; } }, { field: 'id', title: '学号', align: 'center', sortable: true }, { field: 'name', title: '姓名', sortable: true, align: 'center', formatter: function (value, row, index) { return "<span style='color:#FF0000'>" + value + "</span>"; //return "<img onclick=\"FindPersonMeg('" + proCode + "','" + projectName + "')\" title='点击查看责任人信息' src='/Themes/Images/16/application_form_magnify.png' style='vertical-align: middle;cursor: pointer;' alt='' />"; //return "<span style='color:#FF0000' onclick='TestLayer()'>" + value + "</span>"; } }, { field: 'sex', title: '性别', align: 'center', sortable: true }, { field: 'birth', title: '出生日期', align: 'center', sortable: true }, { field: 'department', title: '院系', align: 'center', sortable: true }, { field: 'address', title: '家庭地址', align: 'center' }, { title: '详细信息', align: 'center',//居中 formatter: function (value, row, index) { // "<img title='点击查看详细信息' src='Content/favicon.ico' style='vertical-align: middle;cursor: pointer;' alt='' />"; var detail = "<button type=\"button\" onclick=\"detailMsg('" + row.id + "','"+row.name+"')\" >" + "<span class=\"glyphicon glyphicon-search\">查看详细信息</span> </button>"; return detail; } } ] }); } function queryParams(params) { //方式一 //params.project = $("#project").val(); //params.start = $("#start").val(); //params.end = $("#end").val(); //params.alarmType = $("#alarm-type").val(); params.txt_search_department = $("#txt_search_department").val(); return params; //方式二 //return { // pageSize: params.limit, // pageNumber: params.pageNumber //} } // 获取选中行的数据 $("#btn_edit").click(function (e) { //var allTableData = $('#table').bootstrapTable('getData');//获取表格的所有内容行 var getSelectionsRows = $('#table').bootstrapTable("getSelections"); //获取suoyou选中行的内容 var name = getSelectionsRows[0].name; var sex = getSelectionsRows[0].sex; var birth = getSelectionsRows[0].birth; var department = getSelectionsRows[0].department; var address = getSelectionsRows[0].address; if (getSelectionsRows.length == 1) { //layer.open({ // type: 2, // iframe层 // title: '编辑', // shadeClose: true, // shade: 0.8, // area: ['800px', '600px'], // content: ['./Test3Form.aspx?Account=' + escape(Account) + "&RealName=" + escape(RealName) // + "&Gender=" + escape(Gender) + "&Mobile=" + escape(Mobile) + "&Email=" + escape(Email) // + "&LastVisit=" + escape(LastVisit) + "&CreateDate=" + escape(CreateDate), 'no'] //}); alert("姓名：" + name + ", 性别：" + sex + ", 院系：" + department); } else { alert("请只选中一行！！！"); } }); //获取详细信息 function detailMsg(id,name) { //var id = document.getElementById("id").value; //var url = "/Controllers/IndexController.ashx" //var data = "action=getDetail&name=" + name + "&id=" + id; //$.ajax({ // type: "get", // url: url, // data: data, // dataType: "text", // success: function (msg) { // //return msg; // alert("姓名：" + msg); // }, // error: function () { // Console.log("请求失败" + data); // }, // //beforSend: function () { // // // 禁用按钮防止重复提交 // // $("#submit").attr({ disabled: "disabled" }); // //} //}); alert(name); } </script> </body> </html>
如果初始化的参数 sidePagination: "server" 设置为在服务端分页，那么我们的返回值必须告诉前端总记录的条数和当前页的记录数，然后前端才知道如何分页。并且最重要的一点，这两个参数的名字必须为total和rows。
