1 Html

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

Copy after login

2 Js

2.1 Formatting

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

Copy after login

2.2 Specific formatting

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;;
}

Copy after login

3 renderings

[Related video recommendation: Bootstrap Tutorial]

The above is the detailed content of bootStrap button formatting operation. For more information, please follow other related articles on the PHP Chinese website!