jquery编写的，数据自动填充插件，实现页面和服务器端代码分离
来源：互联网 发布：淘宝可以用预付卡吗 编辑：程序博客网 时间：2024/04/29 09:18
以上是我自己写的一个数据自动填充的插件，能实现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,2target.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();//获得结果toArraybeforeRender();//更改结果信息listToJson();//转为json}catch(Exception ex){ex.printStackTrace();}finally{close();}return jsonArray;}/** * 单值调用过程 * */public final JSONObject sigPro(TreeMap<String,String> sqlMap){try{wrapSql(sqlMap);//组装sql语句toArray();//获得结果toArraybeforeRender();//更改结果信息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() {/此处为加载失败的回调/
} );对了，差点忘记了servletpublic 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")){//jsonObjectout.print(a.sigPro(map));}if(vt.equals("1")||vt.equals("2")){//jsonArrayout.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接受数据并根据页面标记类型写入页面。
组件还存在很多问题，在项目中还在进一步改进，很多写法也是由于水平有限没有很好的实现，但基本上达到了前台的页面和代码分离。
0 0
- jquery编写的，数据自动填充插件，实现页面和服务器端代码分离
- xmlc插件实现页面和代码相分离详解
- xmlc插件实现页面和代码相分离详解
- jquery插件自动填充
- jQuery文本框默认值自动清除和填充的实现
- 用struts2 标签和Jquery 插件实现动态值，自动检索填充中值
- 使用自定义标签实现JSP页面和代码的分离
- 使用自定义标签实现JSP页面和代码的分离
- jQuery实现复选框选中自动填充数据
- jQuery的Autocomplete实现自动完成/自动填充
- 用Jquery实现自动填充
- 关于页面和代码分离的
- jQuery自动填充插件 Cool Auto-Suggest
- jQuery DataTables插件 从服务器端获取数据的方法
- VSCode插件制作：HTML代码自动填充
- 使用jquery autocomplete实现类似搜索引擎的自动填充功能
- jQuery数据显示插件整合实现代码
- Jsp/Java代码分离.实现页面真正的代码分离 实现框架代码,jxui:page标签
- OpenDaylight实战手记(一)工欲善其事，必先利其器：OpenDaylight相关技术
- tinycon基于jQuery的浏览器标题的数字提醒
- My97DatePicker在火狐下一个样式Bug问题
- JDK 7 中的 Fork/Join 模式
- Java编写的小语言词法分析器（含文档，visio流程图，源码等）
- jquery编写的，数据自动填充插件，实现页面和服务器端代码分离
- CascadeType 和 FetchType
- 修复checkbox的状态切换和动态取值的问题，主要是学会jquery选择或者不选中checkbox
- UI TA: selenium webdriver + junit 鼠标悬停，出现另一个元素，点击这个元素的解决方法
- 年终职场，你将面对哪些“抉择”？
- insert、update、delete的用法
- UNION 是需要排序的
- 编译时间过长注意事项
- Android中的Gallery的使用
