bootStrap按钮格式化操作

PHPz
Lepaskan: 2018-10-15 15:40:28
asal
1979 orang telah melayarinya

1      Html

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

2 Js

2.1 格式化

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

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;;
}
Salin selepas log masuk

3      效果图

【相关视频推荐:Bootstrap教程

Atas ialah kandungan terperinci bootStrap按钮格式化操作. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!