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

<個人原創,轉載請註明出處>

因爲項目需要大量的表格,而leader又不允許使用已有的例如DataTables之類的表格框架,所以需要我自己手寫一個表格控件

其實現的功能主要有

1.和後臺controller交互,取數據,根據取得數據數量在頁面顯示數據

2.上一頁,下一頁

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" οnchange="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" οnchange="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+"' οnclick='editSql(this)' data-toggle='modal' data-target='#editMyModal'>修改</a>/<a href='javascript:void(0)' id='"+sqlTables[i].sqlid+"' οnclick='deleteSql(this)'>刪除</a>"+           
                   "</td><tr>");
         }
};

上面代碼先定義一個全局變量SqlForSelect,再設置了th的white-space屬性,讓其不要自動換行,關於這個,可以參考我寫的jsp中爲表格添加水平滾動條這篇文章

接着refreshTable用來刷新頁面表格,最後一列添加兩個a標籤用來響應修改和刪除操作

下一步,我們需要寫幾個函數,分別用來更新頁面顯示的資源,例如開始和結束條目啊,總個數,控制上下頁流程,代碼如下

/*更新頁面顯示開始和結束數目*/
function refreshCount(countOfSqlName,currentPage,numOfPage){
	document.getElementById("allItem").innerHTML = countOfSqlName;
	var startItem=0;
	var endItem=0;
	var itemsPerPage = getItemsPerPage();
	if(currentPage<numOfPage){
		startItem=--currentPage*itemsPerPage;
		endItem=parseInt(startItem)+parseInt(itemsPerPage);
		startItem++;
	}else if(currentPage==numOfPage){
		startItem=--currentPage*itemsPerPage;
		endItem=countOfSqlName;
		startItem++;
	}
	document.getElementById("startItem").innerHTML = startItem;
	document.getElementById("endItem").innerHTML = endItem;
};

將ajax傳過來的數據分別放入到頁面標籤內容中,關於顯示當前頁面顯示的記錄從多少條到多少條的算法就不做說明,下一步代碼如下所示

/*更新當前頁面以及控制上下頁顯示邏輯*/
function refreshCurrentPage(numOfPage,currentPage){
	$("#PageNumDetail").html("");
	var i=1;
	for(i=1;i<=numOfPage;i++){	
           $("#PageNumDetail").append("<option>"+i+"</option>");
         }      
    //設置當前頁面值
    var select = document.getElementById("PageNumDetail"); 
    var currentPageForSql = currentPage;
    //options[]下標從0開始 
    select.options[--currentPageForSql].selected = true;
	//判斷頁面如果爲第一頁,則將上一頁設爲不可選,如果不爲第一頁,則將按鈕置爲可選
    if(currentPage <= 1){
    	$("#previousPage").removeAttr("href");
    	$("#previousPage").css("color","grey");
    }else if(currentPage >1){
    	$("#previousPage").attr("href","javascript:previousPage()");
    	$("#previousPage").css("color","#23528C");
    }
    
    if (currentPage >= numOfPage){
    	$("#nextPage").removeAttr("href");
    	$("#nextPage").css("color","grey");
    }else{
    	$("#nextPage").attr("href","javascript:nextPage()");
    	$("#nextPage").css("color","#23528C");
    }
};

上述代碼用來控制頁面上下頁碼顯示邏輯,在第一頁,上一頁不可選,最後一頁,下一頁不可選

/*獲得頁面的currentPage和 getItemsPerPag*/
function getCurrentPage(){
	return $('#PageNumDetail option:selected').val();
};
function getItemsPerPage(){
	return $('#pageSize option:selected').val();
	
};

上述代碼用來對當前頁的select控件進行控制,自動調節到當前頁碼

=======================================

上面的幾個函數介紹完以後,我們看看ajax來請求查找命令是怎麼實現的,代碼如下

/*執行查找命令*/
$(function(){
	$('#selectSqlButton').click(function(){
		var selectSqlName = $('#selectName').val();
		$.ajax({
			type : "GET",
			url : "SelectSqlByName.do",
			data : {"selectName":selectSqlName,"currentPage":0,"itemsPerPag":10},
			dataType: "json", 
			error: function(){
				alertLogin();
			},
			success : function(msg) {
				if(msg.errorInfo == 0){
				refreshTable(msg.sqls);
				refreshCurrentPage(msg.numOfPage,msg.currentPage);
				refreshCount(msg.countOfSqlName,msg.currentPage,msg.numOfPage);	
				}else
				alert("查無數據");	
			}
		});
	});
});

通過

$('#selectName').val()

獲得用戶輸入的查找命令,向controller發送SelectSqlByName請求,傳入頁面參數,在success裏面進行幾個頁面的刷新

接下來,看看conrtoller裏面是如何匹配到selectSqlByName這個方法的

 @RequestMapping(value = "/SelectSqlByName",method = RequestMethod.GET,produces
			 ={"application/json;charset=UTF-8"})
	    public @ResponseBody Map<String, Object> listSqls(Model model,HttpServletRequest request,HttpServletResponse res) {
		 	//每次都查詢,避免數據字典改變
		 	Map<String, Object> map = new HashMap<String, Object>();
		 	int errorInfo = 0;
		 	Integer currentPage = Integer.parseInt(request.getParameter("currentPage"));
		 	Integer itemsPerPag = Integer.parseInt(request.getParameter("itemsPerPag"));
		 	String selectName = request.getParameter("selectName");
		 		 	
		 
		 	long begin =System.currentTimeMillis();
		 	

                        //這裏使用的是webservice接口函數
		 	factory = new ClientProxyFactoryBean();
		 	factory.setAddress("http://localhost:9000/Hello");
			factory.getServiceFactory().setDataBinding(new AegisDatabinding());
			client = factory.create(HelloWorld.class);
			List<Cptsql> list = client.pageSelectCptsql(selectName, currentPage, itemsPerPag);
			
			long end =System.currentTimeMillis();
			System.out.println("兩個時間差爲:"+(end-begin));
		 	
		 	//取頁碼數目
		 	int countOfDicName = client.pageSelectCptsqlCount(selectName);
		 	if (countOfDicName == 0){
		 		errorInfo = 1;
		 		currentPage=1;
		 		map.put("currentPage", currentPage);
		 		map.put("errorInfo",errorInfo);
		 		return map;
		 	}else{
			 	double tempDouble = itemsPerPag;
			 	double numOfPage = Math.ceil(countOfDicName/tempDouble);
			 	errorInfo = 0;
			 	currentPage=1;			
			 	map.put("countOfSqlName", countOfDicName);
			 	map.put("sqls", list);
			 	map.put("numOfPage", numOfPage);
			 	map.put("currentPage", currentPage);
			 	map.put("errorInfo",errorInfo);
		        return map;
		 	}
	    }	

調用了webservice函數,這個函數實現不多做說明,如果沒有學過webservice可以自己寫一個service和implement實現,做一個擋板進行數據的僞造
到這裏,查找功能基本實現了

b.上下頁

上下頁碼的實現很簡單,用的也是ajax請求

/*獲取下一頁*/
function nextPage(){
	//參數獲取
	var currentPage = getCurrentPage();
	var itemsPerPage = getItemsPerPage();
	var selectSqlName = $('#selectName').val();
	var getNextPage = 1;
	
		$.ajax({
			type : "GET",
			url : "SelectNextPageForSql.do",
			data : {"selectName":selectSqlName,"currentPage":currentPage,"itemsPerPag":itemsPerPage},
			dataType: "json", 
			error: function(){alertLogin();},
			success : function(msg) {
				$('#sqlid').val(msg.sqls);
				refreshTable(msg.sqls);
					refreshCurrentPage(msg.numOfPage,msg.currentPage);
					refreshCount(msg.countOfSqlName,msg.currentPage,msg.numOfPage);
					refreshFooter();
			}
		});
};

/*獲取上一頁*/
function previousPage(){
	//參數獲取
	var currentPage = getCurrentPage();
	var itemsPerPage = getItemsPerPage();
	var selectSqlName = $('#selectName').val();
	var getPreviousPage = 0;
		$.ajax({
			type : "GET",
			url : "SelectPreviousPageForSql.do",
			data : {"selectName":selectSqlName,"currentPage":currentPage,"itemsPerPag":itemsPerPage},
			dataType: "json", 
			error: function(){alertLogin();},
			success : function(msg) {
				refreshTable(msg.sqls);
				refreshCurrentPage(msg.numOfPage,msg.currentPage);
				refreshCount(msg.countOfSqlName,msg.currentPage,msg.numOfPage);
				refreshFooter();
			}
		});
};

關於controller裏面對上下頁的匹配這裏就不多做闡述了,主要就是針對傳入的數據,將currentPage進行增減,再調用service函數,從而達到獲取上下頁的效果

C.指定某一頁

同樣的,直接從ajax請求談起,代碼如下

/*指定某一頁操作*/
function selectPage(){
	//參數獲取
	var currentPage = getCurrentPage();
	var itemsPerPage = getItemsPerPage();
	var selectSqlName = $('#selectName').val();
	var getPreviousPage = 0;
		$.ajax({
			type : "GET",
			url : "SelectPageForSql.do",
			data : {"selectName":selectSqlName,"currentPage":currentPage,"itemsPerPag":itemsPerPage},
			dataType: "json", 
			error: function(){alertLogin();},
			success : function(msg) {
				refreshTable(msg.sqls);
				refreshCurrentPage(msg.numOfPage,msg.currentPage);
				refreshCount(msg.countOfSqlName,msg.currentPage,msg.numOfPage);
				refreshFooter();
			}
		});
}

這裏使用的方法是selctPage(),通過之前頁面定義的

<select id="PageNumDetail" οnchange="selectPage()" size="1">

當數值有change的時候就會觸發這個方法,並將相應的參數發給controller,獲得數據,最後調用統一的refresh函數

D.添加功能

添加功能在這裏主要涉及到bootstrap的modal框的使用,效果如下所示,點擊頁面添加按鈕,彈出modal框

控制這個窗口的jsp代碼是

<!-- 添加模態框（Modal） -->
	<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">
	                  ×
	            </button>
	            <h4 class="modal-title" id="myModalLabel">
	               添加交易對象
	            </h4>
	         </div>
		         <div class="modal-body">		         
		            <label>Projectid</label><input type="text" name="projectid" class="form-control" id="projectidForAdd" placeholder="請輸入projectid" / >
		            <label>Userid</label><input type="text" name="userid" class="form-control" id="useridForAdd" placeholder="請輸入userid" / >
		            <label>Filepath</label><input type="text" name="filepath" class="form-control" id="filepathForAdd" placeholder="請輸入filepath" / >
		            <label>Funcname</label><input type="text" name="funcname" class="form-control" id="funcnameForAdd" placeholder="請輸入funcname" / >
		            <label>Manualflag</label><input type="text" name="manualflag" class="form-control" id="manualflagForAdd" placeholder="請輸入manualflag" / > 
		            <label>Manualsql</label><input type="text" name="manualsql" class="form-control" id="manualsqlForAdd" placeholder="請輸入manualsql" / >
		            <label>Querytype</label><input type="text" name="querytype" class="form-control" id="querytypeForAdd" placeholder="請輸入querytype" / >
		            <label>Tables</label><input type="text" name="tables" class="form-control" id="tablesForAdd" placeholder="請輸入tables" / >
		            <label>Joins</label><input type="text" name="joins" class="form-control" id="joinsForAdd" placeholder="請輸入joins" / >
		            <label>Suicols</label><input type="text" name="suicols" class="form-control" id="suicolsForAdd" placeholder="請輸入suicols" / >
		            <label>Wherecols</label><input type="text" name="wherecols" class="form-control" id="wherecolsForAdd" placeholder="請輸入wherecols" / >                       
		         </div>
		         <div class="modal-footer">
		            <button id="addSql" class="btn btn-primary" data-dismiss="modal">
		               	確定
		            </button>
		            <button type="button" class="btn btn-default" 
		               data-dismiss="modal">取消
		            </button>
		         </div>
	      </div><!-- /.modal-content -->
	</div><!-- /.modal -->
	</div>

通過

<button class="btn btn-info btn-search" data-toggle="modal" data-target="#myModal" style="margin-left:3px">添加</button>

這個button的data-toggle和data-target屬性,點擊添加按鈕,會打開模態框,在模態框內將佈局寫好,最後在modal-footer裏,點擊確定,觸發js裏對應的方法,js代碼如下

/*這是Ajax添加選項*/
$(function() {
	$("#addSql").click(function() {
		var projectid=$("#projectidForAdd").val();
		var userid=$("#useridForAdd").val();
		var filepath=$("#filepathForAdd").val();
		var funcname=$("#funcnameForAdd").val();
		var manualflag=$("#manualflagForAdd").val();
		var manualsql=$("#manualsqlForAdd").val();
		var querytype=$("#querytypeForAdd").val();
		var tables=$("#tablesForAdd").val();
		var joins=$("#joinsForAdd").val();
		var suicols=$("#suicolsForAdd").val();
		var wherecols=$("#wherecolsForAdd").val();
		$.ajax( {
			type : "GET",
			url : "addSql.do",
			data : {"projectid":projectid,"userid":userid,"filepath":filepath,"funcname":funcname,"manualflag":manualflag,"manualsql":manualsql,"querytype":querytype,"tables":tables,"joins":joins,"suicols":suicols,"wherecols":wherecols},
			contentType : "application/json",
			dataType: "json",
			error: function(){alertLogin();},
			success : function(msg) {
				alert('恭喜你,添加成功!');
				refreshTable(msg.list);
				refreshCurrentPage(msg.numOfPage,msg.currentPage);
				refreshCount(msg.countOfSqlName,msg.currentPage,msg.numOfPage);
				refreshFooter();
			}
		});
	});
});

這段js代碼首先獲得用戶在模態框裏輸入的值,在把這些參數傳到controller(後期可以考慮將這些數據組成map進行發送)

controller部分對於這個addSql的操作爲

//添加
	 @RequestMapping(value = "/addSql",method = RequestMethod.GET,produces
			 ={"application/json;charset=UTF-8"})
	    public @ResponseBody Object addObject(HttpServletRequest request,HttpServletResponse res) throws UnsupportedEncodingException{
		 //將傳進來的文字進行編碼,不然會出現中文亂碼錯誤
		 Map<String, Object> map = new HashMap<String, Object>();
		 int currentPage = 0;
		 int itemsPerPag = 10;
		 String projectid = new String(request.getParameter("projectid").getBytes("ISO-8859-1"),"utf-8") ;
		 String userid = new String(request.getParameter("userid").getBytes("ISO-8859-1"),"utf-8") ;
		 String filepath=new String(request.getParameter("filepath").getBytes("ISO-8859-1"),"utf-8") ;
		 String funcname=new String(request.getParameter("funcname").getBytes("ISO-8859-1"),"utf-8") ;
		 String manualflag=new String(request.getParameter("manualflag").getBytes("ISO-8859-1"),"utf-8") ;
		 String manualsql=new String(request.getParameter("manualsql").getBytes("ISO-8859-1"),"utf-8") ;
		 String querytype=new String(request.getParameter("querytype").getBytes("ISO-8859-1"),"utf-8") ;
		 String tables=new String(request.getParameter("tables").getBytes("ISO-8859-1"),"utf-8") ;
		 String joins=new String(request.getParameter("joins").getBytes("ISO-8859-1"),"utf-8") ;
		 String suicols=new String(request.getParameter("suicols").getBytes("ISO-8859-1"),"utf-8") ;
		 String wherecols=new String(request.getParameter("wherecols").getBytes("ISO-8859-1"),"utf-8") ;
		 
		 factory = new ClientProxyFactoryBean();
	 	factory.setAddress("http://localhost:9000/Hello");
		factory.getServiceFactory().setDataBinding(new AegisDatabinding());
		client = factory.create(HelloWorld.class);
		 int maxId = client.maxSqlid();
		 com.spdb.domain.Cptsql addObj = new com.spdb.domain.Cptsql();
		 addObj.setSqlid(maxId+1);
		 addObj.setFilepath(filepath);
		 addObj.setFuncname(funcname);
		 addObj.setJoins(joins);
		 addObj.setManualflag(manualflag);
		 addObj.setManualsql(manualsql);
		 addObj.setProjectid(new Integer(projectid));
		 addObj.setQuerytype(querytype);
		 addObj.setSuicols(suicols);
		 addObj.setTables(tables);
		 addObj.setUserid(new Integer(userid));
		 addObj.setWherecols(wherecols);
	     
	     //存儲objTemp
	     client.insertCptsql(addObj);	
	     
	     //查找並返回
	     int countOfSqlName = client.pageSelectCptsqlCount(funcname);
	     List<com.spdb.domain.Cptsql> list = client.pageSelectCptsql(
	    		 funcname, currentPage, itemsPerPag);
	     currentPage=1;
	   //取頁碼數目,實時刷新,保證沒有垃圾數據	
		 double tempDouble = 10;
		 double numOfPage = Math.ceil(countOfSqlName/tempDouble);
		 
	     map.put("countOfSqlName", countOfSqlName);
		 map.put("list", list);
		 map.put("numOfPage", numOfPage);
		 map.put("data", "data");
		 map.put("currentPage", currentPage);
		 return map;
	 }

注意這裏要使用到

<span style="color:#FF0000;">produces={"application/json;charset=UTF-8"
</span><pre name="code" class="javascript">和(request.getParameter("projectid").getBytes("ISO-8859-1"),"utf-8"

對數據頁面傳入的字符串和傳回給頁面的字符串進行編碼,避免產生亂碼

主要的操作就和我在代碼中備註的一樣,其中同樣調用的是webservice的方法

client.insertCptsql(addObj);	

進行添加,最後再通過添加的名字來獲取所有同名的字符,相當於再做一次查找,返回給頁面,從而對用戶視覺有良好的過度效果

E.修改功能

修改功能和添加功能類似,都是使用的modal窗口進行的,其中在jsp代碼方面,和 添加的唯一不同的地方在於

 <div class="modal-footer">
		            <button id="editObj" class="btn btn-primary" data-dismiss="modal">
		               	確定
		            </button>
		            <button type="button" class="btn btn-default" 
		               data-dismiss="modal">取消
		            </button>
		            <button type="button" class="btn btn-default" id="test" οnclick="refreshModalWhenEdit()">重置
		            </button>
 </div>

這裏添加了重置功能,其具體實現的流程如下

需要說明的是,這裏當用戶點擊修改功能按鈕的時候,會彈出當前的項目的值,如下圖所示

點擊後,出現原來的值,這個是怎麼實現的呢?很簡單,通過js代碼控制,讓我們看看js代碼

 "</td><td>"+"<a href='javascript:void(0)' id='"+sqlTables[i].sqlid+"' οnclick='editSql(this)' data-toggle='modal' data-target='#editMyModal'>修改</a>/<a href='javascript:void(0)' id='"+sqlTables[i].sqlid+"' οnclick='deleteSql(this)'>刪除</a>"+           

//修改操作
function editSql(obj)
{
	$.ajax( {
		type : "GET",
		url : "GetSqlByIdForUpdate.do",
		data : {"sqlid":obj.id},
		contentType : "application/json",
		dataType: "json",
//		error: function(){alertLogin();},
		success : function(msg) {
			SqlForSelect = msg.selectSql;
			refreshModalWhenEdit();
		}
	});
	
}

這兩段代碼,第一段是之前refreshtable()方法裏面的一段,點擊修改以後,觸發editSql方法,將this傳給editSql中的obj參數,然後調用ajax請求,將obj.id發給後臺,後臺再查詢一次數據(爲什麼要每次都要查詢,因爲有可能在用戶點擊修改的時候,後臺數據庫發生變化,所以這時候需要再查詢一次,後期可以通過廣播方式進行通知,判斷)

最後置全局變量SqlForSelect爲獲取的值,調用refreshModalWhenEdit方法,那麼這個方法是如何定義的呢,很簡單

/*控制修改頁面顯示原值*/
function refreshModalWhenEdit(){
			document.getElementById("projectidForEdit").value=SqlForSelect.projectid;
			document.getElementById("useridForEdit").value = SqlForSelect.userid;
		    document.getElementById("filepathForEdit").value = SqlForSelect.filepath;
		    document.getElementById("funcnameForEdit").value =SqlForSelect.funcname;
		    document.getElementById("manualflagForEdit").value = SqlForSelect.manualflag;  
		    document.getElementById("manualsqlForEdit").value = SqlForSelect.manualsql; 
		    document.getElementById("querytypeForEdit").value = SqlForSelect.querytype;
		    document.getElementById("tablesForEdit").value = SqlForSelect.tables;  
		    document.getElementById("joinsForEdit").value = SqlForSelect.joins;
		    document.getElementById("suicolsForEdit").value =SqlForSelect.suicols;
		    document.getElementById("wherecolsForEdit").value = SqlForSelect.wherecols;  
}

簡單的說就是把modal框裏的值一個個填充進去(目前這裏可能造成顯示先後順序的問題,如果網絡卡的情況下,可能頁面出現一段事件后里面纔會填充,目前由於公司開發使用統一的內網,暫時未出現此問題)

最後用戶點擊確定的時候,調用

$(function() {
	$("#editObj").click(function() {
		var sqlId= SqlForSelect.sqlid;
		var projectid=$("#projectidForEdit").val();
		var userid=$("#useridForEdit").val();
		var filepath=$("#filepathForEdit").val();
		var funcname=$("#funcnameForEdit").val();
		var manualflag=$("#manualflagForEdit").val();
		var manualsql=$("#manualsqlForEdit").val();
		var querytype=$("#querytypeForEdit").val();
		var tables=$("#tablesForEdit").val();
		var joins=$("#joinsForEdit").val();
		var suicols=$("#suicolsForEdit").val();
		var wherecols=$("#wherecolsForEdit").val();
		$.ajax( {
			type : "GET",
			url : "editSql.do",
			data : {"sqlId":sqlId,"projectid":projectid,"userid":userid,"filepath":filepath,"funcname":funcname,"manualflag":manualflag,"manualsql":manualsql,"querytype":querytype,"tables":tables,"joins":joins,"suicols":suicols,"wherecols":wherecols},
			contentType : "application/json",
			dataType: "json",
//			error: function(){alertLogin();},
			success : function(msg) {
				alert('恭喜你,修改成功!');
				refreshTable(msg.list);
				refreshCurrentPage(msg.numOfPage,msg.currentPage);
				refreshCount(msg.countOfSqlName,msg.currentPage,msg.numOfPage);
				refreshFooter();
			}
		});
	});
});

發送請求即可,後臺的controller就不多做說明了,和添加類似
關於重置方法的實現很簡單,點擊重置按鈕,再調用

refreshModalWhenEdit()

即可

F.刪除功能

刪除功能的實現更簡單了,用戶點擊刪除 按鈕以後

//刪除操作
function deleteSql(obj)
{
	var selectSqlName = $('#selectName').val();
	$.ajax( {
		type : "GET",
		url : "deleteSql.do",
		data : {"sqlid":obj.id,"selectSqlName":selectSqlName},
		contentType : "application/json",
		dataType: "json",
		success : function(msg) {
			alert("刪除成功");
			refreshTable(msg.list);
			refreshCurrentPage(msg.numOfPage,msg.currentPage);
			refreshCount(msg.countOfSqlName,msg.currentPage,msg.numOfPage);
			refreshFooter();
		}
	});
}

把id發給後臺,調用刪除函數即可

這裏之所以還要再獲取一次selectSqlName是因爲用戶視覺統一性而言

就是點擊刪除以後,頁面應該再刷新一次,顯示剛剛搜索名字的結果(這時候,刪除的那條已經不在了)

=====================================

到這裏,基本上table的表的這些功能已經實現完了,我是個接觸前端開發剛一兩個月的新人,說的比較多和繁

總結一下就是js裏面控制每個操作的方法,尤其是下面三個共用的方法要高度抽象化,這樣爲我們代碼書寫省去了很多麻煩

refreshTable(msg.list);
refreshCurrentPage(msg.numOfPage,msg.currentPage);
refreshCount(msg.countOfSqlName,msg.currentPage,msg.numOfPage);

大家有什麼問題歡迎及時指正,謝謝!