国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
bootstrap的table插件動態(tài)加載表頭【表頭】。

bootstrap的table屬性已經(jīng)很熟悉了,最近遇到一個(gè)問題,猶豫每個(gè)列表加載的數(shù)據(jù)需求不同,所以需要?jiǎng)討B(tài)的更換表頭。 網(wǎng)上有很多加載表格數(shù)據(jù)的例子,但是卻沒有找到如何動態(tài)加載表格,再加在數(shù)據(jù)。 雖然可以一個(gè)表格加載一種數(shù)據(jù),但是本著學(xué)習(xí)的態(tài)度嘗試了下這種方式,結(jié)果發(fā)現(xiàn)是可以執(zhí)行的。分享下思路和實(shí)現(xiàn)過程,以備日后使用。

思路:

1、寫接口,查詢出要展示的列。注意接口中必須要有字段中文名稱(columns屬性的title值),字段的英文名稱(columns的field字段),特別注意filed字段應(yīng)該與最后查詢出的列表中返回的json數(shù)據(jù)中的key保持一致,不然取不到值。

2、ajax請求剛才的接口,查詢出columns,并給table的columns賦值。

3、加載表格展示。

大致代碼如下:

表格:

  1. var peopleOptions;
  2. // 人口列表加載
  3. function tableItem() {
  4. peopleOptions = {
  5. method : "POST", // 使用get請求到服務(wù)器獲取數(shù)據(jù)
  6. url : path + "/api/information/people/getList", // 獲取數(shù)據(jù)的地址
  7. contentType : "application/x-www-form-urlencoded",// 重要否則POST會報(bào)錯(cuò)
  8. striped : false, // 表格顯示條紋
  9. pagination : true, // 啟動分頁
  10. pageSize : 10, // 每頁顯示的記錄數(shù)
  11. pageNumber : 1, // 當(dāng)前第幾頁
  12. pageList : [ 10, 20, 50 ], // 記錄數(shù)可選列表
  13. uniqueId : "id",
  14. showColumns : false, // 顯示下拉框勾選要顯示的列
  15. showToggle : false, // 顯示 切換試圖(table/card)按鈕
  16. clickToSelect : false, // 點(diǎn)擊可選
  17. singleSelect : false, // 禁止多選
  18. maintainSelected : true, // 在點(diǎn)擊分頁按鈕或搜索按鈕時(shí),將記住checkbox的選擇項(xiàng)
  19. sortable : true, // 禁止所有列的排序
  20. sidePagination : "server", // 表示服務(wù)端請求 后臺分頁
  21. toolbar : "#toolbar",// 指明自定義的toolbar
  22. queryParamsType : "undefined",
  23. queryParams : function queryParams(params) {
  24. var param = {
  25. pageNumber : params.pageNumber,
  26. pageSize : params.pageSize,
  27. orgId : ztreeId,
  28. nodeId : ztreeId,
  29. citizenName : $("#fullname").val().trim(),
  30. sex : $("#sex").val(),
  31. age : $("#age").val().trim(),
  32. identityCode : $("#idCard").val().trim(),
  33. cellPhone : $("#isMobile").val().trim(),
  34. adress : $("#adress").val().trim(),
  35. };
  36. return param;
  37. },
  38. onLoadSuccess : function() { // 加載成功時(shí)執(zhí)行
  39. responseHandler : function(res) { // 格式化數(shù)據(jù)
  40. console.log(res);
  41. if (res.data.total != undefined)
  42. tmp = {
  43. total : res.data.total,
  44. rows : res.data.rows
  45. };
  46. if (res.data.total == undefined)
  47. tmp = {
  48. total : res.data.length,
  49. rows : res.data
  50. };
  51. return tmp;
  52. },
  53. columns : [ {
  54. checkbox : true,
  55. title : '全選',
  56. valign : 'middle'
  57. }, {
  58. title : '序號',
  59. field : 'number',
  60. width : '40px',
  61. align : 'center',
  62. valign : 'middle',
  63. formatter : indexFormatter
  64. }, {
  65. title : '姓名',
  66. field : 'citizenName',
  67. align : 'center',
  68. valign : 'middle',
  69. }, {
  70. title : '年齡',
  71. field : 'age',
  72. align : 'center',
  73. width : 28,
  74. valign : 'middle',
  75. formatter : ageFormatter
  76. }, {
  77. title : '性別',
  78. field : 'sex',
  79. width : 28,
  80. align : 'center',
  81. valign : 'middle',
  82. },{
  83. title : '身份證號',
  84. field : 'identityCode',
  85. align : 'center',
  86. valign : 'middle',
  87. }, {
  88. title : '民族',
  89. field : 'nation',
  90. align : 'center',
  91. valign : 'middle',
  92. } ]
  93. }
  94. }
  95. $table = $("#table").bootstrapTable(peopleOptions);
  96. };

動態(tài)獲取列:

  1. function getColumns() {
  2. // 加載動態(tài)表格
  3. $.ajax({
  4. url : path + "api/information/people/getLableColumn?ztreeId=" + ztreeId,
  5. type : 'get',
  6. dataType : "json",
  7. async : false,
  8. success : function(returnValue) {
  9. // 未查詢到相應(yīng)的列,展示默認(rèn)列
  10. if (returnValue.retCode == "0") {
  11. //沒查到列的時(shí)候把之前的列再給它
  12. myColumns = $table.bootstrapTable('getOptions').columns[0];
  13. } else {
  14. // 異步獲取要?jiǎng)討B(tài)生成的列
  15. var arr = returnValue.data;
  16. $.each(arr, function(i, item) {
  17. myColumns.push({
  18. "field" : item.labelColumnCode,
  19. "title" : item.labelColumnName,
  20. "hide" : true,
  21. "align" : 'center',
  22. "valign" : 'middle'
  23. });
  24. });
  25. }
  26. console.log(myColumns);
  27. return myColumns;
  28. }
  29. });
  30. }

刷新列表:

  1. //點(diǎn)擊左側(cè)樹后重新加載表格
  2. $table.bootstrapTable(
  3. "refreshOptions",
  4. {
  5. url : path + "/api/peopledataInfo/getPeopleInfoList", // 獲取數(shù)據(jù)的地址
  6. columns : myColumns,
  7. }
  8. );
  9. }

需要注意的是bootstrap的table提供了兩個(gè)刷新的方法,一個(gè)refresh,一個(gè)refreshOptions,前者只是刷新當(dāng)前表格,后者會將表格中的組件全部更新一遍,因?yàn)槲覀兲鎿Q了url和columns,所以需要調(diào)用后者。

展示效果:

動態(tài)加載表頭其實(shí)就是類似Echart中動態(tài)加載數(shù)據(jù)的感覺一樣,只是改變整個(gè)Option中的相關(guān)屬性即可。

優(yōu)點(diǎn):代碼量會大大減少,當(dāng)我們要加載不同數(shù)據(jù)且樣式一樣的表格的時(shí)候可以采用這樣的方式。

缺點(diǎn):樣式很難維護(hù)。前端人員不好定位bug,所以很難修改相應(yīng)的樣式bug。

依據(jù)項(xiàng)目實(shí)際情況,擇優(yōu)使用吧。


本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊舉報(bào)
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
【引用】博客裝飾-表格解讀(1)
表格制作全攻略
簡單表格制作方法
編輯音樂用到的代碼 - 影音時(shí)空 - 中國女性時(shí)尚論壇 女性論壇|時(shí)尚論壇|護(hù)膚美容|流行...
HTML筆記(二)
【學(xué)習(xí)網(wǎng)頁制作基礎(chǔ)入門教程(7)】 - 英雄
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服