jquery自定义表单填写组件

这个和上一篇文章是连在一起的，基本实现表单填写和填充同步完成。目前填写实现了提交填写的功能，无提交还没太想好，希望大家提出宝贵建议。

思路：java提供查询参数->页面获得所需参数->遍历页面获得封装参数的集合->提交给servlet->完成更新->调用回调显示结果

java部分代码:上篇文章中出现的这里就不重复叙述了。

	/**
	 * 更新调用过程
	 * */
	public final int updater(TreeMap<String,String> parasMap){
		this.parasMap=parasMap;
		int ret=0;
		try{
			beforeProcess();
			wrapSql();//组装sql语句
			replaceParas();
			ret=executeUpdate(sql);
		}catch(Exception ex){
			ex.printStackTrace();
		}finally{
			close();
		}
		return ret;
	}
	/**
	 * 获得更新参数
	 * */
	public final JSONArray retParas(){
		JSONArray jsonArray = null;
		try{
			beforeProcess();
			wrapSql();//组装sql语句
			jsonArray=JSONArray.fromObject(getParas());
		}catch(Exception ex){
			ex.printStackTrace();
		}finally{
			close();
		}
		return jsonArray;
	}
	private void replaceParas() {
		for(String s:parasMap.keySet()){
			sql=sql.replaceFirst("@"+s, parasMap.get(s));
		}
	}
	public ArrayList getParas(){
		int step=0;
		ArrayList list=new ArrayList();
		for(int i=0;i<sql.length();i++){
			step=sql.indexOf("@",step);
			if(step==-1){
				break;
			}
			int endStr=sql.indexOf("'", step);
			list.add(sql.substring(step+1,endStr));
			step++;
		}
		return list;
	}
	/**
	 * 组装sql语句
	 * Map装servlet传送过来的参数
	 * 该方法用于重写
	 */
	public void wrapSql (TreeMap<String,String> sqlMap){}	
	/**
	 * 对list中数据进行重新组合
	 * 该方法用于重写
	 * */
	public void beforeRender(){}
	/**
	 * 组装sql语句:updater
	 * 该方法用于重写
	 */
	public void wrapSql (){}	
	/**
	 * 对map中数据进行重新组合:updater
	 * 该方法用于重写
	 * */
	public void beforeProcess(){}

wrapSql()获得sql语句，编写参照如下：

@Override 
	public void wrapSql (){
		sql="insert into qq(qq,name,mark) values('@qq','@name','@mark')";
	}

js会把页面的参数传过来,替换@代替的参数,beforeProcess是在获得参数后自定义封装，然后在传给sql语句进行替换。

js部分内容如下：

  /*更新填充器*/
  $.fn.jUpdater = function(options,callback,err) {
	  		/*	
			*	默认参数 rc:相关类 
						vt：更新类型(1-提交更新,2-自动更新) 
						submit_btn:提交按钮
						paras_servlet:获得参数的servlet地址 
						updater_servlet:更新servlet地址
			*/
			var tempThis = $(this);
			/*获得查询参数*/
			$.getJSON(options.paras_servlet,"rc="+options.rc,function(data,status){
				try{
				 	if(data==null||data=="null"){//未获得查询参数
						if(err){
  							err();
  						}
					}else{
						if(options.vt=="1"){//提交更新
							var paras={};
							$(options.submit_btn).bind("click",function(){
								$.each(data,function(key,value) {//页面提交所有变量
									//alert("key="+key+",value="+value);
									paras[value]=$.fn.jGetDate(tempThis.find("."+value));
								});
								//遍历所有值
								for (x in paras){
									alert("数组索引或对象属性："+x+" 对应的值："+paras[x]);
								}
								paras["rc"]=options.rc;//将关联类传入
								$.post(options.updater_servlet,paras,function(data,status){
									if(data.indexOf("1")>-1){//执行成功
										if(callback){
											callback();
										}	
									}else{//执行失败
										if(err){
	  										err();
	  									}
									}
								});
							});
						}
						if(options.vt=="2"){//自动更新
	
						}
					}
	  			}catch(e){
	  				alert("更新消息:发生未知异常,请查看控制台或日志!");
	  			}
			});	
  };
  
	
	$.fn.jGetDate=function(target) {
			var ret="";
	        if(target.is(':text')||target.is(':password')||target.is(':file')||target.is(':hidden')||target.is('textarea')||target.is('select')){
	        	ret=target.val();
	        }
	        if(target.is(':checkbox')){
	        	target.filter(":checked").each(function(){
	        		ret+=","+$(this).val();
	        	});
	        	ret=ret.substring(1);
	        }
	        if(target.is(':radio')){
	        	ret=target.filter(":checked").val();
	        }
	        return ret;
	};

另外需要两个servlet

JGetParas:

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		String rc = request.getParameter("rc");//所对应的类名
		try {
			JBaseConnector a = (JBaseConnector)Class.forName(rc).newInstance();
			out.print(a.retParas());
		} catch (Exception e) {
			e.printStackTrace();
			System.out.println("can not get the ref-class name!");
		}
		out.flush();
		out.close();
	}

JUpdater.java

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		/*
		 * 获得参数集合并将参数放置于Map中
		 * */
		TreeMap<String,String> map =new TreeMap<String,String>();
		Enumeration pNames=request.getParameterNames();
		while(pNames.hasMoreElements()){
		    String key=(String)pNames.nextElement();
		    String value=request.getParameter(key);
		    map.put(key, value);
		}
		String rc = map.get("rc");//所对应的类名
		map.remove("rc");
		try {
			JBaseConnector a = (JBaseConnector)Class.forName(rc).newInstance();
			out.print(a.updater(map));
		} catch (Exception e) {
			System.out.println("can not get the ref-class name!");
		}
		out.flush();
		out.close();
	}

调用过程如下：

	<script>
    	$(function(){
  			$("#aa").jUpdater(
				{
					vt	:	"1",
					rc	:	"JC.tt",
					submit_btn : ".bb",
					paras_servlet:"../JGetParas",
					updater_servlet:"../JUpdater"
				},
		  		function() {
		  			alert("数据加载成功");
		    	},
		    	function() {
		    		alert("数据加载失败");
		    	}
		    );
  		});
    </script>

html代码部分

<div id="aa">
    	qq:<input type="text" class="qq" /><br />
    	 mark:<input type="text" class="mark" /><br />
    	name:<input type="text" class="name" /><br />
    	<input class="bb" type="button" value="ss" />
    </div>