最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

bootStrap按钮格式化操作

来源:动视网 责编:小采 时间:2020-11-27 20:12:56
文档

bootStrap按钮格式化操作

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>
推荐度:
导读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>


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教程】

文档

bootStrap按钮格式化操作

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>
推荐度:
标签: 设置 操作 格式化
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top