jquery编写的，数据自动填充插件，实现页面和服务器端代码分离

以上是我自己写的一个数据自动填充的插件，能实现3种格式数据的填充，还有很多欠考虑的地方，贴出来请大家指正

jConnection部分,java部分生成json，这部分完成填充数据到页面

(function($) {  
  var base_url = "/LXSW";
  //根据已知节点生成新节点序列
  $.fn.jFiller = function(options,callback,err) {
	  		/*	获得json数据并填充
			*	默认参数 rc:相关类 vt：获知类型(0-jsonObject,1-jsonArray自动填充,2-jsonArray复制填充) para:参数
			*/
			var tempThis = $(this);
			try{
				$.getJSON(options.base_servlet+"?rc="+options.rc+"&vt="+options.vt,options.para,function(data,status){
					if(data==null||data=="null"){
						if(err){
  							err();
  						}
					}else{
						if(options.vt=="0"){//jsonObject自动填充
							$.each(data,function(key,value) {
								$.fn.jGridFormat(tempThis.find("."+key),value);
							});
						}
						if(options.vt=="1"){//jsonArray自动填充
							for(var i=0,l=data.length;i<l;i++){
								$.each(data[i],function(key,value) {
									$.fn.jGridFormat(tempThis.eq(i).find("."+key),value);
								});
							}
						}
						if(options.vt=="2"){//jsonArray复制填充 (需求参数:cloneId 复制节点id名 ; cloneClass 复制节点class名)
							for(var i=0,l=data.length;i<l;i++){
								tempThis.append($("."+options.cloneClass).eq(0).clone());
							}
							$("."+options.cloneClass).eq(0).remove();
							for(var i=0,l=data.length;i<l;i++){
								$.each(data[i],function(key,value) {
									$.fn.jGridFormat($("."+options.cloneClass).eq(i).find("."+key),value);
								});
							}
						}
					}
					if(callback) {
            			callback();
        			}
	  			});
  			}catch(e){
  				alert("消息:发生未知异常,请查看控制台或日志!");
  			}
  			
  };
  
  $.fn.jGridFormat = function(target,value) {
	  	if(target.is("span")||target.is("div")){
	  		if(target.attr("jroll")=="back_img"){//如果该div是图片属性则放置背景图片
	  			img_value = base_url + value;
				target.css("background-image","url("+img_value+")");
	  		}else{
	  			target.html(value);
	  		}
		}
		if(target.is("a")){//value格式1,2
			target.attr("href",(function(href,para){
								try{
										var pa = new Array();
										pa=para.toString().split(",");
										for(xx in pa){
											href=href.replace("^",pa[xx]);
										}
									}catch(err){
										href="err";
									}
									return href;
								})(target.attr("href"),value));
		}
		if(target.is("img")){
			img_value = base_url + value;
			target.attr("src",img_value);
		}
		if (target.is(':radio')) {
        	target.each(function(){
   				 if($(this).attr("value")==value){
					$(this).attr("checked",true);
				}
  			});
    	}
		if (target.is(':checkbox')) {
			var pc = new Array();
			pc = value.split(",");
        	target.each(function(){
   				 //$(this).attr("value")==value
				 if((function(ckv,pc){
					 	mark=false;
					 	for(x in pc){
							if(pc[x]==ckv){
								mark=true;
								break;	
							}
						}
						return mark;
					 })($(this).attr("value"),pc)){ 
					$(this).attr("checked",true);
				}
  			});
    	}
		if(target.is(':text')||target.is('textarea')) {
			target.val(value);	
		}
		if(target.is(':password')) {
			//target.val($.fn.jPassword(value));
			target.val(( function(str){
							var nstr="";
							for(x in str){
								nstr+="*";
							}	
							return nstr;}(value)))	
		}
		if(target.is("ul")) {//如果填充项了ul，该值为复合节点
			for(var i=0,l=value.length;i<l;i++){
				target.append(target.children("li").eq(0).clone());
			}
			target.children("li").eq(0).remove();
			for(var i=0,l=value.length;i<l;i++){
				$.each(value[i],function(nkey,nvalue) {
					$.fn.jGridFormat(target.children("li").eq(i).find("."+nkey),nvalue);
				});
			}
		}
	}; 
// 闭包结束
})(jQuery);  

然后是负责把数据写到前台的java类，基类如下

package com.jbase;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.Set;
import java.util.TreeMap;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class JBaseConnector {
	public Connection d = null;
	public String sql = null;
	public ArrayList<TreeMap> list = null;
	public TreeMap map = null;
	public JSONObject jsonObject = null;
	public JSONArray jsonArray = null;
	public JBaseConnector(){
		init();
	}
	/**
	 * 建立数据库连接
	 * 改方法用于重写
	 * */
	public void init(){

	}
	/**
	 * 关闭数据连接
	 * */
    public void close()
    {
    	if (d != null) {
            try {
				d.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
        }
    }
	/**
	 * 传入sql并获得记录集
	 * */
    private ResultSet executeQuery(String sql) {
        ResultSet rs;
        try {
            Statement stmt = d.createStatement();
            try {
                rs = stmt.executeQuery(sql);
            } catch (SQLException e) {
                System.out.println(e.getMessage());
                return null;
            }
        } catch (SQLException e) {
            System.out.println(e.getMessage());
            System.out.println("executeQueryError!");
            return null;
        }
        return rs;
    }
	/**
	 * 传入sql并封装成ArrayList<TreeMap>
	 * */ 
	private ArrayList<TreeMap> getRes(String sql){
		
		ArrayList<TreeMap> list = new ArrayList<TreeMap>();
		if(sql == "" || sql == null) return list;
		
		try
		{
			ResultSet rs = executeQuery(sql);
			/*==== 分析记录集结构得到map ====*/
			TreeMap str_map =new TreeMap();
			ResultSetMetaData rsmd=rs.getMetaData();
			int cn=rsmd.getColumnCount();
			
			for(int ik=1;ik<=cn;ik++)
			{
			    str_map.put(rsmd.getColumnLabel(ik), null);
			}
			
			/*==== 将结果装载入list<Map>集合 ====*/
	    	while(rs.next())
	    	{
	    		TreeMap map = new TreeMap();
	    		Set<String> str_keySet = str_map.keySet(); //得到key set
	    		
	            for (String key:str_keySet ) 
	            {
	                 map.put(key, rs.getObject(key));
	            }
	            list.add(map);
	    	}
		}
		catch(Exception ex)
		{
			ex.printStackTrace();
		}
		finally{

		}
		return list;
	}	

	/**
	 * 查询结果并封装在ArrayList<TreeMap>中
	 * 
	 * */
	private void toArray(){
		list=getRes(sql);
	}
	
	/**
	 * 用于获得list中的值
	 * */
	private void getValue(String key){}
	/**
	 * 用于修改list中的值
	 * */
	private void setValue(String key,TreeMap map){
		for(int i=0,l=list.size();i<l;i++){
			TreeMap tMap = list.get(i);
			tMap.put(key, map.get(key));
		}
	}
	/**
	 * 用于获得单记录的信息
	 * */
	private void listToMap(){
		try{
			map=list.get(0);
		}catch(Exception ex){
			map=null;
		}
	}
	/**
	 * TreeMap to jsonArray
	 * */
	private void MapToJson(){
		jsonObject = JSONObject.fromObject( map );
	}
	/**
	 * ArrayList<TreeMap> to jsonArray
	 * */
	private void listToJson(){
		jsonArray = JSONArray.fromObject( list );  
	}
	/**
	 * 多值调用过程
	 * */
	public final JSONArray mulPro(TreeMap sqlMap){
		try{
			wrapSql(sqlMap);//组装sql语句
			toArray();//获得结果toArray
			beforeRender();//更改结果信息
			listToJson();//转为json
		}catch(Exception ex){
			ex.printStackTrace();
		}finally{
			close();
		}
		return jsonArray;
	}
	/**
	 * 单值调用过程
	 * */
	public final JSONObject sigPro(TreeMap<String,String> sqlMap){
		try{
			wrapSql(sqlMap);//组装sql语句
			toArray();//获得结果toArray
			beforeRender();//更改结果信息
			listToMap();//转单值
			MapToJson();//转为json
		}catch(Exception ex){
			ex.printStackTrace();
		}finally{
			close();
		}
		return jsonObject;
	}
	/**
	 * 组装sql语句
	 * Map装servlet传送过来的参数
	 * 该方法用于重写
	 */
	public void wrapSql (TreeMap<String,String> sqlMap){}
	/**
	 * 对list中数据进行重新组合
	 * 该方法用于重写
	 * */
	public void beforeRender(){}
}

这个文件可以打包成jar，然后使用的时候继承一下：

package JC;

import java.sql.DriverManager;

import com.jbase.JBaseConnector;

public class JCBase extends JBaseConnector{
	/**
	 * 建立数据库连接
	 * 改方法用于重写
	 * */
	public void init(){
		try {
			Class.forName ("com.mysql.jdbc.Driver").newInstance ();
			d = DriverManager.getConnection("jdbc:mysql://localhost/lxsw?characterEncoding=UTF-8", "root", "");
		} catch (Throwable e) {
			e.printStackTrace();
		}
	}
}

具体生成json的时候直接可以使用如下代码：

package JC;

import java.util.TreeMap;

import INDEX.INDEX_COMMON;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class sxbcConnector extends JCBase {

	@Override 
	public void wrapSql (TreeMap<String,String> map){
		sql="select /此处隐去/ where uid="+map.get("uid");//参数前台传递过来
	}
	
	@Override 
	public void beforeRender(){
		/对list的值重新修正/
	}
}

前台调用时的代码非常简单

//数据填充
  	$("#XXX").jFiller({
	  		vt	:	"2",//调用方式
	  		rc	:	"JC.类名",
	  		cloneClass:"info",//克隆类名
	  		base_servlet:"../JServlet"
	  	},function() {
	       	/此处为加载成功之后的回调/
	    },function() {
		/此处为加载失败的回调/
 } );


对了，差点忘记了servlet

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 vt = map.get("vt");//获得查询标志位
		String rc = map.get("rc");//所对应的类名
		map.remove("vt");
		map.remove("rc");
		try {
			JBaseConnector a = (JBaseConnector)Class.forName(rc).newInstance();
			if(vt.equals("0")){//jsonObject
					out.print(a.sigPro(map));
			}
			if(vt.equals("1")||vt.equals("2")){//jsonArray
					out.print(a.mulPro(map));
			}
		} catch (Exception e) {
			System.out.println("can not get the ref-class name!");
		}
		out.flush();
		out.close();
	}

这个就是插件的全部了，简单来说

java获得记录集-->ArrayList<TreeMap>中(sql部分是子类传入，查询参数由前台传入)-->按照要求重写的值list(ArrayList<TreeMap>)这个由方法beforeRender(该名字来自于dhtmlx组件)实现-->jConnector接受数据并根据页面标记类型写入页面。
组件还存在很多问题，在项目中还在进一步改进，很多写法也是由于水平有限没有很好的实现，但基本上达到了前台的页面和代码分离。