當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2024/6/21 编程问答 29 豆豆

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

引用的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.服務(wù)端請求：即當(dāng)數(shù)據(jù)量大，千百萬條數(shù)據(jù)的情況下，只獲取當(dāng)頁條件下的數(shù)據(jù)。每點(diǎn)擊分頁或查詢都向服務(wù)端重新獲取分頁數(shù)據(jù)。

前端代碼：

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",?//服務(wù)端請求 ????????????????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:?'手機(jī)號碼', ????????????????????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("數(shù)據(jù)加載失敗！"); ????????????????} ????????????}); ????????} //傳遞的參數(shù) 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 ????????????}; ????????}

服務(wù)器端代碼：

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); ????????????} ?? ????????}

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

未解決問題：導(dǎo)出Excel時(shí)，超出65536行數(shù)據(jù)時(shí)，會(huì)異常。怎樣解決這個(gè)問題？

2.客戶端請求：當(dāng)數(shù)據(jù)量較少，只有上千條數(shù)據(jù)時(shí)，一次性將所有數(shù)據(jù)返回給客戶端，無論點(diǎn)下一頁，或搜索條件時(shí)，不向服務(wù)端發(fā)請求，實(shí)現(xiàn)全文檢索。

這個(gè)比較簡單，將sidePagination屬性設(shè)為 "client",因?yàn)榭蛻舳藭?huì)處理分頁和全文檢索，無需向服務(wù)器端發(fā)請求，所以也無需傳遞參數(shù)。

前端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:?'家鄉(xiāng)', ????????????????????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數(shù)據(jù)即可。

后臺代碼：

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); ????????????} ?? ????????}

源碼下載

轉(zhuǎn)載于:https://www.cnblogs.com/fuqiang88/p/4736941.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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