又好久不写博客，最近项目都是用的bootstrap的样式，不出意外，应该是要在bootstrap的道路上越走越远了，所以下定决心，把bootstrap的插件都好好学学。
昨天写了boostrap-table的范例，拿出来给大家分享一下，如果有不对的地方，还请大家指正以及多多包含~
先上效果图：
1.进入页面，根据指定的URL加载数据(json格式)
2.加载成功，根据$table.bootstrapTable({options})显示表格样式。
感觉还是挺漂亮的哈，OK，下面贴代码解释功能。
开始之前，当然要引用js啦
1 <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> 2 <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" /> 3 <link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /> 4 <script src="~/Scripts/jquery-1.9.1.js"></script> 5 <script src="~/Scripts/bootstrap.min.js"></script> 6 <script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script>
html代码，一是指定table要使用的工具栏，而是写一个空的table
1 <div class="row"> 2 <div class="col-md-12"> 3 <div class="btn-group" id="toobar" role="group" aria-label="..."> 4 <button type="button" class="btn btn-default"> 5 <span class="glyphicon glyphicon-plus"></span>新增 6 </button> 7 <button type="button" class="btn btn-default"> 8 <span class="glyphicon glyphicon-edit"></span>修改 9 </button> 10 <button type="button" class="btn btn-default"> 11 <span class="glyphicon glyphicon-remove"></span>删除 12 </button> 13 </div> 14 <table id="myTable"></table> 15 </div> 16 </div>
js代码，使用("#table").bootstraptable({options})填充table
1 $("#myTable").bootstrapTable({ 2 url: '/BootstrapTable/GetTestData', 3 method: 'get', 4 toolbar: '#toobar',//工具列 5 striped: true,//隔行换色 6 cache: false,//禁用缓存 7 pagination: true,//启动分页 8 sidePagination: 'client',//分页方式 9 pageNumber: 1,//初始化table时显示的页码 10 pageSize: 10,//每页条目 11 showFooter: false,//是否显示列脚 12 showPaginationSwitch: true,//是否显示 数据条数选择框 13 sortable: false,//排序 14 search: true,//启用搜索 15 showColumns: true,//是否显示 内容列下拉框 16 showRefresh: true,//显示刷新按钮 17 idField: 'SystemCode',//key值栏位 18 clickToSelect: true,//点击选中checkbox 19 singleSelect: true,//启用单行选中 20 columns: [{ 21 checkbox: true 22 }, 23 { 24 field: 'SystemCode', 25 title: '系统代码', 26 titleTooltip: 'young for you' 27 }, 28 { 29 field: 'SystemDesc', 30 title: '系统名称' 31 }, 32 { 33 field: 'Isvalid', 34 title: '是否有效' 35 }, 36 { 37 field: 'UUser', 38 title: '更新人' 39 }, 40 { 41 field: 'UDate', 42 title: '更新时间' 43 }], 44 onClickCell: function (field, value, row, $element) { 45 //alert(row.SystemDesc); 46 } 47 });
其中URL是table 数据源地址，如果table启动了分页功能，后台取数据的方法要加上limit、offset两个int类型的参数，这里把后台代码也贴一下。
1 public JsonResult GetTestData(int limit, int offset) 2 { 3 BugzillaModelContainer db = new BugzillaModelContainer(); 4 List<B_SystemInfo> systemInfo = db.B_SystemInfo.ToList(); 5 for (int i = 0; i < 20; i++) 6 { 7 B_SystemInfo tempSystem = new B_SystemInfo(); 8 tempSystem.SystemCode = (i + 1).ToString(); 9 tempSystem.SystemDesc = "测试系统" + (i + 1).ToString(); 10 tempSystem.Isvalid = "Y"; 11 tempSystem.UUser = "result_for" + (i + 1).ToString(); 12 tempSystem.UDate = System.DateTime.Now.ToShortDateString(); 13 systemInfo.Add(tempSystem); 14 } 15 16 var total = systemInfo.Count(); 17 var rows = systemInfo.Skip(offset).Take(limit).ToList(); 18 return Json(systemInfo, JsonRequestBehavior.AllowGet); 19 }
offset表示从多少条数据开始取，limit表示取多少条数据。
客户端搜索只要设置search=true即可。
服务端搜索，需要设置参数。
首先设置
("#table").bootstraptable({queryParams: oTableInit.queryParams}),//传递参数（*）
然后获取查询的参数
1 //得到查询的参数 2 oTableInit.queryParams = function (params) { 3 var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 4 limit: params.limit, //页面大小 5 offset: params.offset, //页码 6 systemcode: $("#systemcode").val(), 7 }; 8 return temp; 9 };
通过button事件刷新table，重新获取数据源，即可。
1 $("#btnQuery").click(function () { 2 $table.bootstrapTable('refresh'); 3 });
最后贴上全部html代码~
1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <title>Index</title> 11 <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> 12 <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" /> 13 <link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /> 14 <script src="~/Scripts/jquery-1.9.1.js"></script> 15 <script src="~/Scripts/bootstrap.min.js"></script> 16 <script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script> 17 </head> 18 <body> 19 <div class="container"> 20 <div class="row"> 21 <div class="col-md-8"> 22 23 </div> 24 </div> 25 <div class="row"> 26 <div class="col-md-12"> 27 <div class="btn-group" id="toobar" role="group" aria-label="..."> 28 <button type="button" class="btn btn-default"> 29 <span class="glyphicon glyphicon-plus"></span>新增 30 </button> 31 <button type="button" class="btn btn-default"> 32 <span class="glyphicon glyphicon-edit"></span>修改 33 </button> 34 <button type="button" class="btn btn-default"> 35 <span class="glyphicon glyphicon-remove"></span>删除 36 </button> 37 </div> 38 <table id="myTable"></table> 39 </div> 40 </div> 41 </div> 42 <script> 43 44 $(function () { 45 var itable = TableInit(); 46 itable.Init(); 47 }); 48 49 var TableInit = function () { 50 var myTableInit = new Object(); 51 52 myTableInit.Init = function () { 53 $("#myTable").bootstrapTable({ 54 url: '/BootstrapTable/GetTestData', 55 method: 'get', 56 toolbar: '#toobar',//工具列 57 striped: true,//隔行换色 58 cache: false,//禁用缓存 59 pagination: true,//启动分页 60 sidePagination: 'client',//分页方式 61 pageNumber: 1,//初始化table时显示的页码 62 pageSize: 10,//每页条目 63 showFooter: false,//是否显示列脚 64 showPaginationSwitch: true,//是否显示 数据条数选择框 65 sortable: false,//排序 66 search: true,//启用搜索 67 showColumns: true,//是否显示 内容列下拉框 68 showRefresh: true,//显示刷新按钮 69 idField: 'SystemCode',//key值栏位 70 clickToSelect: true,//点击选中checkbox 71 singleSelect: true,//启用单行选中 72 columns: [{ 73 checkbox: true 74 }, 75 { 76 field: 'SystemCode', 77 title: '系统代码', 78 titleTooltip: 'young for you' 79 }, 80 { 81 field: 'SystemDesc', 82 title: '系统名称' 83 }, 84 { 85 field: 'Isvalid', 86 title: '是否有效' 87 }, 88 { 89 field: 'UUser', 90 title: '更新人' 91 }, 92 { 93 field: 'UDate', 94 title: '更新时间' 95 }], 96 onClickCell: function (field, value, row, $element) { 97 //alert(row.SystemDesc); 98 } 99 }); 100 }; 101 102 return myTableInit; 103 }; 104 </script> 105 </body> 106 </html>
OK，今天就写到这儿了~下篇应该会写boostrap-table的行内编辑等内容~