BootStrap table實現動態合併單元格

2021-08-18 14:10:44 字數 1479 閱讀 5659

/**

* 合併單元格

* @param data 原始資料(在服務端完成排序)

* @param fieldname 合併屬性名稱

* @param fieldname2 指定行方向可能的合併欄位名稱

* @param target 目標**物件

* 以下方法可實現動態行與列的同時合併

*/function mergecells(data,fieldname,fieldname2,target);

for(var i = 0 ; i < data.length ; i++) else

break;} }

}//宣告乙個map計算相同屬性值在data物件 行方向上出現的次數和,行方向上我這裡指定了另外一列 也可以向不指定從而全部進行檢視

var colssortmap = {};

for(var i = 0 ; i < data.length ; i++)else

break;

}

} } }

};for(var prop in rowssortmap)

for(var prop in colssortmap)

$(target).bootstraptable('mergecells',);

//尋找對應字段具體值相對應的 rowssortmap colssortmap 值,以防止出現亂合併的現象

for(var i = 0 ; i < data.length ; i++)

}for(var bcd in colssortmap)

}$(target).bootstraptable('mergecells',);

i += rows - 1;

break;} }

}};

以上為js方法 實現了動態調整bootstraptable**,分為行方向與列方向的遍歷以及對應字段值的匹配

在onloadsuccess中指定即可例如

onloadsuccess:function()*/);

listtable.bootstraptable("resetview"/*,*/);

var data = $("#famamodellist").bootstraptable('getdata', true);

//合併單元格

mergecells(data, "f_code", "n_onedayasset",$('#famamodellist'));

//resetwidth

}

展示效果

Bootstrap table學習筆記

引入css檔案 引入相關庫 我們需要引入jquery庫 bootstrap庫 以及bootstrap table.js檔案 put your locale files after bootstrap table.js 啟用bootstrap table外掛程式 官方文件中給出了我們有兩種那個方式來啟...

BootstrapTable使用技巧

使用者交易 商戶名稱 日期支付寶金額 支付寶筆數 總金額總筆數 關閉 複製 通過data field 的值會從後端返回的資料直接渲染到頁面上。operateformatter function value,row,index else 複製 operateformatter和window.opera...

bootstrap table 常用方法

json物件的陣列 var rows table bootstraptable getselections tableid bootstraptable table bootstraptable refresh 踩過的坑 該方法在初次載入沒有資料的情況下會失效。table bootstraptabl...