Bootstrap筆記-----Model增刪改查02

時間 2020-01-08

標籤 bootstrap 筆記 model 增刪欄目 Bootstarp 简体版

原文原文鏈接

前臺頁面以下javascript

分爲css

Model-addhtml

Model-deletejava

Model-updatejquery

(注意與按鈕關聯)ajax

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/4/12
  Time: 9:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<html>
<head>
    <title>list</title>
    <script  src="/static/bootstrap/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script src="/static/bootstrap/js/bootstrap.js"></script>

    <!--bootstrapTable相關-->
    <link rel="stylesheet" href="/static/bootstrap/bootstrapTable/bootstrap-table.min.css">
    <script src="/static/bootstrap/bootstrapTable/bootstrap-table.js"></script>
    <script src="/static/bootstrap/bootstrapTable/bootstrap-table-zh-CN.min.js"></script>

    <!--jqueryui-->
    <script src="/static/jqueryui/jquery-ui.js"></script>
    <script src="/static/jqueryui/dialog.js"></script>

    <script src="/views/user/list.js"></script>
</head>
<body>

<div class="row"style="height: 10%;">
</div>



<div class="row" >
    <div class="col-lg-2"></div>
    <div class="col-lg-8">

        <!-- btns 要計算的高度採用.countHeight -->
        <div id="" class="">
            <div class="">
                <div class="l dib countHeightForTable">
                    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 添加
                    </button>

                    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#updateModel" onclick="getModelData()">
                        <i class="glyphicon glyphicon-edit"></i> 編輯
                    </button>
                    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#delModel">
                        <i class="glyphicon glyphicon-trash"></i> 刪除
                    </button>
                    <button class="btn btn-sm btn-default" type="button"  onclick="view()"><i class="glyphicon glyphicon-eye-open"></i>查看</button>
                </div>

            </div>

        </div>

        
        <table id="table1" data-classes="table table-hover "
               data-search="true"
               data-show-refresh="true"
               data-show-columns="true"></table>
    </div>
    <div class="col-lg-2"></div>

</div>

<div class="row" style="height: 10%;"></div>


<!-- Modal add start -->
<form  id="addForm" action="">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    模態框（Modal）標題
                </h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="control-label col-xs-3">姓名:</label>
                    <div class="col-xs-8">
                        <input type="text" name="username"  placeholder="請輸入姓名" class="form-control">
                    </div>
                </div>


                <div class="form-group">
                    <label class="control-label col-xs-3">密碼:</label>
                    <div class="col-xs-8">
                        <input type="text" name="password"  placeholder="請輸入密碼" class="form-control">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉
                </button>
                <button type="button" class="btn btn-primary" onclick="submitData()">
                    提交添加
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

</form>
<!---Model add end ->



<!-- 模態框   信息刪除確認 start-->
<div class="modal fade" id="delModel">
    <div class="modal-dialog">
        <div class="modal-content message_align">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <!-- 隱藏須要刪除的id -->
                <input type="hidden" id="deleteHaulId" />
                <p>您確認要刪除該條信息嗎？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary"
                        id="deleteHaulBtn" onclick="del()">確認</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->

</div>
<!--靜態框   信息刪除確認 end-->

<!--model update start-->

<form  id="updateForm" action="">
    <div class="modal fade" id="updateModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="update">
                        模態框（Modal）--修改
                    </h4>
                </div>
                <div class="modal-body">

                    <div class="form-group hide">
                    <label class="control-label col-xs-3">id:</label>
                    <div class="col-xs-8">
                        <input type="text" name="id" id="upid" value="" class="form-control">
                    </div>
                </div>

                    <div class="form-group">
                        <label class="control-label col-xs-3">姓名:</label>
                        <div class="col-xs-8">
                            <input type="text" name="username" id="upusername"  class="form-control">
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="control-label col-xs-3">密碼:</label>
                        <div class="col-xs-8">
                            <input type="text" name="password" id="uppassword"  class="form-control">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">關閉
                    </button>
                    <button type="button" class="btn btn-primary" onclick="updateUser()">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</form>
<!--model update end-->


</body>
</html>

js代碼以下json

$(function () {

    initTable();

})




function initTable() {

    $('#table1')
        .bootstrapTable(
            {
                method : 'post',// 請求方式（*）
                url : '/user/list',// 請求後臺的URL（*）
                cache : false, // 是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）
                sortable : false, // 是否啓用排序
                contentType: 'application/x-www-form-urlencoded',
                pagination : true,// 是否顯示分頁（*）
                queryParamsType: "limit",//查詢參數組織方式
                pageSize : 10, // 每頁的記錄行數（*）
                pageList : [ 5, 10, 15 ], // 可供選擇的每頁的行數（*）
                search:true,//搜索框
                pageNumber:1,
                striped : true, // 表格顯示條紋
                silent: true,
                strictSearch:true,//
                showColumns:true,// 是否顯示全部的列
                showRefresh:true,//刷新
                showToggle : true, // 是否顯示詳細視圖和列表視圖的切換按鈕
                cardView : false, // 是否顯示詳細視圖
                detailView : false, // 是否顯示父子表
                toolbar : '#toolbar',
                clickToSelect : true,
                sidePagination : 'server',
                queryParams : function(params){
                    console.info(params.offset);
                  return params;
                },
                columns : [
                    {field : 'stat',
                        width : 2,
                        checkbox : true
                    },
                    {
                        field : 'id',
                        title : 'id',
                        align : 'left',
                        valign : 'middle',
                        width : 200,
                        sortable : true,
                        visible:false
                    }
                    ,
                    {
                        field : 'username',
                        title : '姓名',
                        align : 'left',
                        valign : 'middle',
                        width : 200,
                        sortable : true
                    }
                    , {
                        field : 'password',
                        title : '密碼',
                        align : 'left',
                        valign : 'middle',
                        width : 50,
                        sortable : true
                    }],
                onClickRow : function(row, $element){
                    //console.info(row);
                },
                onDblClickRow : function(row, $element){//雙擊
                    //console.info(row);
                },
                onLoadSuccess: function(data){  //加載成功時執行
                    console.info(JSON.stringify(data));
                    console.info("加載成功");
                },
                onLoadError: function(){  //加載失敗時執行
                    console.info("加載數據失敗");
                }
            })

}


//刷新事件
function refreshTable(){
    $('#table1').bootstrapTable('refresh');
}

//使用bootstrap model模塊add
function submitData(){

    var data = {};
    var dataArray = $('#addForm').serializeArray();
    if(dataArray.length>0){
        for(i=0;i<dataArray.length;i++){
            var input = dataArray[i];
            var ele = $("input[name='"+input.name+"']");
            if(ele.prop("disabled")!=true){
                data[input.name] = input.value;
            }
        }
    }
    $.ajax({
        type : 'post',
        url : '/user/save',
        dataType:'json',
        data : data,
        success : function(result) {
            console.info(result);
            $('#myModal').modal('hide');
        }
    })
}

//刪除
function del(ids) {
    if (!ids) {
        var ids='';
        var selected = $('#table1').bootstrapTable('getSelections');
        if(selected.length>0){
            for (i = 0; i < selected.length; i++) {
                ids=ids+selected[i].id+',';
            }
        }
    }
    confirmDelete(ids)
}
function confirmDelete(ids){
    $.ajax({
        type : 'post',
        url : '/user/delte?ids='+ids,
        success : function(result) {
            $('#delModel').modal('hide');
            refreshTable();
        }
    })
}

//給Model獲取值
function getModelData() {
    var selected = $('#table1').bootstrapTable('getSelections');
    var id=selected[0].id;
    $.ajax({
        type : 'post',
        url : '/user/userById?id='+id,
        dataType:'json',

        success : function(result) {
           // console.info(result);
           // console.info(result.username)
            $("#upid").val(result.id);
            $("#upusername").val(result.username);
            $("#uppassword").val(result.password);
        }
    })
}






//使用bootstrap model模塊update
function updateUser(){

    var data = {};
    var dataArray = $('#updateForm').serializeArray();
    if(dataArray.length>0){
        for(i=0;i<dataArray.length;i++){
            var input = dataArray[i];
            var ele = $("input[name='"+input.name+"']");
            if(ele.prop("disabled")!=true){
                data[input.name] = input.value;
            }
        }
    }
    $.ajax({
        type : 'post',
        url : '/user/update',
        dataType:'json',
        data : data,
        success : function(result) {
            console.info(result);
            $('#updateModel').modal('hide');
            refreshTable();
        }
    })
}

事件操做後讓model隱藏的方法 $('#updateModel').modal('hide');bootstrap

model修改高度和寬度數組

(1)修改寬度能夠經過修改modal中的modal-dialog這個div寬度實現緩存

<div class="modal-dialog" style="width:600px">

2) 修改高度和寬度最好的辦法是修改modal-body中添加的控件，設置控件的大小，modal會自動適應。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。