{% 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(data){

                             {#获取行数据的状态#}

                            console.log('渲染数据完成后，打印所有数据')

                            console.log(data);

                            {#获取所有列表数据#}

                            var data=$("#mytab").bootstrapTable("getData");

                            console.log('已获取全部数据%s',data);

                            {#根据每行数据的status值渲染开关#}

                            for (var i=0;i<data.length;i++){

                                console.log(data[i].project_code,data[i].status)

                                if (data[i].status == 1){

                                    console.log('这个是开启的')

                                    $("[id='project_status_switch_on']").bootstrapSwitch({

                                        onText: "启用",      // 设置ON文本  

                                        offText: "禁用",    // 设置OFF文本  

                                        onColor: "success",// 设置ON文本颜色(info/success/warning/danger/primary)  

                                        offColor: "danger",  // 设置OFF文本颜色 (info/success/warning/danger/primary)  

                                        size: "small",    // 设置控件大小,从小到大  (mini/small/normal/large)

                                        // 当开关状态改变时触发  

                                        onSwitchChange : function(event, state) {  

                                            console.log(state);

                                            {#获取该行的project_code#}

                                            var project_code = this.value;

                                            console.log(project_code);

                                            if (state == false) {

                                                status=1

                                                {#alert("ON");#}

                                                console.log(status);

                                                set_status(project_code, status);

                                            } else {

                                                status=0

                                                {#alert("OFF");#}

                                                set_status(project_code, status);

                                            }  

                                         }  

                                    })

                                }else{

                                    console.log('这个是禁用的')

                                    $("[id='project_status_switch_off']").bootstrapSwitch({

                                        onText: "启用",      // 设置ON文本  

                                        offText: "禁用",    // 设置OFF文本  

                                        onColor: "success",// 设置ON文本颜色(info/success/warning/danger/primary)  

                                        offColor: "danger",  // 设置OFF文本颜色 (info/success/warning/danger/primary)  

                                        size: "small",    // 设置控件大小,从小到大  (mini/small/normal/large)

                                        // 当开关状态改变时触发  

                                        onSwitchChange : function(event, state) {  

                                            console.log(state);

                                            {#获取该行的project_code#}

                                            var project_code = this.value;

                                            console.log(project_code);

                                            if (state == false) {

                                                status=1

                                                {#alert("ON");#}

                                                console.log(status);

                                                set_status(project_code, status);

                                            } else {

                                                status=0

                                                {#alert("OFF");#}

                                                set_status(project_code, status);

                                            }  

                                         }  

                                    })

                                }

                            }

                        }

                    });

                    {#状态栏格式化,根据该行数据的status的值控制checked属性是否选中#}

                    function project_status(value, row, index) {

                        var data = JSON.stringify(row); //获取该行数据

                        var data_json = JSON.parse(data);

                        console.log(data_json);

                        console.log('格式化最先被执行')

                        {#for (var i=0;i<data_json.length;i++){#}

                        {#    console.log('第%s行的状态为%s',i,data_json.status);#}

                        if (data_json.status == 1) {

                            console.log('设置为开启')

                            return "<input value='"+data_json.project_code+"' type='checkbox' checked id='project_status_switch_on' name='mycheck'>";

                        } else {

                            console.log('设置为关闭')

                            return "<input value='"+data_json.project_code+"' type='checkbox'  id='project_status_switch_off' name='mycheck'>";

                        }

                    }

                {#通过开关修改状态#}

                function set_status(project_code, status){

                        $.ajax({

                            type:'POST',

                            dataType: 'json',

                            url: '/change_status/',

                            data:{'project_code': project_code, 'status': status},

                            success:function(data){

                                if(data.status == 'success'){

                                    console.log(data)

                                    {#alert('修改成功')#}

                                }

                            },

                            error: function(){

                              alert('修改失败');

                            }

                        })

                }

                //操作栏的格式化

                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>

bootstrap-table和bootstrap-switch的更多相关文章

  1. 表格组件神器：bootstrap table详细使用指南

    1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...

  2. JS组件系列——表格组件神器：bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  3. [转]JS组件系列——表格组件神器：bootstrap table

    原文地址:https://www.cnblogs.com/landeanfen/p/4976838.html 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉 ...

  4. JS组件系列——表格组件神器：bootstrap table 包含了js对象的定义和对象成员函数的定义

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  5. 【转载】BootStrap表格组件bootstrap table详解

    (转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...

  6. Bootstrap表格组件 Bootstrap Table

    Bootstrap Table是Bootstrap的一个组件 Bootstrap Table Demo:http://issues.wenzhixin.net.cn/bootstrap-table/i ...

  7. ABP+AdminLTE+Bootstrap Table权限管理系统第十一节--bootstrap table之用户管理列表

    这张开始bootstrap table,引入项目有两种方法,一种是直接去官网下载 地址:http://bootstrap-table.wenzhixin.net.cn/ 另一种是Nuget引入. 然后 ...

  8. ABP+AdminLTE+Bootstrap Table权限管理系统第八节--ABP错误机制及AbpSession相关

    上一节我们讲到登录逻辑,我做的登录逻辑很简单的,我们来看一下abp module-zero里面的登录代码. #region Login / Logout public ActionResult Log ...

  9. C# Bootstrap table之 分页

    效果如图: 一.声明talbe <div class="container"> <table id="table" class="t ...

  10. ABP+AdminLTE+Bootstrap Table权限管理系统第十一节--Bootstrap Table用户管理列表以及Module Zero之用户管理

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 用户实体 用户实体代表应用的一个用户,它派生自AbpUser类,如下所示: public class User : ...

随机推荐

  1. VS - ActionFilterAttribute

    Global.asax.cs public class MvcApplication : System.Web.HttpApplication { public static void Registe ...

  2. win32线程栈溢出问题 (二)

    3.2.函数递归调用引发的栈溢出 写一段最简单的无穷递归代码,如下: #include "stdafx.h" void f(void) { f(); } int _tmain(in ...

  3. C语言scanf函数返回值小记

    scanf scanf是C标准库stdio里面定义的用于获取用户输入的函数,具体的介绍可以在CppReference上看到.scanf的返回值是已经成功赋值的变量个数,也就是说在 scanf(&quo ...

  4. 0915 N校联考

    树上路径(phantasm) 题目背景 Akari是一个普通的初中生. 题目描述 Akari的学校的校门前生长着一排n棵树,从西向东依次编号为1∼n.相邻两棵树间的距离都是1.Akari上课的教学楼恰 ...

  5. python 小技巧，给设计好的dict 增加嵌套值

    beijing={} beijing={'} 现在要给beijing的增加一个shanghai1 的嵌套值 beijing['shanghai1']['name']=1 运行: 那么在python3. ...

  6. vue element-UI 多个 select 回显成功，但是选中无反应

    参考文章 vue开发(四)element的select下拉框设定初值后,不能重新选择的问题 参考文章 element模态框dialog中的select组件中选中无反应 原因 下拉框数据是循环别的接口得 ...

  7. 前端 MV*框架的意义

    早期前端都是比较简单,基本以页面为工作单元,内容以浏览型为主,也偶尔有简单的表单操作,基本不太需要框架. 随着 AJAX 的出现,Web2.0的兴起,人们可以在页面上可以做比较复杂的事情了,然后前端框 ...

  8. 改变jupyter notebook的主题背景

     https://study.163.com/provider/400000000398149/index.htm?share=2&shareId=400000000398149( 欢迎关注博 ...

  9. ubuntu下安装ftp服务

    1. 安装vsftpd $ sudo apt-get install vsftpd 2. 创建一个用户user-ftp用于ftp服务 $ sudo adduser user-ftp 3.创建一个文件/ ...

  10. [原]将BITMAPINFO保存成bmp文件，以及渲染到设备

    /* class Image { public: Image() = delete; Image(const uint32_t& _w, const uint32_t& _h) :w( ...