jQuery 插件简单学习

益和雅

2023-12-01

（1）异步分页插件flexgrid

1）前台js

<%@ page language="java" contentType="text/html; charset=utf-8"
   pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.0.js" charset="utf-8"></script>
<script type="text/javascript" src="js/flexigrid.js" charset="utf-8"></script>
<script type="text/javascript" src="js/flexigrid.pack.js" charset="utf-8"></script>

<link href="css/flexigrid.css" rel="Stylesheet">
<link href="css/flexigrid.pack.css" rel="Stylesheet">
<script type="text/javascript" charset="utf-8">
   $(document).ready(function() {
       $("#flexigridTable").flexigrid({
           url : 'flexigridAction.html',    //请求数据的路径
           method : 'POST',                 //请求方式
           dataType : 'json',               //返回的数据类型
           colModel : [ {                        //对table的组织
               display : '编  号',       //表头信息
               name : 'id',                        //对应json的字段
               width : 200,
               sortable : true,                    //是否可排序
               align : 'center',
                   hide :false                      //是否可见
           }, {
               display : '分类编号',
               name : 'catalogId',
               width : 200,
               sortable : true,
               align : 'center'
           }, {
               display : '分类名称',
               name : 'catalogName',
               width : 200,
               sortable : true,
               align : 'center'
           }, {
               display : '分类总数',
               name : 'count',
               width : 200,
               sortable : false,
               align : 'center'
           } ],
           buttons : [ {                             //增加button
               name : '增加',                         //button的value
               bClass : 'add',                        //样式
               onpress : test                         //事件
           }, {
               name : '删除',
               bClass : 'delete',
               onpress : test
           },{
               name : '修改',
               bClass : 'modify',
               onpress : test
           }, {
               separator : true                     //是否有分隔
           } ],
           sortname : 'id',                         //按那一列排序
           useRp : true,                            //是否可以动态设置每一页的结果数
           page : 1,                                //默认的当前页
/*            total : 4,                               //总的条数，在后台进行设置即可
*/
           showTableToggleBtn : false,               //是否显示【显示隐藏Grid】的按钮
           width : 850,
           height : 300,
           rp : 3,                                   //每一页的默认数
           usepager : true,                          //是否分页
           rpOptions : [ 3, 6, 9, 15 ],              //可选择设定的每页结果数
           resizable:true    ,                      //table是否可以伸缩
           title:'商品信息',
           errormsg:'加载数据出错',
           procmsg:'正在处理，请稍候'
       });

   });
   function test(com, grid) {
       if (com == '删除') {
           //alert($(".trSelected td:first",grid).text());

           var a = confirm('是否删除这 ' + $('.trSelected', grid).length + ' 条记录吗?');
           if (a) {
               $(".trSelected", grid).remove();
               //删除数据的ajax请求
           }
       } else if (com == '增加') {
           alert('增加一条！');
           //打开一个页面，新增数据
       }else{
           var tr = $(".trSelected:first",grid);
/*            alert(grid.html());
*/           var data = [];
           var tds = tr.children();
           for(var i = 0 ; i < tds.length ; i++){
               data[data.length] = $(tds[i]).text();
               //alert($(tds[i]).text());
           }
           //打开一个页面进行数据修改
       }
       //$("#flexigridTable").flexReload();
   }
</script>
</head>
<body>
   <table id="flexigridTable" align="center"></table>
</body>
</html>

2）后台action

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

（2）放大镜，magnify

（3）autoComplete

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>autoComplete jquery</title>
<script type="text/javascript" src="js/jquery-1.8.0.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js" charset="utf-8"></script>
<link href="css/jquery.autocomplete.css" rel="Stylesheet">
<script type="text/javascript">
   $(document).ready(
           function() {
               $("#kw").autocomplete(
                       "autoCompleteJQueryAction.html",
                       {
                           minChars : 1, //在触发autoComplete前用户至少需要输入的字符数.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);
                       });
           });
</script>

</head>
<body>
<input type="text" style="width:474px;" maxlength="100" id="kw" name="wd">
   <input type="submit" value="submit" name="search">
</body>
</html>

(4)异步上传

（5）日历

后台的action如下：

package com.jquery.plugin.action;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.ServletActionContext;
import org.apache.struts2.json.annotations.JSON;

import com.jquery.plugin.dao.DataDao;
import com.jquery.plugin.pojo.Catalog;
import com.opensymphony.xwork2.Action;
import com.opensymphony.xwork2.ActionSupport;

public class JQueryAction extends ActionSupport{
   /**
   *
   */
   private static final long serialVersionUID = 1L;
   private String q ;
   private Integer rp;
   private Integer page;
   private Integer total;
   private List<Catalog> serarchResult = new ArrayList<Catalog>();
    private List<Catalog> rows = new ArrayList<Catalog>();
    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<Catalog> getSerarchResult() {
       return serarchResult;
   }

   public List<Catalog> getRows() {
       return rows;
   }

   public void setRows(List<Catalog> 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<Catalog> 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<Catalog> 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, 0, buffer.length))!=-1){
               out.write(buffer, 0, 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 插件简单学习

相关阅读

相关文章

相关问答

相关文档