在这个例子中其实不光使用了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
<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
备注: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"}; }