1. 程式人生 > >bootstrap-table 動態合併行和列方法

bootstrap-table 動態合併行和列方法

用法:

$("#table2").bootstrapTable({ url: "http://...", columns: [], onLoadSuccess: function (data) { mergeCells(data, "FDepName3", 1, $('#table2'));//行合併 mergeColspan(data, ["FDepName3", "FDepName1", "FDepName2"], $('#table2'));//列合併 },})/**
* 合併行 * @param data 原始資料(在服務端完成排序) * @param fieldName 合併屬性名稱陣列 * @param colspan 列數 * @param target 目標表格物件 */function mergeCells(data, fieldName, colspan, target) { if (data.length == 0) { alert("不能傳入空資料"); return; } var
numArr = []; var value = data[0][fieldName]; var num = 0; for (var i = 0; i < data.length; i++) { if (value != data[i][fieldName]) { numArr.push(num); value = data[i][fieldName]; num = 1; continue
; } num++; } var merIndex = 0; for (var i = 0; i < numArr.length; i++) { $(target).bootstrapTable('mergeCells', { index: merIndex, field: fieldName, colspan: colspan, rowspan: numArr[i] }) merIndex += numArr[i]; }}/*** 合併列* @param data 原始資料(在服務端完成排序)* @param fieldName 合併屬性陣列* @param target 目標表格物件*/function mergeColspan(data, fieldNameArr, target) { if (data.length == 0) { alert("不能傳入空資料"); return; } if (fieldNameArr.length == 0) { alert("請傳入屬性值"); return; } var num = -1; var index = 0; for (var i = 0; i < data.length; i++) { num++; for (var v in fieldNameArr) { index = 1; if (data[i][fieldNameArr[v]] != data[i][fieldNameArr[0]]) { index = 0; break; } } if (index == 0) { continue; } $(target).bootstrapTable('mergeCells', { index: num, field: fieldNameArr[0], colspan: fieldNameArr.length, rowspan: 1 }); }}

相關推薦

bootstrap-table 動態合併方法

用法:$("#table2").bootstrapTable({ url: "http://...", columns: [], on

js為datagrid動態插入

function onTableLoadSuccess(data){     var tag=1;     $.getJSON("getOperation?d="+new Date(),function(result){         for(var i=0;i<d

js動態刪除table表的指定

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

[轉]bootstrap table 動態

原文地址:https://my.oschina.net/u/2356355/blog/1595563 據說bootstrap table非常好用,從入門教程中瞭解到它的以下主要功能: 由於固定表頭意味著固定的列,然而我需要做動態列數的表格啊。 大致思路:bootstrap table在載入表格時,表

kendo ui grid 的 合併

1.自定義Header: 通過修改 columns[] 來自定義頭的合併 2.通過kendo 模板來自定義 初始化grid 的資料 $("id").kendoGrid({ scrollable : true, sortable : true, fil

table固定表頭,其中行包含合併單元格(支援IE,但滑鼠滾動輪滾動效果不太友好)

PS:該程式碼用於學習,大部分不是原創,在他(她)人程式碼的基礎上修改成自己想實現的效果,來源不明,因此沒有加轉載連結,如有問題,先在這裡抱歉,請聯絡我刪除。 內容實現的效果與上一篇一樣,但是這個這個用了一點點js去實現IE沒有辦法相容的一些屬性,所以這個版本可以相容IE的高版本和低版本,測試用的版本時IE8

Excel動態合併合併

背景:             在北京工作的時候,又一次同事問了我這樣一個問題,說我要把從資料庫獲取到的資料直接通過NPOI進行匯出,但是我對匯出的格式要特殊的要求,如圖: 冥思苦想,最終順利幫同事解決問題,雖然有點瑕疵,但是畢竟是盲寫,也算是圓滿完成任務了: //

動態隱藏ALV的

本例和行列例程轉換不同,內表結構是固定的,僅僅是通過ALV的fieldcat和Filter來隱藏/顯示ALV的行和列 列: FORM changefield .   LOOP AT gt_fieldcat INTO gs_fieldcat .     gs_fieldca

python中pandas庫中DataFrame對的操作使用方法

用pandas中的DataFrame時選取行或列:import numpy as np import pandas as pd from pandas import Sereis, DataFrame ser = Series(np.arange(3.)) data =

jquery實現table動態新增、刪除以及的上移下移

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>  

JS匯出Excel自動獲取table頁面資料自動獲取,並進行單元格合併

JS獲取table頁面資料自動獲取,並進行單元格合併行,列 自己在百度上看的,感覺還可以 自己吧下面的程式碼複製就可以用了 (關於無法啟動Excel問題,) 這是HTML頁面 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML

HTML動態增加刪除表格的

<!doctype html> <html> <head> <!--動態生成指定行數和列數的可編輯表格--> <style> </style> <script> function addrow(){   var c=docum

Vue 動態生成表格的

當在開發專案的時候,固定的頁面表格標題及內容不能滿足需求,需要根據不同的需求動態載入不同的表格表頭和表格的內容,具體的實現程式碼如下: <template> <div class="boxShadow"> <div style="m

javascript操作table動態新增刪除

動態新增表格行和刪除行,ie9和chrome上執行通過: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

JS 合並單元格相同內容

del nbsp ext 合並單元格 color class doc nal div <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD&

Linux提取不匹配字符串的(awk函數)

div ont 字符串 pre IT int nan span http 如下圖所示,想把含有‘-nan’字符串的行提取出來 則用到awk函數,命令行如下: awk ‘{if($3!="-nan"){print $3}}‘ CHB_vs_

C#中關於DataGridView的背景色-前景色設置

ring strong style屬性 背景 car gray bind etl pin 關於DataGridView行和列的背景色-前景色設置 1.設定DataGridView全部單元格的Style DataGridView內所有單元格的Style變更,可以使用Data

Excel表中如何同時鎖定

info 固定 tro nbsp img image 我們 三種 str 鎖定行列信息欄,需要用到的是視圖工具欄,點擊視圖工具欄我們顯而易見的看到了凍結窗口一欄,通過凍結窗口來鎖定行及列信息欄; 第一種是凍結首行 第二種是凍結首列 通上 第三種是同時凍結前幾

js 遍歷

tag pre tex innertext color 遍歷 bsp tab ext var table = document.getElementsByTagName("table")[0]; //遍歷列 for (var i = 0; i <

bootstrap table自動換

怎樣讓HTML 表格中內容自動換行?? style="word-break:break-all; word-wrap:break-all;" 1 <div class="span12">     <table class="table table-conde