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

3      效果圖

【相關影片推薦：Bootstrap教學】

以上是bootStrap按鈕格式化操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！