BootStrap简单table

效果图：

代码如下：

<%--

  Created by IntelliJ IDEA.

  User: 冷噫雪

  Date: 2019/9/1

  Time: 13:06

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%--引入标签库--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html>

<head>

    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.css">

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap-datetimepicker.css">

</head>

<body>

<div class="container">

    <h3>所有电力设备</h3>

    <div class="row" style="margin-top: 30px;">

        <table id="table01"></table>

    </div>

</div>

<%--查看--%>

<div class="modal fade" id="see" role="dialog" tabindex="-1" aria-labelledby="seeCom" aria-hidden="true">

    <div class="modal-dialog" role="document">

        <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="seeCom">信息详情</h4>

            </div>

            <div class="modal-body">

                <div class="row" style="margin-top: 10px;">

                    <label class="control-label col-md-3 col-sm-3 col-md-offset-1 col-sm-offset-1">设备名称：</label>

                    <div class="col-md-5 col-sm-5">

                        <span id="commodityName2"></span>

                    </div>

                </div>

                <div class="row" style="margin-top: 10px;">

                    <label class="control-label col-md-3 col-sm-3 col-md-offset-1 col-sm-offset-1">设备类型：</label>

                    <div class="col-md-5 col-sm-5">

                        <span id="commodityType2"></span>

                    </div>

                </div>

                <div class="row" style="margin-top: 10px;">

                    <label class="control-label col-md-3 col-sm-3 col-md-offset-1 col-sm-offset-1">设备状态：</label>

                    <div class="col-md-5 col-sm-5">

                        <span id="commodityStatus"></span>

                    </div>

                </div>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" style="text-align: center;" data-dismiss="modal">关闭

                </button>

            </div>

        </div>

    </div>

</div>

<%--修改--%>

<div class="modal fade" id="chang" role="dialog" tabindex="-1" aria-labelledby="chan" aria-hidden="true">

    <div class="modal-dialog" role="document">

        <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="chan">信息修改</h4>

            </div>

            <div class="modal-body">

                <form action="#" method="post" id="changMessage">

                    <%--设备id--%>

                    <input type="hidden" id="comId" name="id" />

                    <div class="input-group input-group-sm">

                        <span class="input-group-addon">设备名称:</span>

                        <input type="text" class="form-control" id="commodityName" name="commodityName">

                    </div>

                    <div class="input-group" style="margin-top: 10px;">

                        <span class="input-group-addon">设备类型:</span>

                        <select class="form-control" id="commodityType" name="commodityType">

                        </select>

                    </div>

                </form>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">关闭

                </button>

                <button type="button" onclick="succ()" class="btn btn-primary">

                    提交更改

                </button>

            </div>

        </div>

    </div>

</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.2.1.js" charset="utf-8"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/table/bootstrap-table.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap-datetimepicker.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap-datetimepicker.zh-CN.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/table/locale/bootstrap-table-zh-CN.js"></script>

<script>

    $("#table01").bootstrapTable({

        url:"/findComm",

        striped: true,                      //是否显示行间隔色

        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）

        pagination: true,                   //是否显示分页（*）

        sortable: true,                     //是否启用排序

        sortName:"id",                      //根据哪个字段排序

        sortOrder: "asc",                   //排序方式

        sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）

        pageNumber: 1,                       //初始化加载第一页，默认第一页

        pageSize: 5,                       //每页的记录行数（*）

        pageList: [5,10,20,30],        //可供选择的每页的行数（*）

        minimumCountColumns: 2,             //最少允许的列数

        clickToSelect: true,                //是否启用点击选中行

        uniqueId: "ID",                       //每一行的唯一标识，一般为主键列

        exportDataType: "basic",              //basic', 'all', 'selected'.

        columns:[

            {

                title: '序号',

                field: '',

                formatter: function (value, row, index) {

                    return index+1;

                }

            },

            {

                field:'commodityName',

                title:'设备名称'

            },

            {

                field:'commodityType',

                title:'设备类型',

                formatter:function (value, row, index) {

                    var text = '-';

                    if (value == 1) {

                        text = "发电设备";

                    }else if(value == 2){

                        text="仪器仪表"

                    }else if(value == 3){

                        text="消防设备"

                    }else {

                        text="直流系统"

                    }

                    return text;

                }

            },

            {

                field:'commodityStatus',

                title:'设备状态',

                formatter:function (value, row, index) {

                    var text = '-';

                    if (value == 0) {

                        text = "维修中";

                    }else if(value == 1){

                        text="正常使用"

                    }else if(value == 2){

                        text="故障"

                    }else {

                        text="其他"

                    }

                    return text;

                }

            },{

                title: "操作",

                align: 'center',

                valign: 'middle',

                width: 300, // 定义列的宽度，单位为像素px

                formatter: function (value, row, index) {

                    var see= '<button class="btn btn-primary btn-sm btn-default" onclick="see('+row.id+')">查看</button>';

                    var chang= '<button class="btn btn-primary btn-sm btn-default" onclick="chang('+row.id+')">修改</button>';

                    var del='<button class="btn btn-primary btn-sm btn-success" onclick="del('+row.id+')">删除</button>';

                    return see+'&nbsp;&nbsp;&nbsp;'+chang+'&nbsp;&nbsp;&nbsp;'+del;

                }

            }

        ],

        onLoadSuccess: function(){  //加载成功时执行

        },

        onLoadError: function(){  //加载失败时执行

        }

    })

    function see(id) {

        $.ajax({

            type:"post",

            url:"${pageContext.request.contextPath}/findOne",

            dataType:"json",

            data:{"id":id},

            success:function(data){

                $("#commodityName2").html(data.commodityName)

                if(data.commodityType=='1'){

                    $("#commodityType2").html('发电设备')

                }else if(data.commodityType=='2'){

                    $("#commodityType2").html('仪器仪表')

                }else if(data.commodityType=='3'){

                    $("#commodityType2").html('消防设备')

                }else if(data.commodityType=='4'){

                    $("#commodityType2").html('直流系统')

                }

                if(data.commodityStatus=='0'){

                    $("#commodityStatus").html('维修中')

                }else if(data.commodityStatus=='1'){

                    $("#commodityStatus").html('正常使用')

                }else if(data.commodityStatus=='2'){

                    $("#commodityStatus").html('故障')

                }else{

                    $("#commodityStatus").html('状态不明')

                }

                $("#see").modal("show");

            },

            error:function(){

                alert("出错003！")

            }

        })

    }

    function chang(id) {

        $.ajax({

            type:"post",

            url:"${pageContext.request.contextPath}/findOne",

            dataType:"json",

            data:{"id":id},

            success:function(data){

                $("#comId").val(data.id)

                $("#commodityName").val(data.commodityName)

                disposeCheckBox(data.commodityType)

                $("#chang").modal("show");

            },

            error:function(){

                alert("出错003！")

            }

        })

    }

    function disposeCheckBox(commodityType) {

        $.ajax({

            type:"post",

            url:"${pageContext.request.contextPath}/findCommTypeName",

            dataType:"json",

            success:function(data){

                var str=''

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

                    if(commodityType==data[i].id){

                        str+="<option selected=selected value="+data[i].id+">"+data[i].comTypeName+"</option>";

                    }else {

                        str+="<option value="+data[i].id+">"+data[i].comTypeName+"</option>";

                    }

                }

                $("#commodityType").html(str);

            },

            error:function(){

                alert("出错！")

            }

        })

    }

    function del(id) {

        alert(id+"删除")

    }

    function succ() {

       $.ajax({

            type:"post",

            url:"${pageContext.request.contextPath}/updateById",

            dataType:"json",

            data:$("#changMessage").serialize(),

            success:function(data){

                if(data){

                    alert("修改成功")

                    window.location.reload()

                }else{

                    alert("修改失败")

                }

            },

            error:function(){

                alert("出错003！")

            }

        })

    }

</script>

</body>

</html>

　　　希望对大家有用，有问题记得反馈哦！

BootStrap简单table的更多相关文章

Bootstrap Blazor Table 组件（二）
原文链接:https://www.cnblogs.com/ysmc/p/16128206.html 很多小伙伴在使用 Bootstrap Blazor Table组件的时候,都会有这样的一个需求: 我 ...
bootstrap中table的colspan不起作用
bootstrap中table的colspan不起作用,即在不指定宽度的条件下,各个td宽度不符合colspan指定的宽度. 添加table0layout:fixed后显示正常. table{ tab ...
基于Bootstrap简单实用的tags标签插件
http://www.htmleaf.com/jQuery/ jQuery之家自由分享jQuery.html5和css3的插件库基于Bootstrap简单实用的tags标签插件
bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
[转]bootstrap的table插件动态加载表头
原文地址:https://blog.csdn.net/abubu123/article/details/78060321 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫每个列表 ...
【BootStrap】Table的基本使用
一.前言新年新气象,转眼今年就28了,不知道今年能不能把妹成功呢?哈哈哈!上班第一天,部门Web技术主管给每个同事都发了红包鼓励大家今年加油,我作为新转入部门员工不能给团队掉链子,要加 ...
Bootstrap简单入门
Bootstrap简单入门 BootStrap基本模板 <!DOCTYPE html> <html> <head> <meta charset="U ...
Bootstrap Data Table简单使用（动态加载数据）
直接上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
BootStrap的table表格，栅格系统，form表单的样式
BootStrap BootStrap的简介 1. 什么是Bootstrap 由两个前端设计师开发的一个前端的框架(Html,css,js) 简化了程序员写css的代码 2. 为什么使用B ...

随机推荐

iview form表单数值类型校验「iview自定义form表单校验器」
摘录iview表单验证 Form 组件基于 sync-validator 实现的数据验证,给 Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可. ...
selenium webdriver使用的一些小技巧（持续更新中）
1.开始结束时间只支持控件选择,不支持填写,怎么办? 如下图: 解决方案: 用javaScipt把开始结束时间的reaonly属性去除,然后再输入,举例如下 /** * 输入开始日期 ...
Python面向对象 | 类属性
property property是一个装饰器函数,可以将一个方法伪装成属性,调用的时候可以不用加().@property被装饰的方法,是不能传参数的,因为它伪装成属性了. 装饰器的使用:在要装饰的函 ...
Pandas | 10 排序
Pandas有两种排序方式,它们分别是 - 按标签按实际值 import pandas as pd import numpy as np df=pd.DataFrame(np.random.rand ...
使用uwsgi+nginx部署项目
Uwsgi:部署web应用程序 Nginx:反向代理,静态服务器 1.修改uwsgi配置文件>nginx反向代理[nginx接收请求->传递->[uwsgi] http=.. --& ...
django -- ORM实现图书增删改查
表结构设计上篇我们实现了出版社的增删改查,出版社数据表有两个字段id和name,那图书的表结构怎么设计呢?图书也要有一个主键id,还要有一个名称title,是哪个出版社的,要有个字段press和Pr ...
Nuxt.js中scss公用文件(不使用官方插件style-resources)
项目多多少少应该都遇到有公用文件这种情况,比如说偶尔某一天产品来找你,能不能明天把网站的这个颜色给我改下?第二天再来给我换回来? 如果再css2.x时代,不使用css预处理技术,这一改只能“查找替换” ...
安卓设备连接Mac的简单方法
mac设备是苹果出品的桌面系统,以高冷而闻名,不同于我们平常使用的windows系统,mac系统对软件硬件的兼容性很差,将iOS 设备(iPhone.iPad和iPod)连接至Mac是一件很简单的事, ...
javascript 检测浏览类型和版本
废话不多说了,直接就上代码吧,因为IE11以后的版本和之前的不一样了,所以有些关键字还需要注意.这里面判断IE的时候需要多注意.function getBrowserInfo(){ var ua = ...
DDD框架基础知识
DDD框架基础知识参考: https://www.cnblogs.com/zhili/p/OnlineStorewithDDD.html(领域驱动设计,分层架构) https://www.cnblo ...

BootStrap简单table

BootStrap简单table的更多相关文章

随机推荐

热门专题