您的位置:首页 > Web前端 > JQuery

jQuery 插件简单学习

2013-03-09 10:18 218 查看
(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

<%@ 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/jquery.magnify-1.0.2.js" charset="utf-8"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#bigImage").magnify(); //直接使用默认的magnify

$("#computerId").magnify({

showEvent: 'mouseover', //显示放大镜效果时需要触发事件

hideEvent: 'mouseout', //隐藏放大镜效果时需要触发事件

lensWidth: 60, //鼠标在小图片中移动的提示镜头宽度

lensHeight: 60, //鼠标在小图片中移动的提示镜头高度

preload: false, //是否预先加载

stagePlacement: 'right', //放大图片后显示在小图片的方向

loadingImage: 'image/ipad.jpg', //加载图片时的提示动态小图片

lensCss: { backgroundColor: '#cc0000', //鼠标在小图片中移动的提示镜头CSS样式

border: '0px', //放大图片的边框效果

opacity: 0 }, //不透明度

stageCss: { border: '1px solid #33cc33',width:400,height:400} //镜台CSS样式

});

});

</script>

</head>

<body>

<a href="image/ipad.jpg" id="bigImage">

<img alt="" src="image/ipad.jpg" width="350" height="150">

</a>

<br>

<a href="image/computer.jpg" id="computerId">

<img alt="" src="image/computer.jpg" width="200" height="150">

</a>

</body>

</html>

(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)异步上传

<%@ 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/ajaxupload.3.6.js"

charset="utf-8"></script>

<script type="text/javascript">

$(document).ready(function() {

var uploadObj = {

action : 'ajaxFileUploadAction.html',

name : 'upload',

onSubmit : function(file, type) {

//alert("gag");

},

onComplate : function(file, data) {

alert("true");

}

};

new AjaxUpload($("[type='submit']"), uploadObj);

});

</script>

</head>

<body>

<form action="" enctype="multipart/form-data" method="post">

<input type="file" name="upload"><input type='submit'

value="上传">

</form>

</body>

</html>

(5)日历

<%@ 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/jquery-ui.js" charset="utf-8"></script>

<script type="text/javascript" src="js/ui.datepicker-zh-CN.js" charset="utf-8"></script>

<link href="css/jquery-ui.css" rel="Stylesheet">

<script type="text/javascript">

$(document).ready(function(){

$("[name='data']").datepicker({

//dateFormat:'yy-mm-dd'

});

});

</script>

</head>

<body>

<input type="text" name="data">

</body>

</html>

后台的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;

}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: