當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

BootstrapTable（附源码） Bootstrap结合BootstrapTable的使用，分为两种模试显示列表。...

發布時間：2024/6/21 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 BootstrapTable（附源码） Bootstrap结合BootstrapTable的使用，分为两种模试显示列表。... 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

引用的css：

?<link href="@Url.Content("~/Css/bootstrap.min.css")" rel="stylesheet" type="text/css" />

? <link href="@Url.Content("~/Css/bootstrap-table.css")" rel="stylesheet" type="text/css" />

引用的JS：

常用方法：

刷新表格：$table.bootstrapTable('refresh');

獲取選擇的行：$table.bootstrapTable('getSelections');

1.服務端請求：即當數據量大，千百萬條數據的情況下，只獲取當頁條件下的數據。每點擊分頁或查詢都向服務端重新獲取分頁數據。

前端代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201

function?initTable() { ????????????var?queryUrl =?'@Url.Content("~/Welcome/QueryList")'?+?'?rnd='?+ +Math.random(); ????????????$table = $('#table-javascript').bootstrapTable({ ????????????????method:?'get', ????????????????url: queryUrl, ????????????????height: $(window).height() - 200, ????????????????striped:?true, ????????????????pagination:?true, ????????????????singleSelect:?false, ????????????????pageSize: 50, ????????????????pageList: [10, 50, 100, 200, 500], ????????????????search:?false,?//不顯示搜索框 ????????????????showColumns:?false,?//不顯示下拉框（選擇顯示的列） ????????????????sidePagination:?"server",?//服務端請求 ????????????????queryParams: queryParams, ????????????????minimunCountColumns: 2, ????????????????columns: [{ ????????????????????field:?'state', ????????????????????checkbox:?true ????????????????}, { ????????????????????field:?'Name', ????????????????????title:?'姓名', ????????????????????width: 100, ????????????????????align:?'center', ????????????????????valign:?'middle', ????????????????????sortable:?true, ????????????????????formatter: nameFormatter ????????????????}, { ????????????????????field:?'Gender', ????????????????????title:?'性別', ????????????????????width: 40, ????????????????????align:?'left', ????????????????????valign:?'top', ????????????????????sortable:?true, ????????????????????formatter: sexFormatter, ????????????????????sorter: priceSorter ????????????????}, { ????????????????????field:?'Birthday', ????????????????????title:?'出生日期', ????????????????????width: 80, ????????????????????align:?'left', ????????????????????valign:?'top', ????????????????????sortable:?true ????????????????}, { ????????????????????field:?'CtfId', ????????????????????title:?'身份證', ????????????????????width: 80, ????????????????????align:?'middle', ????????????????????valign:?'top', ????????????????????sortable:?true ????????????????}, { ????????????????????field:?'Address', ????????????????????title:?'地址', ????????????????????width: 180, ????????????????????align:?'left', ????????????????????valign:?'top', ????????????????????sortable:?true ????????????????}, { ????????????????????field:?'Tel', ????????????????????title:?'固定電話', ????????????????????width: 100, ????????????????????align:?'left', ????????????????????valign:?'top', ????????????????????sortable:?true ????????????????}, { ????????????????????field:?'Mobile', ????????????????????title:?'手機號碼', ????????????????????width: 100, ????????????????????align:?'left', ????????????????????valign:?'top', ????????????????????sortable:?true ????????????????}, { ????????????????????field:?'operate', ????????????????????title:?'操作', ????????????????????width: 100, ????????????????????align:?'center', ????????????????????valign:?'middle', ????????????????????formatter: operateFormatter, ????????????????????events: operateEvents ????????????????}], ????????????????onLoadSuccess:function(){ ?? ????????????????}, ????????????????onLoadError:?function?() { ????????????????????mif.showErrorMessageBox("數據加載失敗！"); ????????????????} ????????????}); ????????} //傳遞的參數 function?queryParams(params) { ????????????return?{ ????????????????pageSize: params.pageSize, ????????????????pageIndex: params.pageNumber, ????????????????UserName: $("#txtName").val(), ????????????????Birthday: $("#txtBirthday").val(), ????????????????Gender: $("#Gender").val(), ????????????????Address: $("#txtAddress").val(), ????????????????name: params.sortName, ????????????????order: params.sortOrder ????????????}; ????????}

服務器端代碼：

public?ActionResult QueryList(int?pageIndex = 1,?int?pageSize = 100) ????????{ ????????????try ????????????{ ????????????????string?name = Request["UserName"]; ????????????????string?birthday = Request["Birthday"]; ????????????????string?gender = Request["Gender"]; ????????????????string?Address = Request["Address"]; ????????????????Document docQuery =?new?Document(); ????????????????if?(!string.IsNullOrEmpty(name)) ????????????????{ ????????????????????docQuery.Add("Name",?new?MongoRegex(".*"?+ name +?".*", MongoRegexOption.IgnoreCase)); ????????????????} ????????????????if?(!string.IsNullOrEmpty(birthday)) ????????????????{ ????????????????????docQuery.Add("Birthday",?new?MongoRegex(".*"?+ birthday +?".*", MongoRegexOption.IgnoreCase)); ????????????????} ????????????????if?(!string.IsNullOrEmpty(gender)) ????????????????{ ????????????????????docQuery.Add("Gender", gender); ????????????????} ????????????????if?(!string.IsNullOrEmpty(Address)) ????????????????{ ????????????????????docQuery.Add("Address",?new?MongoRegex(".*"?+ Address +?".*", MongoRegexOption.IgnoreCase)); ????????????????} ????????????????if?(this.HttpContext.Request.QueryString.AllKeys.Contains("ToExcel")) ????????????????{ ????????????????????List<OpenRoom> listExport = MongoDbHelper.GetList<OpenRoom>(MongoTables.OpenRoom, docQuery); ????????????????????//List<string> listTilte = new List<string> { "" }; ????????????????????ExportMethod(listExport); ????????????????} ????????????????long?totalCount = MongoDbHelper.GetTotalCount<OpenRoom>(MongoTables.OpenRoom, docQuery); ????????????????var?list = MongoDbHelper.GetList<OpenRoom>(MongoTables.OpenRoom, docQuery,?new?Document(), pageIndex, pageSize); ????????????????string?jsonString = JsonHelper.ObjToJson(list); ????????????????jsonString =?"{\"total\":"?+ totalCount.ToString() +?",\"rows\":"?+ jsonString +?"}"; ????????????????return?Content(jsonString); ????????????} ????????????catch?(Exception ex) ????????????{ ????????????????return?Content(ex.Message); ????????????} ?? ????????}

注意返回的格式：要返回總記錄數total及分頁后數據rows。

未解決問題：導出Excel時，超出65536行數據時，會異常。怎樣解決這個問題？

2.客戶端請求：當數據量較少，只有上千條數據時，一次性將所有數據返回給客戶端，無論點下一頁，或搜索條件時，不向服務端發請求，實現全文檢索。

這個比較簡單，將sidePagination屬性設為 "client",因為客戶端會處理分頁和全文檢索，無需向服務器端發請求，所以也無需傳遞參數。

前端JS:

function?initTable() { ????????????var?queryUrl =?'@Url.Content("~/UserInfo/QueryList")'?+?'?rnd='?+ +Math.random(); ????????????$table = $('#table-javascript').bootstrapTable({ ????????????????method:?'get', ????????????????url: queryUrl, ????????????????height: $(window).height() - 200, ????????????????striped:?true, ????????????????pagination:?true, ????????????????pageSize: 50, ????????????????pageList: [10, 25, 50, 100, 200], ????????????????search:?true, ????????????????sidePagination:?"client", ????????????????showColumns:?true, ????????????????minimunCountColumns: 2, ????????????????columns: [{ ????????????????????field:?'state', ????????????????????radio:?true ????????????????}, { ????????????????????field:?'Id', ????????????????????title:?'ID', ????????????????????align:?'right', ????????????????????valign:?'bottom', ????????????????????sortable:?true ????????????????}, { ????????????????????field:?'UserName', ????????????????????title:?'姓名', ????????????????????width: 100, ????????????????????align:?'center', ????????????????????valign:?'middle', ????????????????????sortable:?true, ????????????????????formatter: nameFormatter ????????????????}, { ????????????????????field:?'Account', ????????????????????title:?'賬號', ????????????????????align:?'left', ????????????????????valign:?'top', ????????????????????sortable:?true ????????????????}, { ????????????????????field:?'Address', ????????????????????title:?'家鄉', ????????????????????align:?'middle', ????????????????????valign:?'top', ????????????????????sortable:?true ????????????????}, { ????????????????????field:?'Phone', ????????????????????title:?'電話', ????????????????????align:?'left', ????????????????????valign:?'top', ????????????????????sortable:?true ????????????????}, { ????????????????????field:?'QQ', ????????????????????title:?'QQ號碼', ????????????????????align:?'left', ????????????????????valign:?'top', ????????????????????sortable:?true ????????????????}, { ????????????????????field:?'Remark', ????????????????????title:?'備注', ????????????????????align:?'left', ????????????????????valign:?'top', ????????????????????sortable:?true ????????????????}, { ????????????????????field:?'operate', ????????????????????title:?'操作', ????????????????????align:?'center', ????????????????????width: 100, ????????????????????valign:?'middle', ????????????????????formatter: operateFormatter, ????????????????????events: operateEvents ????????????????}] ????????????}); ????????}

后臺直接返回Json數據即可。

后臺代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

public?ActionResult QueryList() ????????{ ????????????try ????????????{ ????????????????List<sys_user> list = accessHelper.GetUserList(); ????????????????string?jsonString = JsonHelper.ObjToJson(list); ????????????????return?Content(jsonString); ????????????} ????????????catch?(Exception ex) ????????????{ ????????????????return?Content(ex.Message); ????????????} ?? ????????}

源碼下載

轉載于:https://www.cnblogs.com/fuqiang88/p/4736941.html

總結

以上是生活随笔為你收集整理的BootstrapTable（附源码） Bootstrap结合BootstrapTable的使用，分为两种模试显示列表。...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Writing for Myself.p
下一篇： HDOJ 1465 不容易系列之一【错