jQuery插件简单学习实例教程

前端之家收集整理的这篇文章主要介绍了jQuery插件简单学习实例教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jQuery插件及其用法分享给大家供大家参考,具体如下:

(1)异步分页插件flexgrid

1)前台js

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Insert title here

2)后台action

最后只需返回一个 名字为 rows的json即可

(2)放大镜,magnify

<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> Insert title here

(3)autoComplete

<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> autoComplete jquery 用户至少需要输入的字符数.Default: 1 //matchContains : true,mustMatch : false,//如果设置为true,autoComplete只会允许匹配的结果出现在输入框 dataType : 'json',selectFirst:false,autoFill:false,//自动填充值 matchCase:false,//比较是否开启大小写敏感开关,默认false(指向后台传递的数据大小写) scroll:true,//当结果集大于默认高度时是否使用卷轴显示Default: true parse : function(resultData) { var rows = []; var d = resultData.serarchResult; for ( var i = 0; i < d.length; i++) { rows[i] = { data : d[i],value : d[i].catalogId,result : d[i].catalogName }; } return rows; },formatItem : function(row,i,max) { return row.catalogName + "[" + row.count + "]"; //return row.id+""; //结果中的每一行都会调用这个函数,显示的格式,row为每一个对象,i为下表从一开始,max为最大下标 } }).result(function(event,item){ alert(item.catalogName); }); });

(4)异步上传

<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> Insert title here

后台的action如下:

serarchResult = new ArrayList(); private List rows = new ArrayList(); private String sortname; private File upload; private String uploadFileName; public String getQ() { return q; } public void setQ(String q) { this.q = q; } public Integer getRp() { return rp; } public void setRp(Integer rp) { this.rp = rp; } public Integer getPage() { return page; } public void setPage(Integer page) { this.page = page; } @JSON(name="total") public Integer getTotal() { return total; } public String redirect(){ System.out.println("go.."); return Action.SUCCESS; } //{age:1}[search:{age:1}] @JSON(name="serarchResult") public List getSerarchResult() { return serarchResult; } public List getRows() { return rows; } public void setRows(List rows) { this.rows = rows; } public String getSortname() { return sortname; } public void setSortname(String sortname) { this.sortname = sortname; } public File getUpload() { return upload; } public void setUpload(File upload) { this.upload = upload; } public String getUploadFileName() { return uploadFileName; } public void setUploadFileName(String uploadFileName) { this.uploadFileName = uploadFileName; } public String autoCompleteJQuery(){ System.out.println("q:"+q); List result = DataDao.getList(); if(!"".equals(q)){ for (Catalog catalog : result) { if(catalog.getCatalogName().toLowerCase().contains(q.toLowerCase())){ serarchResult.add(catalog); } } } System.out.println(serarchResult.size()); return Action.SUCCESS; } public String flexigrid(){ try { List result = DataDao.getList(); Integer startIndex = (page-1)*rp; Integer endIndex = startIndex+rp; total = result.size(); while(endIndex>result.size()){ endIndex--; } System.out.println("page:"+page+":total:"+total); System.out.println("sortname:"+sortname); for(int i = startIndex ;i < (endIndex);i++){ rows.add(result.get(i)); } } catch (Exception e) { e.printStackTrace(); } return Action.SUCCESS; } public String ajaxFileUpload(){ System.out.println("begin..."); BufferedOutputStream out = null ; BufferedInputStream in = null ; String uploadPath = null ; String contextPath = null; try { //fileName = URLEncoder.encode(fileName,"GB2312"); System.out.println("fileName:"+uploadFileName); byte [] buffer = new byte[1024]; HttpServletRequest request = ServletActionContext.getRequest(); contextPath = request.getSession().getServletContext().getRealPath("/"); uploadPath = contextPath+"/upload/"+uploadFileName; System.out.println(uploadPath); out = new BufferedOutputStream(new FileOutputStream(uploadPath)); int len = 0 ; in = new BufferedInputStream(new FileInputStream(upload)); while((len = in.read(buffer,buffer.length))!=-1){ out.write(buffer,len); out.flush(); } } catch (FileNotFoundException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); }finally{ try { if(out != null){ out.close(); } if(in != null){ in.close(); } } catch (IOException e) { e.printStackTrace(); } } System.out.println("上传成功"); return null; } }

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《

希望本文所述对大家jQuery程序设计有所帮助。

原文链接:https://www.f2er.com/jquery/47480.html

猜你在找的jQuery相关文章