bootstrap-table中使用bootstrap-switch開關按鈕

時間 2020-08-18

標籤 bootstrap table 使用 switch 開關按鈕欄目 Bootstarp 简体版

原文原文鏈接

先上圖javascript

準備工做：css

添加css和js文件html

#bootstrap開關按鈕#}
<link href="https://cdn.bootcss.com/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>

一、首先須要格式化狀態欄，加上input框java

給狀態欄加上 formatter: project_status,jquery

 columns: [
                            {
                                checkbox:true  //第一列顯示覆選框
                            },

                     　　　　... ...
                            {
                                field: 'status',
                                title: '狀態',
                                formatter: project_status,
                            },
]

　　　　　　　　　　　　{#狀態欄格式化#}
                    function project_status(value, row, index) {
                        {#var result="";#}
                        {#result += "<input type='checkbox' id='project_status'>"#}
                        {#return "<div class='switch' id='mySwitch'><input type='checkbox' checked id='project_status_switch' name='mycheck'></div>";#}
                        return "<input type='checkbox' checked id='project_status_switch' name='mycheck'>";
                    }

二、寫一個初始化開關的函數：initSwitch()json

function initSwitch(){
　　$('#project_status_switch').bootstrapSwitch({
　　　　onText : "啓用",      // 設置ON文本  
　　　　offText : "禁用",    // 設置OFF文本  
　　　　onColor : "success",// 設置ON文本顏色(info/success/warning/danger/primary)  
　　　　offColor : "warning",  // 設置OFF文本顏色 (info/success/warning/danger/primary)  
　　　　size : "small",    // 設置控件大小,從小到大  (mini/small/normal/large)  
                    // 當開關狀態改變時觸發  
　　　　onSwitchChange : function(event, state) {  
　　　　　　if (state == true) {  
　　　　　　　　alert("ON");  
　　　　　　} else {  
　　　　　　　　alert("OFF");  
　　　　　　}  
　　　　}  
　　})
}

三、bootstrap-table中加上參數onLoadSuccess，初始化表格時直接初始化switch，要否則沒法顯示開關bootstrap

onLoadSuccess: function(){
　　{#初始化switch開關按鈕#}
　　initSwitch();
},

完整代碼:數組

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
 <head>
        <meta charset="UTF-8" />
        <title>項目列表</title>

        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

{#        bootstrap開關按鈕#}
        <link href="https://cdn.bootcss.com/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet">
        {#<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>  #}
        <script src="https://cdn.bootcss.com/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>


 </head>

    <body>
{#        自定義搜索條件區域#}
    <div class="fixed-table-toolbar">
        <div class="pull-left search">
            <input id="search-keyword" class="form-control" placeholder="請輸入項目名查詢">
        </div>


        <div class="columns columns-left btn-group pull-left">
            <button id="search-button" type="button" class="btn btn-primary">查詢</button>
        </div>
        <div class="columns columns-left btn-group pull-left">
            <button id="reset-button" type="button" class="btn btn-primary" onclick="clean()">重置</button>
        </div>


        <!-- 按鈕觸發模態框 -->
        <div class="columns columns-right btn-group pull-right">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">新增項目</button>
        </div>
<!-- 模態框（Modal） -->
        <form action="/addProject/" method="post" class="form-horizontal" role="form">
            <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">
                    新增項目
                </h4>
            </div>
            {# 模態框body #}
             <div class="modal-body" style="height: 100%;">
                <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label">項目名</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="project-name"
                               placeholder="請輸入項目名">
                    </div>
                </div>

                 <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label">項目編號</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="project-code"
                               placeholder="請輸入項目名">
                    </div>
                </div>

                <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label">版本</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="version"
                               placeholder="請輸入項目名">
                    </div>
                </div>

                <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label">業務部門</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="department"
                               placeholder="請輸入項目名">
                    </div>
                </div>

                <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label">測試負責人</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="tester"
                               placeholder="請輸入項目名">
                    </div>
                </div>

                <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label">測試文檔</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="document"
                               placeholder="請輸入項目名">
                    </div>
                </div>

                <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label">上線時間</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="release-time"
                               placeholder="請輸入項目名">
                    </div>
                </div>

                <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label">狀態</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="project-status"
                               placeholder="請輸入項目名">
                    </div>
                </div>

                <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label">更新時間</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="project-code"
                               placeholder="請輸入項目名">
                    </div>
                </div>

                 <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label">項目經理</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="project-manager"
                               placeholder="請輸入項目經理名">
                    </div>
                </div>

            </div>
{#            模態框底部#}
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <input type="button" class="btn btn-primary"value="提交"/>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
{##}
</form>

</div>


{#        bootstrap table自動渲染區域#}
        <table id="mytab" class="table table-hover"></table>

    </body>


        <script type="text/javascript">



                    $('#mytab').bootstrapTable({
                        {#所有參數#}
                        {#url: "{% static 'guchen_obj.json' %}",     //請求後臺的URL（*）或者外部json文件，json內容若爲json數組[{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]，#}
                                                                        //且鍵的名字必須與下方columns的field值同樣，同時sidePagination須要設置爲client或者直接註釋掉，這樣前臺才能讀取到數據，且分頁正常。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//當json文件內容爲json對象時：{"total": 2,"rows": [{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]}，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//分頁要寫爲server，可是server若是沒有處理的話,會在第一頁顯示全部的數據，分頁插件不會起做用

                        url:"/getdata",                     //從後臺獲取數據時，能夠是json數組，也能夠是json對象
                        dataType: "json",
                        method: 'get',                      //請求方式（*）
                        toolbar: '#toolbar',                //工具按鈕用哪一個容器
                        striped: true,                      //是否顯示行間隔色
                        cache: false,                       //是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）
                        pagination: true,                   //是否顯示分頁（*）
                        sortable: true,                     //是否啓用排序
                        sortOrder: "asc",                   //排序方式
                        {#queryParams: oTableInit.queryParams,//傳遞參數（*）#}
                        {#sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）,數據爲json數組時寫client，json對象時（有total和rows時）這裏要爲server方式，寫client列表無數據#}
                        pageNumber: 1,                       //初始化加載第一頁，默認第一頁
                        pageSize: 5,                       //每頁的記錄行數（*）
                        pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
                        {#search: true,                       //是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，因此，我的感受意義不大#}
                        strictSearch: true,
                        showColumns: true,                  //是否顯示全部的列
                        showRefresh: true,                  //是否顯示刷新按鈕
                        minimumCountColumns: 2,             //最少容許的列數
                        clickToSelect: true,                //是否啓用點擊選中行
                        {#height: 500,                        //行高，若是沒有設置height屬性，表格自動根據記錄條數以爲表格高度#}
                        uniqueId: "ID",                     //每一行的惟一標識，通常爲主鍵列
                        showToggle: false,                    //是否顯示詳細視圖和列表視圖的切換按鈕
                        cardView: false,                    //是否顯示詳細視圖
                        detailView: false,                   //是否顯示父子表

                        //獲得查詢的參數
                        queryParams: function (params) {
                            //這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也須要改爲同樣的
                            var query_params = {
                                rows: params.limit,                         //頁面大小
                                page: (params.offset / params.limit) + 1,   //頁碼
                                sort: params.sort,      //排序列名
                                sortOrder: params.order, //排位命令（desc，asc）

                                //查詢框中的參數傳遞給後臺
                                search_kw: $('#search-keyword').val(), // 請求時向服務端傳遞的參數
                            };
                            return query_params;
                        },



                        columns: [
                            {
                                checkbox:true  //第一列顯示覆選框
                            },

                            {
                                field: 'project_name',  //返回數據rows數組中的每一個字典的鍵名與此處的field值要保持一致
                                title: '項目名'
                            },
                            {
                                field: 'project_code',
                                title: '項目編號'
                            },
                            {
                                field: 'version',
                                title: '版本'
                            },
                            {
                                field: 'department',
                                title: '業務部門'
                            },
                            {
                                field: 'tester',
                                title: '測試負責人'
                            },
                            {
                                field: 'document',
                                title: '測試文檔'
                            },
                            {
                                field: 'release_time',
                                title: '上線時間'
                            },
                            {
                                field: 'status',
                                title: '狀態',
                                formatter: project_status,
                            },
                            {
                                field: 'update_time',
                                title: '更新時間'
                            },
                            {
                                field: 'manager',
                                title: '項目經理'
                            },
                            {
                                field: 'operate',
                                title: '操做',
                                width: 120,
                                align: 'center',
                                valign: 'middle',
                                formatter: actionFormatter,
                             },

                        ],
                        onLoadSuccess: function(){
                        {#    初始化switch開關按鈕#}
                            initSwitch();
                        },
                    });

                    function initSwitch(){
                        $('#project_status_switch').bootstrapSwitch({
                            onText : "啓用",      // 設置ON文本  
                            offText : "禁用",    // 設置OFF文本  
                            onColor : "success",// 設置ON文本顏色(info/success/warning/danger/primary)  
                            offColor : "warning",  // 設置OFF文本顏色 (info/success/warning/danger/primary)  
                            size : "small",    // 設置控件大小,從小到大  (mini/small/normal/large)  
                            // 當開關狀態改變時觸發  
                            onSwitchChange : function(event, state) {  
                                if (state == true) { 
                                    alert("ON");
                                } else {
                                    alert("OFF");
                                }  
                            }  
                        })
                    }

                    {#狀態欄格式化#}
                    function project_status(value, row, index) {
                        {#var result="";#}
                        {#result += "<input type='checkbox' id='project_status'>"#}
                        {#return "<div class='switch' id='mySwitch'><input type='checkbox' checked id='project_status_switch' name='mycheck'></div>";#}
                        return "<input type='checkbox' checked id='project_status_switch' name='mycheck'>";
                    }



                //操做欄的格式化
                function actionFormatter(value, row, index) {
                    var id = value;
                    var result = "";
                    result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
                    result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='編輯'><span class='glyphicon glyphicon-pencil'></span></a>";
                    result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='刪除'><span class='glyphicon glyphicon-remove'></span></a>";
                    return result;
                }


                // 搜索查詢按鈕觸發事件
                $(function() {
                    $("#search-button").click(function () {
                        $('#mytab').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
                        $('#search-keyword').val()
                    })
                })

             //重置搜索條件
                function clean(){
                    //先清空
                    $('#search-keyword').val('');
                    //清空後查詢條件爲空了，再次刷新頁面，就是所有數據了
                    $('#mytab').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
                }

        </script>


</html>

View Code

相關標籤/搜索

每日一句

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