显示效果


样例代码

<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




  • No labels