bootstrap table簡介02
阿新 • • 發佈:2019-02-08
一、根據id的值選中指定行資料
var data = [];
data=[1,2,3,4,5];
選中$(“#”+tableId).bootstrapTable(‘checkBy’, {field:’id’, values:data});
取消選中$(“#”+tableId).bootstrapTable(‘uncheckBy’, {field:’id’, values:data});
選中全部 $(‘#’+tableId).bootstrapTable(‘checkAll’);
取消選中全部 $(‘#’+tableId).bootstrapTable(‘uncheckAll’);
二、根據行下標 改變某一行資料
$(“#TableList”).bootstrapTable(‘updateRow’, {
index: 0, //行下標
row: {
result:’未返回‘,
httpType:’異常‘,
httphend:”,
isEnd:’3’,
}
});
三、 翻頁全選功能
var IsCheckAll = false;//是否去全選 var tableNoCheck =[]; //反選的id var tableTotal = 0; // 表格總條數 //點選全選按鈕觸發方法 將“全選”改為“取消全選” 將資料全部選中並將反選的陣列置空 function isCheckAll(){ if($("#taskIsCheck").text()=='全選'){ $("#taskIsCheck").html("取消全選"); onCheckAllTable('weeklyContentTable',true); IsCheckAll = true; }else{ $("#taskIsCheck").html("全選"); onCheckAllTable('weeklyContentTable',false); IsCheckAll = false; } tableNoCheck =[]; } function onTaskCheckAllTable(tableId,flag,rows,NoCheck){ if(rows!=undefined){ var data=[]; for(var i=0;i<rows.length;i++){ var row=rows[i]; if(NoCheck.length>0 && $.inArray(row.id, NoCheck)>=0){ }else{ data.push(row.id); } } $("#"+tableId).bootstrapTable('checkBy', {field:'id', values:data}); }else{ if(flag){ $('#'+tableId).bootstrapTable('checkAll'); }else{ $('#'+tableId).bootstrapTable('uncheckAll'); } } } //選中觸發方法 function onCheckAllTable(tableId,flag,rows,NoCheck){ if(rows!=undefined){ var data=[]; for(var i=0;i<rows.length;i++){ var row=rows[i]; if(NoCheck.length>0 && $.inArray(row.id, NoCheck)>=0){ }else{ data.push(row.id); } } $("#"+tableId).bootstrapTable('checkBy', {field:'id', values:data}); }else{ if(flag){ $('#'+tableId).bootstrapTable('checkAll'); }else{ $('#'+tableId).bootstrapTable('uncheckAll'); } //取消選中資料呼叫方法 function addNoCheck(NoCheck,id,total,IsCheckAllId,flag){ NoCheck.push(id); if(NoCheck.length>=total){ IsCheckAll = false; tableNoCheck =[]; $("#"+IsCheckAllId).attr("checked",false); } } //選中資料條用方法 function delNoCheck(NoCheckData,id){ if(NoCheckData.length>0 && $.inArray(id, NoCheckData)>=0){ NoCheckData.splice($.inArray(id, NoCheckData),1); } } //資料查詢 function queryWeeklyContentTable(){ //銷燬表格 $('#weeklyContentTable').bootstrapTable('destroy'); //初始化表格,動態從伺服器載入資料 $('#weeklyContentTable').bootstrapTable({ method: 'post', url : '', cache: false, pagination: true, height:444, pageSize: 15, //每頁顯示的記錄數 pageNumber:1, pageList: [10, 15, 20, 25], //記錄數可選列表 clickToSelect: true, sidePagination:'server', //表示服務端請求 responseHandler: responseHandler, //設定返回資料的接收 queryParams:testWeeklyContentParams, //設定傳參 queryParamsType : "undefined", contentType: "application/x-www-form-urlencoded", //這個必須有 要不然後臺接收不到分頁引數 媽蛋 onLoadSuccess:function testWeeklyContentParams(data) { //設定查詢引數 // 全選呼叫 tableTotal = data.total; if(IsCheckAll){ onTaskCheckAllTable('weeklyContentTable',true,data.rows,tableNoCheck); } }, onCheck:function (row) {//選中觸發事件 if(IsCheckAll){ delNoCheck(tableNoCheck,row.id); } }, onUncheck:function (row) {//選中觸發事件 if(IsCheckAll){ addNoCheck(tableNoCheck,row.id,tableTotal,'taskCheckAll','task'); } }, onCheckAll:function (rows) {//選中觸發事件 if(IsCheckAll){ for(var i=0;i<rows.length;i++){ var row = rows[i]; delNoCheck(tableNoCheck,row.id); } } }, onUncheckAll:function (rows) {//取消選中觸發事件 if(IsCheckAll){ for(var i=0;i<rows.length;i++){ var row = rows[i]; addNoCheck(tableNoCheck,row.id,tableTotal,'taskCheckAll','task'); } } }, columns: [ { field: 'state', checkbox: true}, { field: 'id', title: 'id',valign: 'middle' }, { field: 'Name', title: '名稱',valign: 'middle'} ] }); }
四、隱藏列
$(‘#tableid’).bootstrapTable(‘hideColumn’, ‘id’);