Maison > interface Web > js tutoriel > opération de formatage du bouton bootStrap

opération de formatage du bouton bootStrap

PHPz
Libérer: 2018-10-15 15:40:28
original
2015 Les gens l'ont consulté

1 HTML

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

2 J

2.1 Formatage

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

2.2 Formatage spécifique

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;;
}
Copier après la connexion

3 rendus

[Recommandations vidéo associées : Tutoriel Bootstrap]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal