jQuery插件flexiGrid的完全使用,附代码下载

在这个例子中其实不光使用了flexiGrid,还有
<script type="text/javascript" src="js/jquery.draggable.js"></script>
<script type="text/javascript" src="js/jquery.resizable.js"></script>
<script type="text/javascript" src="js/jquery.linkbutton.js"></script>
<script type="text/javascript" src="js/jquery.shadow.js"></script>
<script type="text/javascript" src="js/jquery.dialog.js"></script>
<!-- 右键快显菜单 -->
<script type="text/javascript" src="js/jquery.contextmenu.packed.js"></script>
<!-- 调试插件 -->
<link rel="stylesheet" type="text/css" href="css/blackbird.css">
<script type="text/javascript" src="js/blackbird.js"></script>
<!-- 下拉列表框 -->
<!-- 这2个插件用法看 http://gundumw100.iteye.com/admin/blogs/543977,跟本例无关-->
<script language="javascript" type="text/javascript" src="js/jQuery.FillOptions.js"></script>
<script language="javascript" type="text/javascript" src="js/jQuery.CascadingSelect.js"></script>
这些插件
可以先看看下面的图片
其中blackbird是个javascript调试插件,如果没有出现黑色窗口,按F2键显示。(若按F2无反应,请看这里 http://gundumw100.iteye.com/admin/blogs/543170)
代码实现了增加,修改,删除记录的完整的功能,为了方便大家顺利完成测试,附件中加了数据库文件,倒入 mysql,然后把Constants类中的数据库连接改成你的就可以了,应该很容易看懂。详细的代码我就不贴了,因为蛮长的。大家看一下图先,觉得有需要再下附件。
ps:该代码为纯servlet+jsp+javaBean,网上看到的都是php的,而且功能不全。
IE8,FF,chrome下测试通过(IE6,IE7下修改和查看数据时显示不出来,原因是“跨页面”取数据造成的,这里我没改这个bug)
如果想了解详细点,请看我的这2篇文章
http://gundumw100.iteye.com/admin/blogs/531131
http://gundumw100.iteye.com/admin/blogs/537355

jQuery插件flexiGrid的完全使用,附代码下载_第1张图片
jQuery插件flexiGrid的完全使用,附代码下载_第2张图片

  • flexiGrid.zip (720.2 KB)
  • 下载次数: 4220
  • 查看图片附件

备注:java后台实现

import java.io.*;
import java.io.IOException;
import java.sql.SQLException;
import java.util.*;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class FlexiGridServlet extends HttpServlet {
	private DBConnection db;

	public void init() throws ServletException {
		db = new DBConnection();
		try {
			db.getCurrentConnection();
		} catch (SQLException e1) {
		}
	}

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

		response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");
		response.setHeader("Pragma", "no-cache");
		response.setHeader("Cache-Control", "no-cache, must-revalidate");
		response.setHeader("Pragma", "no-cache");

		String action = request.getParameter("action");
		System.out.println("action================" + action);
		String sql = "";
		String tableName = "job_info1";
		if("getProvince".equals(action)){
			System.out.println("--------------------getProvince--------------------");
//			String json="[{'provinceID':'110000','province':'北京市'}," +
//					"{'provinceID':'120000','province':'天津市'}," +
//					"{'provinceID':'310000','province':'上海市'}" +
//					"]";
			String path=this.getServletContext().getRealPath("/")+"province.txt";
			BufferedReader br=new BufferedReader(new InputStreamReader(new FileInputStream(path),"UTF-8"));   
            StringBuffer sb=new StringBuffer();   
            String s;
            while((s=br.readLine())!=null){ 
            	sb.append(s);
            }
            br.close();
            String json=sb.toString();
            System.out.println("json="+json);
            /*
            String xml="<DocumentElement>" +
            		"<table><provinceID>110000</provinceID><province>北京市</province></table>" +
            		"<table><provinceID>120000</provinceID><province>天津市</province></table>" +
            		"<table><provinceID>310000</provinceID><province>上海市</province></table>" +
            		"</DocumentElement>";
            response.getWriter().write(xml);
            */
            /*
            JSONArray array=new JSONArray();
			try {
				for(int i=0;i<5;i++){
					JSONObject object = new JSONObject();
					object.append("provinceID", "11000"+i);
					object.append("province", "北京市"+i);
					array.put(object);
				}
			} catch (JSONException e) {
				e.printStackTrace();
			}
			System.out.println("object="+array.toString());
			response.getWriter().write(array.toString());
			*/
			response.getWriter().write(json);
			response.getWriter().flush();
			response.getWriter().close();
			return;
		}
		if("getCity".equals(action)){
			System.out.println("--------------------getCity--------------------");
			String json="";
			String provinceID=request.getParameter("p");
			System.out.println("provinceID="+provinceID);
			if(provinceID.equals("110000")){
				json="[{'cityID':'1','city':'北京'}]";
			}else if(provinceID.equals("120000")){
				json="[{'cityID':'2','city':'天津'}]";
			}
			else if(provinceID.equals("310000")){
				json="[{'cityID':'3','city':'上海'}]";
			}else if(provinceID.equals("130000")){
				json="[{'cityID':'4','city':'石家庄'}," +
					"{'cityID':'5','city':'石家庄2'}"+
					"]";
			}else{
				json="[{'cityID':'-1','city':'请选择城市:'}]";
			}
			System.out.println("object="+json);
			response.getWriter().write(json);
			response.getWriter().flush();
			response.getWriter().close();
			return;
		}
		 if ("add".equals(action)) {
			 System.out.println("--------------------add--------------------");
			 String name=java.net.URLDecoder.decode(request.getParameter("name"),"UTF-8");
			 String address=java.net.URLDecoder.decode(request.getParameter("address"),"UTF-8");
			 String salary=java.net.URLDecoder.decode(request.getParameter("salary"),"UTF-8");
			 String date=java.net.URLDecoder.decode(request.getParameter("date"),"UTF-8");
			 String language=java.net.URLDecoder.decode(request.getParameter("language"),"UTF-8");
//			 String name = new String(request.getParameter("name").getBytes("ISO8859_1"),"UTF-8");
//			 String address = new String(request.getParameter("address").getBytes("ISO8859_1"),"UTF-8");
//			 String salary = new String(request.getParameter("salary").getBytes("ISO8859_1"),"UTF-8");
//			 String date = new String(request.getParameter("date").getBytes("ISO8859_1"),"UTF-8");
//			 String language = new String(request.getParameter("language").getBytes("ISO8859_1"),"UTF-8");
//			 System.out.println("name================" + name);
//			 System.out.println("address================" + address);
//			 System.out.println("salary================" + salary);
//			 System.out.println("date================" + date);
//			 System.out.println("language================" + language);
			 sql = "insert into "+tableName+ "(job_name,date,work_address,salary,language) values(?,?,?,?,?)";
//			 System.out.println("sql="+sql);
			db.executeUpdate(sql, new String[]{name,date,address,salary,language});
			System.out.println("insert success!!!");
			response.getWriter().write("success");
			response.getWriter().flush();
			response.getWriter().close();
			return;
		} else if ("delete".equals(action)) {
			System.out.println("--------------------delete------------------");
			String ids=request.getParameter("id");
//			System.out.println("ids="+ids);
			sql = "delete from "+tableName+" where id in ("+ids+")";
//			System.out.println("sql="+sql);
			db.executeUpdate(sql, null);
			System.out.println("delete success!!!");
			response.getWriter().write("success");
			response.getWriter().flush();
			response.getWriter().close();
			return;
		} else if ("modify".equals(action)) {
			System.out.println("--------------------modify-------------------");
			String id=request.getParameter("id");
			System.out.println("id="+id);
			String name=java.net.URLDecoder.decode(request.getParameter("name"),"UTF-8");
			 String address=java.net.URLDecoder.decode(request.getParameter("address"),"UTF-8");
			 String salary=java.net.URLDecoder.decode(request.getParameter("salary"),"UTF-8");
			 String date=java.net.URLDecoder.decode(request.getParameter("date"),"UTF-8");
			 String language=java.net.URLDecoder.decode(request.getParameter("language"),"UTF-8");
//			String name = new String(request.getParameter("name").getBytes("ISO8859_1"),"UTF-8");
//			 String address = new String(request.getParameter("address").getBytes("ISO8859_1"),"UTF-8");
//			 String salary = new String(request.getParameter("salary").getBytes("ISO8859_1"),"UTF-8");
//			 String date = new String(request.getParameter("date").getBytes("ISO8859_1"),"UTF-8");
//			 String language = new String(request.getParameter("language").getBytes("ISO8859_1"),"UTF-8");
//			 System.out.println("name================" + name);
//			 System.out.println("address================" + address);
//			 System.out.println("salary================" + salary);
//			 System.out.println("date================" + date);
//			 System.out.println("language================" + language);
			sql = "UPDATE "+tableName+" set job_name=?,work_address=?,salary=?,date=?,language=?where id = "+id;
			db.executeUpdate(sql, new String[]{name,address,salary,date,language});
			System.out.println("UPDATE success!!!");
			response.getWriter().write("success");
			response.getWriter().flush();
			response.getWriter().close();
			return;
		}
//		else if("modifyFromContextMenu".equals(action)){
//			System.out.println("--------------------modifyFromContextMenu-------------------");
//			String id=request.getParameter("id");
//			System.out.println("id="+id);
//			
//		}
		
		// 当前第几页
		String pageIndex = request.getParameter("page");
//		System.out.println("pageIndex=" + pageIndex);
		// 每页多少条
		String pageSize = request.getParameter("rp");
//		System.out.println("pageSize=" + pageSize);
		// 条件字段值ֵ
		String query = new String(request.getParameter("query").getBytes("ISO8859-1"), "UTF-8");
		System.out.println("query=" + query);
		// 条件字段
		String qtype = request.getParameter("qtype");
		System.out.println("qtype=" + qtype);
		// 排序字段
		String sortname = request.getParameter("sortname");
//		System.out.println("sortname=" + sortname);
		// desc or asc
		String sortorder = request.getParameter("sortorder");
//		System.out.println("sortorder=" + sortorder);
		//操作符
		String qop = request.getParameter("qop");
		System.out.println("qop=" + qop);
		int count = 0;
		List list = null;
		try {
			sql = "select count(*) from " + tableName;
			if (!query.equals("")) {
				sql += " where " + qtype + " like " +"'%" + query + "%'";
			}
			System.out.println("sql=" + sql);
			count = db.executeQuery(sql);
//			System.out.println("count=" + count);

			sql = "select * from " + tableName;
			if (!query.equals("")) {
				sql += " where " + qtype + " like " +"'%" + query + "%'";
			}
			sql += " order by " + sortname + " " + sortorder;
			sql += " limit "
					+ ((Integer.parseInt(pageIndex) - 1) * Integer
							.parseInt(pageSize)) + "," + pageSize;
			System.out.println("sql=" + sql);
			list = db.executeQueryList(sql);
//			System.out.println("list.size=" + list.size());
			if (list == null) {
				System.out.println("======出错啦======");
				return;
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

		Map map = new HashMap();
		map.put("page", pageIndex);
		map.put("total", count + "");
		//to JSON
		String json = toJSON(list, map);

		response.getWriter().write(json);
		response.getWriter().flush();
		response.getWriter().close();

	}

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

	public void destroy() {
		db.closeCurrentConnection();
	}

	/**
	 * 数据JSON格式化 
	 * 
	 * @param list
	 * @param map
	 * @return
	 */
	@SuppressWarnings("unchecked")
	private String toJSON(List list, Map map) {
		List mapList = new ArrayList();
		for (int i = 0; i < list.size(); i++) {
			Map cellMap = new HashMap();
			cellMap.put("id", ((Map) list.get(i)).get("id").toString());
			cellMap.put("cell", new Object[] { 
					//"<input type='checkbox'/>",
					((Map) list.get(i)).get("id"),
					((Map) list.get(i)).get("job_name"),
					((Map) list.get(i)).get("work_address"),
					((Map) list.get(i)).get("salary"),
					((Map) list.get(i)).get("date"),
					((Map) list.get(i)).get("language") });
			mapList.add(cellMap);
		}
		map.put("rows", mapList);
		JSONObject object = new JSONObject(map);
//		System.out.println("object="+object.toString());
		return object.toString();
	}

	String[] fields={"id","job_name","work_address","salary","date","language"};
}



你可能感兴趣的:(jQuery插件flexiGrid的完全使用,附代码下载)