1. 程式人生 > >bootstrap-table複選框預設選中。(從資料庫獲取到對應的狀態進行判斷是否為選中狀態)

bootstrap-table複選框預設選中。(從資料庫獲取到對應的狀態進行判斷是否為選中狀態)

$('#table').bootstrapTable('destroy'); 
$('#table').bootstrapTable({
url:'../data/kehulist.json',
uniqueId: "id",
striped:true,
//pagination:true,
clickToSelect:true,
height:340,
   columns: [{
   field : 'state',
   checkbox:true, 
   formatter : stateFormatter
   }
,{
       field: 'id',       
       title: '組織編碼',
       sortable: true,
   },{
       field: 'name',
       title: '組織名稱',
       sortable: true,
   }],
});

//對應的函式進行判斷;
function stateFormatter(value, row, index) {
    if (row.state == true)
        return {
            disabled : false,//設定是否可用
            checked : true//設定選中
        };
    return value;

}

模擬後臺對應的資料;

[
    {   
        "id": "1",
        "name": "金蝶軟體(中國)有限公司",
        "state": false,  //是否選中
        "tel":"18536552258"
    },
    {
        "id": "2",
        "name": "金蝶軟體(中國)有限公司",
        "state": true,
        "tel":"18536552258"
    },
    {
        "id": "3",
        "name": "金蝶軟體(中國)有限公司",
        "state": false,
        "tel":"18536552258"
    }
]