显示效果
样例代码
<style> .row_action_inner{ display: inline-block; padding: 5px; } #list_d_btn_list .btn{ background:#9e9e9e; } #list_d_btn_list .nav>li>a:hover,#list_d_btn_list .nav .open > a{ background-color: #bbb } #list_d_btn_list .nav>li>a { padding: 8px 3px; font-size: 12px; } </style> <script> $(document).ready(function(){ var id='list_d_btn_list';//列表id var actionTitle="Actions...";//下拉按钮标签 var optionTitles=["说明文字1","说明文字2","说明文字3"];//下拉项说明 setTimeout(function(){ if($("#"+id).find(".row_action_inner a").length){ var rows=$("#"+id+" tbody tr"); rows.each(function(){ var row=$(this); var rowActions=row.find(".row_action"); var rowActionsInner=row.find(".row_action .row_action_inner"); var rowActionFirst=rowActions.first(); var nav=$("<ul class='nav'></ul>"); var dropdown=$("<li class='user-link dropdown'></li>"); dropdown.append("<a data-toggle='dropdown' class='btn dropdown-toggle waves-effect btn waves-button waves-float' style='color:white;'>"+actionTitle+"<span class='caret'></span></a>"); var ul=$("<ul class='dropdown-menu' style='min-width:100px;'></ul>"); var actionCount=0; rowActionsInner.each(function(index){ if(optionTitles.length>index){ $(this).attr("title",optionTitles[index]); } if($(this).find("a").length){ var li=$('<li></li>').append($(this)); ul.append(li); actionCount++; } }); dropdown.append(ul); nav.append(dropdown); rowActionFirst.append(nav); var rowActions=row.find(".row_action:not(:first)").remove(); if(actionCount==0){ row.find(".row_action").html(""); } }); $("#"+id+" thead .row_action:not(:first)").remove(); }else{ $("#"+id+" .row_action").remove(); } },500); }) </script>
配置项说明
配置项名称 | 说明 |
---|---|
id | 列表id |
actionTitle | 下拉按钮标签 |
optionTitles | 下拉项说明,可以不填,如果填写的话按照顺序依次填写 |
Demo
http://minatc.valuprosys.com/jw/web/userview/code_demo/v/_/d_btn_list_crud