有关表格的前端页面

最新推荐文章于 2024-05-11 14:22:31 发布
想当大叔的段子手
最新推荐文章于 2024-05-11 14:22:31 发布
阅读量1.5k
点赞数
分类专栏：前台jsp
本文链接：https://blog.csdn.net/qq_29720781/article/details/54573486
版权
前台jsp 专栏收录该内容
3 篇文章 0 订阅
订阅专栏
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/views/resource.jsp"%>
<style type="text/css">
    td .form-control{
        border: none;
            transition: none;
    }
    td .form-control:focus{
        border-bottom: 1px solid #e7ecf1;
    }
    .height-table{
        overflow:auto;
    }
    #KpiTable, #KpiTable tr, #KpiTable tr>td ,#KpiTable tr>th {
        border:solid 1px #000;
        text-align:left;
    }
    #KpiTable tr>td ,#KpiTable tr>th{
        padding:6px;
        white-space: nowrap;
        vertical-align: middle
    }
    #KpiTable .form-control{
        padding: 0;
        height: 20px;
        text-align:center;
    }
    .absolute{
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
    }
    .table-title{
        position: relative;
        height: 35px;
        margin-bottom: 15px;
    }
    .table-title .form-control{
        text-align:center;
    }
    .table-title h4{
        text-align: center;
        height: 35px;
        line-height: 35px;
    }
</style>
<body style="background-color: transparent;">
    <div class="row no-margin">
        <div id="leftlist" class="page-content page-content-inner margin-control left-container col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <div class="config-title">
                表单列表
                <button id="addform" type="button" class="btn btn-default">
                    <i class="glyphicon glyphicon-plus"></i>
                </button>

            </div>
            <div id="" class="form-group ">
                <table class="table " id="tableform" data-toggle="table">
                    <thead>
                        <tr>
                            <th data-field='select' data-checkbox="true"></th>
                            <th data-field="year" data-formatter="yearFormatter">年度医院感染管理质量控制指标</th>
                        </tr>
                    </thead>

                </table>
            </div>
            <div class="form-group hidden active">
                <div class="config-none-center" id="nonetable">
                    <div class="img-none"></div>
                    <div class="text-none">
                        <p>当前状态为空</p>
                    </div>
                </div>
            </div>
        </div>
        <div id="internal_form_right_container" class="right-container col-xs-8 col-sm-8 col-md-8 col-lg-8 ">
            <div>
                <p class="margin-control config-title" id="add" style="display: none">
                    新增配置
                    <button id="export" type="button" class="btn btn-control">
                        <i class="fa fa-file-excel-o"></i><span>&nbsp;&nbsp;导出&nbsp;&nbsp;</span>
                    </button>
                    <button id="save" type="button" class="btn btn-control">
                        <i class="fa fa-save"></i><span id="addsave">&nbsp;&nbsp;保存&nbsp;&nbsp;</span>
                    </button>
                </p>
                <p class="margin-control config-title" id="message" style="display: none">
                    详细信息
                    <button id="exportBtn" type="button" class="btn btn-control">
                        <i class="fa fa-file-excel-o"></i><span>&nbsp;&nbsp;导出&nbsp;&nbsp;</span>
                    </button>
                    <button id="modifyMessage" type="button" class="btn btn-control">
                        <i class="fa fa-save"></i><span id="modifysave">&nbsp;&nbsp;保存&nbsp;&nbsp;</span>
                    </button>
                </p>
            </div>
            <div class="form-body margin-control" id='listform'>
                <div class="table-title">
                    <div class="absolute">
                        <div class="input-group">
                          <input class="form-control" type="text" id="year" name="year" placeholder="请输入年份">
                          <div class="input-group-addon" for="year">年</div>
                        </div>
                    </div>
                    <h4>医院感染管理质量控制指标</h4>
                </div>
                <div class="hide">
                    id <input type="text" id="id" name="id">
                </div>
                <div class="table-container height-table">
                    <table class="table" id="KpiTable">
                        <thead>
                            <tr class="table-header">
                                <th>编号</th>
                                <th colspan="2">指示名称</th>
                                <th>检测值</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td rowspan="2" class="table-index">1</td>
                                <td rowspan="2" >医院感染发病率</td>
                                <td>医院感染新发病例（例次）数</td>
                                <td><input class="form-control" type="text" id="col1"></td>
                            </tr>
                            <tr>
                                <td>同期住院患者数</td>
                                <td><input class="form-control" type="text" id="col2"></td>
                            </tr>
                            <tr>
                                <td rowspan="2" class="table-index">2</td>
                                <td rowspan="2">医院感染现患（例次）率</td>
                                <td>确定时段或时点住院患者医中院感染患者例数</td>
                                <td><input class="form-control" type="text" id="col3"></td>
                            </tr>
                            <tr>
                                <td>同期住院患者总数</td>
                                <td><input class="form-control" type="text" id="col4"></td>
                            </tr>
                            <tr>
                                <td rowspan="2" class="table-index">3</td>
                                <td rowspan="2">医院感染病例漏报率</td>
                                <td>应当报告而未报告的医院感染病例数</td>
                                <td><input class="form-control" type="text" id="col5"></td>
                            </tr>
                            <tr>
                                <td>同期应报告医院感染病例总数</td>
                                <td><input class="form-control" type="text" id="col6"></td>
                            </tr>
                            <tr>
                                <td rowspan="2" class="table-index">4</td>
                                <td rowspan="2">多重耐药菌感染发病率</td>
                                <td>多重耐药菌感染发病率</td>
                                <td ><input class="form-control" type="text" id="col7"></td>
                            </tr>
                            <tr>

                                <td>同期住院患者总数</td>
                                <td><input class="form-control" type="text" id="col8"></td>
                            </tr>
                            <tr>
                                <td rowspan="2" class="table-index">5</td>
                                <td rowspan="2">医院感染现患（例次）率</td>
                                <td>确定时段或时点住院患者医中院感染患者例数</td>
                                <td><input class="form-control" type="text" id="col9"></td>
                            </tr>
                            <tr>
                                <td>同期住院患者总数</td>
                                <td><input class="form-control" type="text" id="col10"></td>
                            </tr>
                            <tr>
                                <td rowspan="2" class="table-index">6</td>
                                <td rowspan="2">医务人员手卫生依从率</td>
                                <td>受调查的医务人员实际实施手卫生次数</td>
                                <td><input class="form-control" type="text" id="col11"></td>
                            </tr>
                            <tr>
                                <td>同期住院患者总数</td>
                                <td><input class="form-control" type="text" id="col12"></td>
                            </tr>
                            <tr>
                                <td rowspan="2" class="table-index">7</td>
                                <td rowspan="2">住院患者抗菌药物使用率</td>
                                <td>住院患者中使用抗菌药物（全身给药）患者数</td>
                                <td><input class="form-control" type="text" id="col13"></td>
                            </tr>
                            <tr>
                                <td>同期住院患者总数</td>
                                <td><input class="form-control" type="text" id="col14"></td>
                            </tr>
                            <tr>
                                <td rowspan="2" class="table-index">8</td>
                                <td rowspan="2">抗菌药物治疗前病原学送检率</td>
                                <td>使用抗菌药物前病原学检验标本送检病例数</td>
                                <td><input class="form-control" type="text" id="col15"></td>
                            </tr>
                            <tr>
                                <td>同期住院患者总数</td>
                                <td><input class="form-control" type="text" id="col16"></td>
                            </tr>
                            <tr>
                                <td rowspan="2" class="table-index">9</td>
                                <td rowspan="2">I类切口手术部位感染率</td>
                                <td>发生I类切口手术部位感染病例数</td>
                                <td><input class="form-control" type="text" id="col17"></td>
                            </tr>
                            <tr>
                                <td>同期住院患者总数</td>
                                <td><input class="form-control" type="text" id="col18"></td>
                            </tr>
                            <tr>
                                <td rowspan="2" class="table-index">10</td>
                                <td rowspan="2">I类切口手术抗菌药物预防使用率</td>
                                <td>I类切口手术预防使用抗菌药物的患者数</td>
                                <td><input class="form-control" type="text" id="col19"></td>
                            </tr>
                            <tr>
                                <td>同期住院患者总数</td>
                                <td><input class="form-control" type="text" id="col20"></td>
                            </tr>
                            <tr>
                                <td rowspan="2" class="table-index">11</td>
                                <td rowspan="2">血管内导管相关血流感染发病率</td>
                                <td>血管内导管相关血流感染例次数</td>
                                <td><input class="form-control" type="text" id="col21"></td>
                            </tr>
                            <tr>
                                <td>同期住院患者总数</td>
                                <td><input class="form-control" type="text" id="col22"></td>
                            </tr>
                        </tbody>
                    </table>
                    <div style="font-size:12px">注：如无住院人数，可用出院人数代替。从2016年开始需要用住院人数</div>
                </div>
            </div>
        </div>
        <div id="" class="right-container col-xs-8 col-sm-8 col-md-8 col-lg-8 hidden active">
            <div class="config-none-center" id="nonelist">
                <div class="img-none"></div>
                <div class="text-none"></div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var i = 0; //控制初始化行数
    var a = 5; //控制具体进行修改或者删除或者增加之中的哪个操作

    var $table = $('#tableform');
//  var height = $(window).height()-138;
//  console.log(height);
//  $('.height-table').height(height+'px');

    function nonedisplay() { //显示为空状态
        $('#nonelist').show();
        $('#nonetable').show();
    };

    function nonedisappear() { //隐藏为空状态
        $('#nonelist').hide();
        $('#nonetable').hide();
    }

    function displayTopMessage() { //显示右上角详细信息
        $('#message').show();
    }

    function disapperTopMessage() { //隐藏右上角详细信息
        $('#message').hide();
    }

    function displayTopAdd() { //显示右上角新增配置
        $('#add').show();
    }

    function disapperTopAdd() { //隐藏右上角新增配置
        $('#add').hide();
    }

    function disapperListForm() { //隐藏右边列表
        $('#listform').hide();
    }

    function displayListForm() { //显示右边列表
        $('#listform').show();
    }

    function disapperTable() { //隐藏左边的table
        $('#tableform').hide();
    }

    function displayTable() { //显示左边的table
        $('#tableform').show();
    }

    function setdata(data) { //得到左边table里边的值向右边的list进行赋值
        console.log(data)
        $('#id').val(data.rows[i].id);
        $('#year').val(data.rows[i].year);
        $('#col1').val(data.rows[i].col1)
        $('#col2').val(data.rows[i].col2);
        $('#col3').val(data.rows[i].col3);
        $('#col4').val(data.rows[i].col4);
        $('#col5').val(data.rows[i].col5);
        $('#col6').val(data.rows[i].col6);
        $('#col7').val(data.rows[i].col7);
        $('#col8').val(data.rows[i].col8);
        $('#col9').val(data.rows[i].col9);
        $('#col10').val(data.rows[i].col10);
        $('#col11').val(data.rows[i].col11);
        $('#col12').val(data.rows[i].col12);
        $('#col13').val(data.rows[i].col13);
        $('#col14').val(data.rows[i].col14);
        $('#col15').val(data.rows[i].col15);
        $('#col16').val(data.rows[i].col16);
        $('#col17').val(data.rows[i].col17);
        $('#col18').val(data.rows[i].col18);
        $('#col19').val(data.rows[i].col19);
        $('#col20').val(data.rows[i].col20);
        $('#col21').val(data.rows[i].col21);
        $('#col22').val(data.rows[i].col22);

    }

    function initListform() {
        $('#year').val("");
        $('#col1').val("");
        $('#col2').val("");
        $('#col3').val("");
        $('#col4').val("");
        $('#col5').val("");
        $('#col6').val("");
        $('#col7').val("");
        $('#col8').val("");
        $('#col9').val("");
        $('#col10').val("");
        $('#col11').val("");
        $('#col12').val("");
        $('#col13').val("");
        $('#col14').val("");
        $('#col15').val("");
        $('#col16').val("");
        $('#col17').val("");
        $('#col18').val("");
        $('#col19').val("");
        $('#col20').val("");
        $('#col21').val("");
        $('#col22').val("");
    }

    function yearFormatter(value, row) {

        return value + '年医院感染管理质量控制指标';
    }

    function getdata() {
        return {
            year: $('#year').val(),
            col1: $('#col1').val(),
            col2: $('#col2').val(),
            col3: $('#col3').val(),
            col4: $('#col4').val(),
            col5: $('#col5').val(),
            col6: $('#col6').val(),
            col7: $('#col7').val(),
            col8: $('#col8').val(),
            col9: $('#col9').val(),
            col10: $('#col10').val(),
            col11: $('#col11').val(),
            col12: $('#col12').val(),
            col13: $('#col13').val(),
            col14: $('#col14').val(),
            col15: $('#col15').val(),
            col16: $('#col16').val(),
            col17: $('#col17').val(),
            col18: $('#col18').val(),
            col19: $('#col19').val(),
            col20: $('#col20').val(),
            col21: $('#col21').val(),
            col22: $('#col22').val()

        }
    }

    function initTable() {

        $('#tableform').bootstrapTable('destroy');
        $("#tableform")
            .bootstrapTable({
                method: "get",
                pagination: true, //分页  
                pageNumber: 1, //首页页码  
                pageSize: 10, //页面数据条数  

                sidePagination: "server", //设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置 服务器数据地址（url）或者重写ajax方法 
                // queryParamsType : "limit",   //设置为 'limit' 则会发送符合 RESTFul 格式的参数.
                striped: false,
                url: "<%=request.getContextPath()%>/form/list.do",

                onClickRow: function(row, tr) {
                    tr.addClass('checkedTr');
                    tr.siblings().removeClass('checkedTr');
                    $('#year').attr("disabled", true);
                    displayTopMessage();
                    disapperTopAdd();
                    i = tr[0].rowIndex - 1;
                    $('#id').val(row.id);
                    $('#year').val(row.year);
                    $('#col1').val(row.col1)
                    $('#col2').val(row.col2);
                    $('#col3').val(row.col3);
                    $('#col4').val(row.col4);
                    $('#col5').val(row.col5);
                    $('#col6').val(row.col6);
                    $('#col7').val(row.col7);
                    $('#col8').val(row.col8);
                    $('#col9').val(row.col9);
                    $('#col10').val(row.col10);
                    $('#col11').val(row.col11);
                    $('#col12').val(row.col12);
                    $('#col13').val(row.col13);
                    $('#col14').val(row.col14);
                    $('#col15').val(row.col15);
                    $('#col16').val(row.col16);
                    $('#col17').val(row.col17);
                    $('#col18').val(row.col18);
                    $('#col19').val(row.col19);
                    $('#col20').val(row.col20);
                    $('#col21').val(row.col21);
                    $('#col22').val(row.col22);

                },
                onLoadSuccess: function(data) {
                    console.log(data)
                    if(data.rows.length == 0) {
                        $('#nonetable').show();
                        $('#nonelist').hide();
                        disapperTable();
                        displayTopMessage();
                    } else {

                        nonedisappear();
                        displayTable();
                        if(a == 0) { //添加刷新时                                            
                            disapperTopAdd();
                            displayTopMessage();
                            setdata(data);

                        } else if(a == 3) { //修改刷新时(也就是下边的$table.bootstrapTable("refresh", a = 3);这个方法执行时)
                            displayTopMessage();
                            setdata(data);
                        } else { //刚进来页面    
                            disapperTopAdd();
                            displayTopMessage();
                            setdata(data);

                        }

                    }

                }
            });
        $("#tableform").removeClass('table-hover');
    }

    $(function() {
        initTable();
        $('#year').attr("disabled", true);

        $('#addform').click(function() {
            displayListForm();
            displayTopAdd();
            disapperTopMessage();
            $('#nonelist').hide();
            $('#year').removeAttr("disabled");
            initListform();

        });
        $('#addsave').click(function() {
            var url = "${pageContext.request.contextPath}/form/insert.do";
            var option = getdata();
            etl.ajaxJson(url, option, function(data) {
                $table.bootstrapTable("refresh", a = 0);
            });
        });
        $('#exportBtn').click(function(){
            var url = "${pageContext.request.contextPath}/export.do?form=";
            var option = getdata();
            var json = JSON.stringify(option);
            window.location.href =url + json;
        });
        $('#export').click(function(){
            var url = "${pageContext.request.contextPath}/export.do?form=";
            var option = getdata();
            var json = JSON.stringify(option);
            window.location.href =url + json;
        });
        $('#modifysave')
            //根据这个id得到修改这个按钮的值
            .click(function() {

                var url = "${pageContext.request.contextPath}/form/update.do";
                id = $('#id').val();
                var data = getdata();
                data.id = id;
                var option = data;
                etl.ajaxJson(url, option, function(data) {

                    $table.bootstrapTable("refresh", a = 3);

                });
            });

    })
</script>
这里写图片描述
想当大叔的段子手
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有关表格的前端页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@include file="/views/resource.jsp"%><style type="text/css"> td .form-control{ border: none;
复制链接

扫一扫
专栏目录