bootStrap按钮格式化操作

1 Html

<th class="col-xs-4" data-field="operation" data-formatter="actionFormatter"
 data-events="actionEvents" data-align="center" vertical-align:middle!important; >
 操作
</th>

2 Js

2.1 格式化

//格式化操作按钮
function actionFormatter(value, row, index) {
 return getOperation(row['id'],row['pic'],row['name']);
}

2.2 具体格式化

function getOperation(id,pic,value){
 return operation='<p class="visible-md visible-lg hidden-sm hidden-xs action-buttons">'+
 '<a class="blue" data-toggle="modal" onclick="seePic(\''+pic+'\')">'+
 '<i class="icon-zoom-in bigger-130"></i>'+
 '</a>'+
 '<a class="green" href="#" onclick="openModal(\'update\','+id+',\''+value+'\''+')">'+
 '<i class="icon-pencil bigger-130"></i>'+
 '</a>'+
 '<a class="red" href="#" onclick="deleteHotelService('+id+')">'+
 '<i class="icon-trash bigger-130"></i>'+
 '</a>'+
 '</p>'+
 '<p class="visible-xs visible-sm hidden-md hidden-lg">'+
 '<p class="inline position-relative">'+
 '<button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown">'+
 '<i class="icon-caret-down icon-only bigger-120"></i>'+
 '</button>'+
 '<ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">'+
 '<li>'+
 '<a href="#" class="tooltip-info" data-rel="tooltip" title="View">'+
 '<span class="blue">'+
 '<i class="icon-zoom-in bigger-120"></i>'+
 '</span>'+
 '</a>'+
 '</li>'+
 ' <li>'+
 '<a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">'+
 ' <span class="green">'+
 ' <i class="icon-edit bigger-120"></i>'+
 '</span>'+
 ' </a>'+
 '</li>'+
 '<li>'+
 '<a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">'+
 '<span class="red">'+
 '<i class="icon-trash bigger-120"></i>'+
 ' </span>'+
 ' </a>'+
 ' </li>'+
 '</ul>'+
 ' </p>'+
 ' </p>';
}

3 效果图

【相关视频推荐：Bootstrap教程】