1. 程式人生 > >bootstrap table簡介02

bootstrap table簡介02

一、根據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’);