（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="https://www.jb51.net/js/jQuery-1.8.0.js" charset="utf-8"></script> <script type="text/javascript" src="https://www.jb51.net/js/flexigrid.js" charset="utf-8"></script> <script type="text/javascript" src="https://www.jb51.net/js/flexigrid.pack.js" charset="utf-8"></script> <link href="https://www.jb51.net/css/flexigrid.css"> <link href="https://www.jb51.net/css/flexigrid.pack.css"> <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></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="https://www.jb51.net/js/jquery-1.8.0.js" charset="utf-8"></script> <script type="text/javascript" src="https://www.jb51.net/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: 'https://www.jb51.net/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="https://www.jb51.net/image/ipad.jpg"> <img alt="" src="https://www.jb51.net/image/ipad.jpg"> </a> <br> <a href="https://www.jb51.net/image/computer.jpg"> <img alt="" src="https://www.jb51.net/image/computer.jpg"> </a> </body> </html>
（3）autoComplete