手把手教你在springMVC中不用框架写表格

最新推荐文章于 2022-10-17 18:27:06 发布

web小菜鸟ing

最新推荐文章于 2022-10-17 18:27:06 发布

阅读量5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Java Web原创教程文章标签： java web modal table spring mvc bootstrap

本文链接：https://blog.youkuaiyun.com/wuhawang/article/details/52188934

本文介绍了如何在SpringMVC环境中不依赖框架手动创建表格功能，包括与后台交互、分页、指定页数、增删改查等。通过简单的SpringMVC+Ajax实现，详细讲解了各个功能的实现细节，如使用Ajax请求处理查找、上下页、指定页和添加、修改、删除数据的操作。虽然作者是前端新手，但提供了完整的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<个人原创,转载请注明出处>

因为项目需要大量的表格,而leader又不允许使用已有的例如DataTables之类的表格框架,所以需要我自己手写一个表格控件

其实现的功能主要有

1.和后台controller交互,取数据,根据取得数据数量在页面显示数据

3.指定某一页

4.显示当前数据总数,显示的个数

5.修改数据

6.删除数据

7.项目主要使用的技术就是简单的springMVC+Ajax刷新

以上因为是我写的,所以可能在性能方面还有需要优化,基本功能暂时就想到这么多了,下面开始进入正题,最终实现的效果如下所示

第一步,因为我们使用了webservice,所以webservice提供了一系列接口,这里不一一介绍,后面使用到的时候再给大家说

上面正式打开webservice,其中数据库连接使用了jdbc方式,这个和前端也没什么大关系

第二步,主要写了几个文件,分别是table.js,table.jsp,其中js用来画表格和页面,jsp是用来显示

下面具体描述每项功能实现及其方法

a.查找功能

jsp页面代码如下(只摘取重要部分)

<div class="panel-body">
     <div class="form-inline" >  
         <div class="input-group col-md-3" style="margin-top:0px positon:relative">
             <input type="text" class="form-control" name="selectName" id="selectName" placeholder="请输入字段名" / >
                   <span class="input-group-btn">
                        <button id="selectSqlButton" class="btn btn-info btn-search">查找</button>
                              <button class="btn btn-info btn-search" data-toggle="modal" data-target="#myModal" style="margin-left:3px">添加</button>
                   </span>
          </div>
      </div>
      <hr style="margin-top:5px"/>
      <!-- 表格,使用ajax返回刷新 -->			
      <div class="table-responsive" >
           <table class="table table-striped table-bordered">
             <thead>
               <tr>
                  <th>Sqlid</th>
                  <th>Projectid</th>
                  <th>Userid</th>
                  <th>Filepath</th>
                  <th>Funcname</th>
                  <th>manualflag</th>
                  <th>manualsql</th>
                  <th>querytype</th>
                  <th>tables</th>
                  <th>joins</th>
                  <th>suicols</th>
                  <th>wherecols</th>
                  <th>操作</th>								
               </tr>
           </thead>
         <tbody id="sqlTables">
         </tbody>					
         </table>
        </div>
					
 <!-- 每页显示几条记录 -->
 <div id="bottomTool" style="float:right">
     <label>每页
         <select id="pageSize" onchange="research()" size="1">
          <option selected="selected">10</option>
          <option>15</option>
          <option>20</option>
          <option>30</option>
         </select>条记录     
     </label>
     <label>显示第
       <label id="startItem"></label>至
       <label id="endItem"></label>记录,共
       <label id="allItem"></label>项     
     </label>
     <label>
        <a id="previousPage" style="color:gray">上一页</a>
         <select id="PageNumDetail" onchange="selectPage()" size="1">
         </select>
        <a id="nextPage" style="color:gray">下一页</a>
     </label>
 </div>
 </div>
 </div>
 </div>

上面代码就是页面涉及到查找功能的部分代码,这里把字段固定了,每个操作都有对应的按钮和id,下面看看table.js文件是怎么实现查找功能的

var SqlForSelect;

/*设置表头不自动换行*/
$(document).ready(function() {
	$("th").css("white-space","nowrap");
}); 

/*更新数据字典表格*/
function refreshTable(sqlTables){
       //清空表格
      $("#sqlTables").html("");
       //根据传入的数据进行循环制表
      for(i in sqlTables){	
           $("#sqlTables").append("<tr><td>"+sqlTables[i].sqlid+
                   "</td><td>"+sqlTables[i].projectid+
                   "</td><td>"+sqlTables[i].userid+
                   "</td><td>"+sqlTables[i].filepath+
                   "</td><td>"+sqlTables[i].funcname+
                   "</td><td>"+sqlTables[i].manualflag+
                   "</td><td>"+sqlTables[i].manualsql+
                   "</td><td>"+sqlTables[i].querytype+
                   "</td><td>"+sqlTables[i].tables+
                   "</td><td>"+sqlTables[i].joins+
                   "</td><td>"+sqlTables[i].suicols+
                   "</td><td>"+sqlTables[i].wherecols+
                   "</td><td>"+"<a href='javascript:void(0)' id='"+sqlTables[i].sqlid+"' onclick='editSql(this)' data-toggle='modal' data-target='#editMyModal'>修改</a>/<a href='javascript:void(0)' id='"+sqlTables[i].sqlid+"' onclick='deleteSql(this)'>删除</a>"+