bootstrap中常用的插件及示例

select2插件的使用

选择select2插件的使用

$(id).select2({
                data : data,
                minimumResultsForSearch : Infinity,// 禁用搜索
                allowClear : true
            });

bootstrap-validator表单验证

使用bootstrap-validator插件

reset重置表单

$('#btn-reset').click(function() {
    $('#changeForm').data('bootstrapValidator').resetForm(true);
});

bootstrap-dialog页面加载、button

使用bootstrap-dialog插件

function changePasswd(){
 BootstrapDialog.show({
     title : "修改密码",
     message: function(dialog) {
         var $message = $('
');
         var pageToLoad = dialog.getData('pageToLoad');
         $message.load(pageToLoad);
         return $message;
     },
     data: {
         'pageToLoad': 'changePasswd.html'
     },
        buttons: [{
         id: 'btn-ok',   
         icon: 'glyphicon glyphicon-check',       
         label: 'OK',
         cssClass: 'btn-success', 
         autospin: false,
         action: function(dialogItself){    
             change();

         dialogItself.close();
         }
     }, {
         id:'btn-reset',
         cssClass: 'btn-warning',
         label: '重置',
         icon: 'glyphicon glyphicon-repeat',
         action : function(){
             document.getElementById("changeForm").reset();
            $('#btn-reset').click(function() {
                    $('#changeForm').data('bootstrapValidator').resetForm(true);
            });
         }
     }, {
         id:'btn-close',
         icon:'glyphicon glyphicon-remove',
         label: 'Close',
         cssClass: 'btn-danger',
         action: function(dialogItself){
             dialogItself.close();
         }
     }]
 });

}

Jquery-confirm 插件之alert使用

使用 Jquery-confirm.js插件

function alertView(str){
    $.alert({
        animation : 'zoom',
        animationBounce : 2,
        keyboardEnabled : true,
        title : false,
        content : str,
        theme : 'white',
    });
}

Jquery-confirm 插件之confirm使用

使用 Jquery-confirm.js插件

$.confirm({
    title: '退出系统登陆吗？', 
    content : false,
    // autoClose: 'confirm|10000',
    confirmButtonClass : 'btn-info',
    cancelButtonClass : 'btn-danger',
    confirm : function() {
        $.ajax({
            type : "post",
            url : "logoutAction.action",
            async: false,
            success :function(){
                location.href = "../login.jsp";
            }
        });
    },
    cancel : function() {
        alert('canceled');
    }
});

bootstrap Table

1. bootstrap Table更新操作

    $table.bootstrapTable('updateRow', {
        index : index1,
        row : {
            tid : tid,
            cid : cid,
            uid : uid,
            date : date,
            type : type,
        }
    });

1. 添加操作

使用bootstrap table插件
table rowStyle和runningFormatter

<table data-row-style="rowStyle"> <thead> <tr><th data-align="center" data-formatter="runningFormatter">IDth> tr>thead>

function rowStyle(row, index) {
/*var classes = ['active', 'success', 'info', 'warning', 'danger'];*/
var classes = ['success', 'info', 'warning', 'danger'];

/*if (index % 2 === 0 && index / 2 < classes.length) {
    return {
        classes: classes[index / 2]
    };
}*/
if(index % 2 ===0){
    return {
        classes:classes[index%3]
    }
}
return {};
}

function runningFormatter(value, row, index) {
return index+1;
}

tablet添加操作

   操作

bootstrap model远程加载示例

添加


            

                

            
        

table表中修改某一条记录时，model弹出框获取记录值

function editTerminal(row,index) {
    index1=index;
    $('#editTerminalModal').on('show.bs.modal',function(event) {
        var button = $(event.relatedTarget);
        var recipient = button.data('whatever');
        var modal = $(this);
        modal.find('.modal-title').text(recipient);
        modal.find('#tid').val(row.tid);
        modal.find('#type').val(row.type);
        modal.find('#cid').val(row.cid);
        modal.find('#uid').val(row.uid);
        modal.find('#date').val(row.date);
    })
}