精华内容
下载资源
问答
  • jsp表格table模板
    千次阅读
    2013-12-06 00:01:14

            上文《JSP表格模板升级(3)--可变列数的表格模板》已经完成了一个功能几近完善的表格模板,直接可以用于大部分二维表格的显示需求。本文中我们将改变表格底层的实现,将table标签替换为更加灵活的div+css。关于两种实现形式孰优孰劣目前尚无绝对的说法,而灵活性方面,显然是div+css的方式更胜一筹,例如本文将实现一个固定表头和表尾的表格模板。

            数据结构部分依然不变,主要的变化是展示层的,jsp中表格的定义如下所示,其中list存储类型为KeyValueListBean(定义见上文)的一组数据:

    <div class="myTable">
        <div>
            <div class="tr">
                <div class="td th"> </div>
                <c:forEach items="${list[0].value}" var="ch">
                    <div class="td th">${ch}</div>
                </c:forEach>
            </div>
        </div>
       
        <div class="body">
            <c:forEach items="${list}" var="row"varStatus="status" begin="1"end="${fn:length(list)-2}">
                <div class="tr ${status.index%2== 0?'odd':'even'}">
                    <div class="td">${row.key}</div>
                    <c:forEach items="${row.value}" var="col">
                        <div class="td">${col}</div>
                    </c:forEach>
                </div>
            </c:forEach>
        </div>
       
        <div>
            <c:forEach items="${list}" var="row"begin="${fn:length(list)-1}">
                <div class="tr">
                    <div class="td tb">${row.key}</div>
                    <c:forEach items="${row.value}" var="col">
                        <div class="td tb">${col}</div>
                    </c:forEach>
                </div>
            </c:forEach>
        </div>
    </div>

            为便于理解,这里给出最终生成的表格的div结构示意:

    <div class="myTable">
        <div><!--表头部分-->
            <div class="tr">
                <div class="td th"> </div>
                <div class="td th">表头1</div>
                <div class="td th">表头2</div>
                <div class="td th">表头3</div>
                …………
            </div>
        </div>
       
        <div class="body"><!--表格主体部分-->
            <div class="tr odd>
                <div class="td">行1</div>
                <div class="td">数据1.1</div>
                <div class="td">数据1.2</div>
                <div class="td">数据1.3</div>
            </div>
            <div class="tr even>
                <div class="td">行2</div>
                <div class="td">数据2.1</div>
                <div class="td">数据2.2</div>
                <div class="td">数据2.3</div>
            </div>
            ……………
        </div>
       
        <div><!--表尾部分-->
            <div class="tr">
                <div class="td tb">总计</div>
                <div class="td tb">表尾1</div>
                <div class="td tb">表尾2</div>
                <div class="td tb">表尾3</div>
            </div>
        </div>
    </div>

            这是对一个表格各个部分的简单组合,完全依据其视觉结构来定义,类名参照table那一套标签的名字,然后定义相应的css样式:

        .myTable {
            width: auto;
            border: 2px solid #eee;
        }
       
        .myTable div{
            text-align: center;
            margin-right: 1px;
            margin-bottom: 1px;
            line-height: 25px;
            height:25px;
            font-size: 12px;
        }
        /*固定高度的关键:表格主体部分设定最大高度或固定高度,并指定overflow-y属性为自动*/
        .myTable div.body{
            overflow-y:auto;
            height:auto;
            max-height:400px;
        }
        /*表格元素浮动,并指定一定的宽度*/
        .myTable div.td{
            float: left;
            width: 65px;
        }
        /*隔行变色*/
        .myTable div.odd.td{
            background:#E9EDF4;
        }
        .myTable div.even.td{
            background:#D0D8E8;
        }
        /*表头表尾的样式*/
        .myTable div.tb,.myTable div.th{
            background:#4F81BD;
            font-weight:bold;
        }
       
        .myTable div.tb {
            color:white;
        }
       
        /*防止滚动条影响布局*/
        .myTable div.tr{
            width:100%;
            margin-right:20px;
        }
       
        /*调整每行第一个元素的宽度*/
        .myTable div.trdiv:first-child {
            width:100px;
        }
    

            通过上述样式,我们就定义了一个表格内容最高400像素的表格模板,超过400像素之后表头和表尾行固定,表格主体内容可以滚动。当然我们可以将.body的样式中,max-height换为height,这样就得到了一个固定高度,固定表头和表尾的表格,不过笔者认为相较而言,上述示例代码中的样式更加实用。


            本文完成的jsp表格模板的完整代码如下:

    <%@ page language="java"contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core"prefix="c" %>
    <%@ taglib prefix="fn"uri="http://java.sun.com/jsp/jstl/functions"%>
     
    <%@ page import="com.reports.util.ReportFunctions"%>
    <%@ page import="com.reports.util.SpringContextHolder"%>
    <%@ page import="com.reports.charts.bean.KeyValueListBean"%>
    <%@ page import="java.lang.reflect.Method"%>
    <%@ page import="java.util.*"%>
    <style type="text/css">
       
        .myTable {
            width: auto;
            border: 2px solid #eee;
        }
       
        .myTable div{
            text-align: center;
            margin-right: 1px;
            margin-bottom: 1px;
            line-height: 25px;
            height:25px;
            font-size: 12px;
        }
        .myTable div.body{
            overflow-y:auto;
            height:auto;
            max-height:400px;
        }
        .myTable div.td{
            float: left;
            width: 65px;
        }
       
        .myTable div.odd.td{
            background:#E9EDF4;
        }
        .myTable div.even.td{
            background:#D0D8E8;
        }
        .myTable div.tb, .myTable div.th{
            background:#4F81BD;
            font-weight:bold;
        }
       
        .myTable div.tb {
            color:white;
     
        }
       
        /*防止滚动条影响布局*/
        .myTable div.tr{
            width:100%;
            margin-right:20px;
        }
       
        .myTable div.trdiv:first-child {
            width:100px;
        }
    </style>
    <%
        Stringzoneid = request.getParameter("zoneid");
        Mapm = request.getParameterMap();
        System.out.println("the request map is:"+ m);
       
        ReportFunctionsreportF = SpringContextHolder.getBean(ReportFunctions.class);
        Methodmethod = null;
        List<KeyValueListBean>list = null;
        if(null != zoneid){
            method= reportF.getClass().getMethod(request.getParameter("method"), String.class, List.class);
           
            List<String>lc = newArrayList<String>();
            String[]ac = request.getParameter("categories").split(",");
            for(inti=0;i<ac.length;i++){
                lc.add(i,ac[i]);
            }
            list= (List<KeyValueListBean>)method.invoke(reportF, zoneid, lc);
        }else{
            method= reportF.getClass().getMethod(request.getParameter("method"));//param 'method' must be given
            list= (List<KeyValueListBean>)method.invoke(reportF);
        }
       
        /*自测数据
        List<KeyValueListBean>list = new ArrayList<KeyValueListBean>();
        List<String>tl = new ArrayList<String>();
        tl.add("elemenet");
        tl.add("entest");
        tl.add("hahah");
        KeyValueListBeantemp = new KeyValueListBean("test", tl);
        list.add(temp);
        list.add(temp);
        */
        request.setAttribute("list",  list);
       
    %>
     
    <div class="myTable">
        <div>
            <div class="tr">
                <div class="td th"> </div>
                <c:forEach items="${list[0].value}" var="ch">
                    <div class="td th">${ch}</div>
                </c:forEach>
            </div>
        </div>
       
        <div class="body">
            <c:forEach items="${list}" var="row"varStatus="status" begin="1"end="${fn:length(list)-2}">
                <div class="tr ${status.index%2== 0?'odd':'even'}">
                    <div class="td">${row.key}</div>
                    <c:forEach items="${row.value}" var="col">
                        <div class="td">${col}</div>
                    </c:forEach>
                </div>
            </c:forEach>
        </div>
       
        <div>
            <c:forEach items="${list}" var="row"begin="${fn:length(list)-1}">
                <div class="tr">
                    <div class="td tb">${row.key}</div>
                    <c:forEach items="${row.value}" var="col">
                        <div class="td tb">${col}</div>
                    </c:forEach>
                </div>
            </c:forEach>
        </div>
    </div>


    更多相关内容
  • 这是个是全部的jsp 页面: <%@page pageEncoding=UTF-8 contentType=text/html; charset=UTF-8 %> <html> <link rel=icon href=../../../static/images/favicon.png rel=external nofollow > &...
  • IDEA中的JSP表格、表单-html基础(2021.11.28.evening)

    1.表格

    table中的属性border表示表格边框的宽度,默认值为0   cellspacing表示表格的间距

            tr表示表格中的一行

                    td表示一个特殊的单元格

     2.表单

    from(属性有name---设置一个唯一的名称以标识该表单,action属性----接受表单内容的程序文件的URL,method属性---定义浏览器将表单数据传递到服务器的方式,只能是get或post)

            table 

                    tr

                            td(input标记必须有两个属性:1.type属性,决定这个input标记的含义,取值----text文本框,password---密码框,radio---单选框,checkbox---复选框,submit---提交按钮,reset--重置按钮,image图像按钮,file--文件域,hidden--隐藏域 。一般只有文本框和密码框才需要用到value属性      2.name属性,定义该表单元素的名称,)

     

    3.submit与button有着本质区别

    submit会自动提交表单

    button要自己设置后台操作

     

    4.select和option标记

    select标记表示下拉框或列表框,列表框中的每一项由option标记定义

    5.textareea----多行文本域标记

    属性:1.cols---宽度  rows---高度(行数)

     

     6.什么是html?----就是一堆具有特定含义的标签

    什么是css?----就是去美化html

    什么是js?---动态操作html和css

     

    展开全文
  • jsp页面table表格超方便的(仿)编辑操作(js控制).rar 可以很方便的让table表格有普通只读状态转入编辑状态。很爽的。
  • JSP创建一个表格模板 .

    万次阅读 2013-12-03 22:30:04
    考虑到复用性,笔者用jsp编写了一个表格模板,可以从request中获取List封装的数据,然后通过JSTL结合EL表达式填充到模板。最后完成的jsp文件可以作为一个单独的模块,嵌入到任意其它jsp页面需要的位置。    首先...
    项目中要用到一些展示信息的表格,表头不固定,表格内容是即时从后台取的;考虑到复用性,笔者用jsp编写了一个表格模板,可以从request中获取List封装的数据,然后通过JSTL结合EL表达式填充到模板。最后完成的jsp文件可以作为一个单独的模块,嵌入到任意其它jsp页面需要的位置。

     

            首先是规划一下表格的样式:

            为简单起见,此处使用html的table等标签构建了一个简单的表格,表格背景隔行变色,整体颜色为蓝色系。表格定义部分的核心代码如下:

    1. <table style="width:100%;border:1px white solid">  
    2.     <tr bgcolor="#4F81BD"style="color: #fff;">  
    3.         <th style="text-align: center"><%=columns[0]%></th>  
    4.         <th style="text-align: center"><%=columns[1]%></th>  
    5.     </tr>  
    6.     <c:forEach items="${list}" var="row"varStatus="status">  
    7.         <tr bgcolor="${status.index%2 == 0?'#D0D8E8':'#E9EDF4'}">  
    8.             <td align="center">${status.current.key}</td>  
    9.             <td align="center">${row.value}</td>  
    10.         </tr>  
    11.     </c:forEach>  
    12. </table>  
    <table style="width:100%;border:1px white solid">
        <tr bgcolor="#4F81BD"style="color: #fff;">
            <th style="text-align: center"><%=columns[0]%></th>
            <th style="text-align: center"><%=columns[1]%></th>
        </tr>
        <c:forEach items="${list}" var="row"varStatus="status">
            <tr bgcolor="${status.index%2 == 0?'#D0D8E8':'#E9EDF4'}">
                <td align="center">${status.current.key}</td>
                <td align="center">${row.value}</td>
            </tr>
        </c:forEach>
    </table>

                 此表格只有两列,可用于显示包含一组“键值对”的数据。代码中的columns是jsp页面中定义的一个java字符串数组,保存两列列头的值,例如:“设备类型”、“数量”。数据行使用JSTL的forEach标签来遍历各条数据,其中list变量是存放在request中的List类型的对象,List中存放了一组包含“键值对”的数据实体,笔者所用的数据实体是一个简单的Bean:

    1. package com.reports.charts.bean;  
    2.    
    3. public classKeyValueBean {  
    4.     private String key;  
    5.     private String value;  
    6.      
    7.     public KeyValueBean() {  
    8.     }  
    9.     public KeyValueBean(String key, String value) {  
    10.         this.key = key;  
    11.         this.value = value;  
    12.     }  
    13.      
    14.     public String getKey() {  
    15.         return key;  
    16.     }  
    17.     public void setKey(String key) {  
    18.         this.key = key;  
    19.     }  
    20.     public String getValue() {  
    21.         return value;  
    22.     }  
    23.     public void setValue(String value){  
    24.         this.value = value;  
    25.     }  
    26. }  
    package com.reports.charts.bean;
     
    public classKeyValueBean {
        private String key;
        private String value;
       
        public KeyValueBean() {
        }
        public KeyValueBean(String key, String value) {
            this.key = key;
            this.value = value;
        }
       
        public String getKey() {
            return key;
        }
        public void setKey(String key) {
            this.key = key;
        }
        public String getValue() {
            return value;
        }
        public void setValue(String value){
            this.value = value;
        }
    }

                 模板中的取值方法用到了EL表达式,例如${list}表示取出request中的list对象。${status.current}和${row}其实指代的是同一个东西,也就是当前遍历的数据行,这里使用两种不同的写法是为了给读者提供更多实现方式的参考。关于EL表达式的详细信息,可参考笔者转发的文章《JSP中的EL表达式详细介绍》。

            接下来的关键就是传递list的值放到request中了。一般J2EE项目中都使用了Struts、SpringMVC等mvc框架,常见的处理流程应该是客户端发送数据请求,Controller接收请求进行处理,取出并生成合适的数据存放到一个List中,然后转发给View,也就是转发给JSP页面来显示。

            然而基于其它的考虑,笔者希望这个jsp页面可以不经过Controller而独立运行,于是就需要将控制层移到jsp代码中;完整的jsp模板定义代码如下:

     

            其中,SpringContextHolder是笔者定义的一个获取Spring管理的其它Bean的工具类,用这个类可以方便地在同一个项目所有运行Java代码的地方使用,详见笔者的:《在JavaWeb应用中获取Spring管理的Bean的方法》。ReportFunctions类是一个业务类,包含了许多具体业务的代码,除了本文的jsp模板中可以使用之外,在项目的其它许多控制类都会用到。或者换句话说,笔者此处是借用了项目中现有的一个业务类,抽象出了一个模板。我们将模板保存一下,例如保存为“_tb2ColParam.jsp”,然后带着参数访问或获取这个jsp即可呈现出一个带样式的表格:“_tb2ColParam.jsp?p=1024&columns=types|nums”。

    1. <%@ page language="java"contentType="text/html; charset=UTF-8"  
    2.     pageEncoding="UTF-8"%>  
    3. <%@ taglib uri="http://java.sun.com/jsp/jstl/core"prefix="c" %>  
    4.    
    5. <%@ page import="com.reports.util.ReportFunctions"%>  
    6. <%@ page import="com.reports.util.SpringContextHolder"%>  
    7. <%@ page import="java.util.*"%>  
    8. <%@ page import="com.reports.charts.bean.KeyValueBean"%>  
    9.    
    10. <%  
    11.     String[]columns = null;  
    12.     try{  
    13.         columns= request.getParameter("columns").split("\\|");  
    14.     }catch(NullPointerExceptione){  
    15.         e.printStackTrace();  
    16.         System.out.println("参数columns未赋值");  
    17.     }  
    18.     if(null == columns){  
    19.         columns= newString[]{"设备种类","数量"};  
    20.     }  
    21.     Stringparam = request.getParameter("p");  
    22.      
    23.     ReportFunctionsreportF = SpringContextHolder.getBean(ReportFunctions.class);  
    24.     List<KeyValueBean>list = null;  
    25.     if(null != param){  
    26.         list= report.method(param);  
    27.     }else{  
    28.         System.out.println(“参数获取失败”);  
    29.     }  
    30.      
    31.     if(0 == list.size()){  
    32.         list.add(new KeyValueBean("暂未统计", "暂无数据"));  
    33.     }  
    34.     request.setAttribute("list", list);  
    35. %>  
    36.    
    37. <table style="width:100%;border:1px white solid">  
    38.     <tr bgcolor="#4F81BD"style="color: #fff;">  
    39.         <th style="text-align: center"><%=columns[0]%></th>  
    40.         <th style="text-align: center"><%=columns[1]%></th>  
    41.     </tr>  
    42.     <c:forEach items="${list}" var="row"varStatus="status">  
    43.         <tr bgcolor="${status.index%2 == 0?'#D0D8E8':'#E9EDF4'}">  
    44.             <td align="center">${status.current.key}</td>  
    45.             <td align="center">${row.value}</td>  
    46.         </tr>  
    47.     </c:forEach>  
    48. </table>  

     

     

    http://blog.csdn.net/neareast/article/details/16993271

     

    http://blog.csdn.net/neareast/article/details/17023907

    JSP表格模板升级(1)-- 用Java反射动态指定方法和参数

    http://blog.csdn.net/neareast/article/details/17033515

    JSP表格模板升级(2)-- 动态加载v.s.自定义标签初始化表格

     

    展开全文
  • 四个好看的table表格样式

    万次阅读 多人点赞 2017-10-24 19:51:35
    1. 单像素边框CSS表格 table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse;...

    1. 单像素边框CSS表格



    <!-- CSS goes in the document HEAD or added to your external stylesheet -->
    <style type="text/css">
    table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
    }
    table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
    }
    table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
    }
    </style>

    <!-- Table goes in the document BODY -->
    <table class="gridtable">
    <tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
    </tr>
    <tr>
    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
    </tr>
    <tr>
    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
    </tr>
    </table>

    2.带背景图的CSS样式表格



    <!-- CSS goes in the document HEAD or added to your external stylesheet -->
    <style type="text/css">
    table.imagetable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
    }
    table.imagetable th {
    background:#b5cfd2 url('cell-blue.jpg');
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #999999;
    }
    table.imagetable td {
    background:#dcddc0 url('cell-grey.jpg');
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #999999;
    }
    </style>

    <!-- Table goes in the document BODY -->
    <table class="imagetable">
    <tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
    </tr>
    <tr>
    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
    </tr>
    <tr>
    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
    </tr>
    </table>

    3.自动换整行颜色的CSS样式表格(需要用到JSP)



    <!-- Javascript goes in the document HEAD -->
    <script type="text/javascript">
    function altRows(id){
    if(document.getElementsByTagName){  
    var table = document.getElementById(id);  
    var rows = table.getElementsByTagName("tr"); 
     
    for(i = 0; i < rows.length; i++){          
    if(i % 2 == 0){
    rows[i].className = "evenrowcolor";
    }else{
    rows[i].className = "oddrowcolor";
    }      
    }
    }
    }

    window.οnlοad=function(){
    altRows('alternatecolor');
    }
    </script>


    <!-- CSS goes in the document HEAD or added to your external stylesheet -->
    <style type="text/css">
    table.altrowstable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #a9c6c9;
    border-collapse: collapse;
    }
    table.altrowstable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
    }
    table.altrowstable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
    }
    .oddrowcolor{
    background-color:#d4e3e5;
    }
    .evenrowcolor{
    background-color:#c3dde0;
    }
    </style>


    <!-- Table goes in the document BODY -->
    <table class="altrowstable" id="alternatecolor">
    <tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
    </tr>
    <tr>
    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
    </tr>
    <tr>
    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
    </tr>
    </tr>
    <tr>
    <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
    </tr>
    <tr>
    <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
    </tr>
    <tr>
    <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
    </tr>
    </table>

    4.鼠标悬停高亮的CSS样式表格 (需要JSP)



    <!-- CSS goes in the document HEAD or added to your external stylesheet -->
    <style type="text/css">
    table.hovertable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
    }
    table.hovertable th {
    background-color:#c3dde0;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
    }
    table.hovertable tr {
    background-color:#d4e3e5;
    }
    table.hovertable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
    }
    </style>

    <!-- Table goes in the document BODY -->
    <table class="hovertable">
    <tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
    </tr>
    <tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';">
    <td>Item 1A</td><td>Item 1B</td><td>Item 1C</td>
    </tr>
    <tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';">
    <td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>
    </tr>
    <tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';">
    <td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>
    </tr>
    <tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';">
    <td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>
    </tr>
    <tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';">
    <td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
    </tr>
    </table>


    展开全文
  • Thymeleaf是一个很好用的模板引擎, 可以完全取代JSP 需求 数据库中有张名为commanders的表存有多个人的信息, 现在通过后台去查询整张表, 返回一个集合, 要求使用thymeleaf动态的把集合内容以表格的形式展示在网页上 ...
  • JSP创建一个表格模板

    万次阅读 2013-11-28 09:04:16
    考虑到复用性,笔者用jsp编写了一个表格模板,可以从request中获取List封装的数据,然后通过JSTL结合EL表达式填充到模板。最后完成的jsp文件可以作为一个单独的模块,嵌入到任意其它jsp页面需要的位置。    首先是...
  • 前文《JSP表格模板升级(1)-- 用Java反射动态指定方法和参数》已经实现了动态指定具体的业务方法,达到了一定的复用性,但现实使用中,一个仅有两列的列表是无法满足大多数显示要求的,于是本文对表格模板进行了...
  • 因为框架自身问题;obj.update();不支持;顾只能重新渲染;表单页面是后台直接返给的;代码中运用了java的字典;...这里前台在渲染数据表格的时候又用到了模板引擎,templet: '<span>{{ d.em...
  • JSP创建一个自己喜欢的表格

    千次阅读 2019-12-09 08:33:11
    加油前端 JSP创建一个自己喜欢的表格 ...考虑到复用性,笔者用jsp编写了一个表格模板,可以从request中获取List封装的数据,然后通过JSTL结合EL表达式填充到模板。最后完成的jsp文件可以作为一个单独的模块,嵌入...
  • 这是个是全部的jsp 页面: <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %> <html> <link rel="icon" href="../../../static/images/favicon.png"> <title>...
  • jsp表格模板(转)

    千次阅读 2014-02-24 14:32:02
    考虑到复用性,笔者用jsp编写了一个表格模板,可以从request中获取List封装的数据,然后通过JSTL结合EL表达式填充到模板。最后完成的jsp文件可以作为一个单独的模块,嵌入到任意其它jsp页面需要的位置。   首先...
  • LayUI是一款免费,开源,轻量级的前端cms框架,适用于企业...之前写一个一个关于数据的table表格显示 并带有分页功能,实现过程遇到了很多问题,现抽空总结一下。首先下载最新版的layui文件:下载完之后引入到自己的...
  • At work I've been tasked with turning a bunch of HTML files into a simple JSP project. 在工作中,我的任务是将一
  • JSP之实现分页查询

    2021-01-08 19:48:22
    目录实现逻辑源码Dao层:Service层WEB层user.jsp 实现逻辑 第一次访问该页面,请求没有任何参数,系统默认展示的是所有数据; Servlet请查询到的数据、当前页数、页条数、总数作为参数请求转发到JSP; 上一页 其他...
  • 上文《用JSP创建一个表格模板》中,我们创建了一个jsp模板。该模板接受两个参数columns和p,分别指定了模板显示的数据列的列头,以及调用业务类方法时使用的参数param。显然这样的模板是无法达到很好的复用性的,...
  • 之前写一个一个关于数据的table表格显示 并带有分页功能,实现过程遇到了很多问题,现抽空总结一下。首先下载最新版的layui文件:下载完之后引入到自己的项目中,放在根目录的下面某一个地方:然后在你要用的jsp页面...
  • Jsp 在这里之前封装了MyBatis的service、serviceImpl,用于交互数据库查询所有User用户信息,在controller层,实现查询所有用户信息,利用Model将信息存储在请求域中,前端利用${requestScope.list}获取请求域中的...
  • 操作列模板: #bar_content 即为下拉多级按钮,也是模板表格js: var elemId = "myCompanyList"; var tableIns = table.render({ elem:'#'+elemId ,url: ctx+'/company/company/queryMy' ,error:admin...
  • layui的表格使用非常简单,layui文档中已经非常详细,下面直接上代码了 1.jsp代码 <div class="demoTable"> <button class="layui-btn" data-type="publish">发布Banner</button> </.....
  • HTML打印表格

    2021-06-16 04:12:04
    篇一:使用jsp实现word、excel格式报表打好文网为大家准备了关于HTML长表格打印范文,好文网里面收集了五十多篇关于好HTML长表格打印好文,希望可以帮助大家。更多关于HTML长表格打印内容请关注好文网篇一:制作一...
  • /*复制模板表格,并插入到指定位置,参数true,表示CSS和事件也克隆 */ $("#temp_table #temp_tr").clone(true).insertAfter("#is_header");  +
  • charset=utf-8" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> (); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request....
  • layui table 表格模板按钮实例 这是个是全部的jsp 页面: ; charset=UTF-8& ... LayUI table表格控件 如何显示 对象中的属性(针对Mybatis的级联查询--一对一情况) 1.entity如下: 2.Mybatis的Mapper.xml文件如下
  • 当点击按钮时,从后端获取数据,并通过表格显示在页面上。创建SpringBoot项目 ,添加Spring Web依赖。创建Controller : 注:这里加上了 注解,否则会因为同源策略导致浏览器无法接收数据,详见我另一篇文档。运行...
  • bootstrap-table:1. 数据渲染与分页2. 列表数据导出后台接口返回数据格式为: 1. 数据渲染与分页 第一次使用bootstrap-table,感觉就是简洁,真的简洁,接口返回json数据,前端引入对应的js,然后js处理下json数据...
  • 在Java编程中,如何向Word文档中添加表格?注意:需要访问网址:http://poi.apache.org/download.html , 下载一个Apache POI软件包。这里下载最新版本:poi-bin-3.17-20170915.tar.gz解压并将全部.jar文件导入。...
  • 吐槽今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头。这个需求在js里用Juicer模板很好做...
  • JSP分页显示数据

    万次阅读 多人点赞 2017-01-20 16:35:09
    最近在做一个小程序,用到了JSP的分页。虽然只是最简单的分页,但是还是花了我不少时间。这看似简单的功能,实现起来还是稍微有点麻烦。实现分页功能,需要知道数据的总个数,每页应该有多少条数据,以及当前页码。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,127
精华内容 1,650
关键字:

jsp表格table模板

友情链接: pro2.rar