Checkbox类：
1.实现checkbox的全选功能
<script type="text/javascript"> //全选checkbox：1、当全选checkbox勾选，子checkbox(name为'ids'的checkbox)自动全部勾选 // 2、当全选checkbox取消勾选，子checkbox自动全部取消勾选 function checkAll(){ if($("#checkall")[0].checked){ $("input[type='checkbox'][name='ids']").attr("checked","checked"); }else{ $("input[type='checkbox'][name='ids']").attr("checked",null); } } //子checkbox：1、当所有子checkbox全部勾选时，全选checkbox自动勾选 //2、当有一个子checkbox没有勾选时，全选checkbox自动改为未勾选 function changeCheckCount(){ var count=0; $("input[type='checkbox'][name='ids']").each(function(index,data){ if(this.checked){ count++; } }); if(count== $("input[type='checkbox'][name='ids']").length){ $("#checkall").attr("checked","checked"); }else{ $("#checkall").attr("checked",null); } } </script>
<td><!-- 全选checkbox --> <s:checkbox name="checkall" id="checkall" value="" cssClass="checkbox" οnclick="checkAll()"/> </td> <td><!-- 子checkbox --> <s:checkbox name="ids" fieldValue="" cssClass="checkbox" οnclick="changeCheckCount()"/> <s:checkbox name="ids" fieldValue="" cssClass="checkbox" οnclick="changeCheckCount()"/> <s:checkbox name="ids" fieldValue="" cssClass="checkbox" οnclick="changeCheckCount()"/> <s:checkbox name="ids" fieldValue="" cssClass="checkbox" οnclick="changeCheckCount()"/> </td>
2.获取checkbox被选中的个数，并将checkbox的值组织成字符串
<script type="text/javascript"> //1、获取checkbox选中的个数：count //2、将选中的checkbox的值(此例子为id)组织成"id,id,id,..."类型的字符串,方便action获取：ids function checkbox(){ var count=0; var ids=""; $("input[type='checkbox'][name='ids']").each(function(index,data){ if(this.checked){ count++; if(count==1){ ids=$(this).val(); }else{ ids=ids+","+$(this).val(); } } }); } </script>
<td> <s:checkbox name="ids" fieldValue="" cssClass="checkbox" /> <s:checkbox name="ids" fieldValue="" cssClass="checkbox" "/> <s:checkbox name="ids" fieldValue="" cssClass="checkbox" "/> <s:checkbox name="ids" fieldValue="" cssClass="checkbox" "/> </td>
Select类
1.jQuery实现下拉列表的联动，实现省份和城市的关联
<script type="text/javascript"> //实现省份和城市的二级联动 /* jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求,[]为可选属性,此例子选了[data],[callback] 参数： url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。 callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。 type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等) */ function showCity(value){ //通过action里的showCity函数实现通过省份名字获取对应省份下的城市列表,并返回相应的数据 //{name:value}：value为省份下拉列表传过来的省份名字 $.post("${pageContext.request.contextPath}/company_showCity.action",{name:value} ,function(data,textStatuts){ //alert(data); var dataObj=eval("("+data+")"); //alert(dataObj); //先删除之前一次加载的城市 $("select[name='city'] option[value!='']").remove(); //将城市封装成option后加到select里,格式如下 // <select name="city" style="width:90%"> //<option value="">--------</option> //</select> for(var i=0;i<dataObj.length;i++){ var $option=$("<option></option>"); $option.attr("value",dataObj[i].name); $option.text(dataObj[i].name); $("select[name='city']").append($option); } }); } </script>
<tr> <td>省份：</td> <td> <s:select list="#provinceList" name="province" id="province" listKey="name" listValue="name" headerKey="" headerValue="--------" cssStyle="width:90%" οnchange="showCity(this.value)"> </s:select> </td> <td>城市：</td> <td> <s:select list="{}" name="city" id="city" headerKey="" headerValue="--------" cssStyle="width:90%" > </s:select> </td> </tr>
company.action中的showCity函数
/** 通过省份显示对应城市 * @throws IOException **/ public String showCity() throws IOException{ //拿到jsp中省份的名字 String name=request.getParameter("name"); if(StringUtils.isNotBlank(name)){ //通过省份名字拿到对应省份实体(下面查询城市时,用来拿省份id) Province province=provinceService.findProvinceByName(name); //通过省份id查询该省份下的所有城市 List<City> cityList=cityService.findCityByPid(province.getId()); //New一个JsonConfig JsonConfig config=new JsonConfig(); //设置不要获取的属性列,只取city表里的name属性,根据自己定义的city表进行定义, config.setExcludes(new String[]{"id","pycode","pid","postcode","areacode"}); //将List转换为jsonArray JSONArray jsonArray=JSONArray.fromObject(cityList,config); response.setCharacterEncoding("utf-8"); //将jsonArray转成字符串后发送给jsp页面 response.getWriter().print(jsonArray.toString()); } return null; }
工具类
1.实现一个实时时钟
js文件：onclock.js
//此文件为:onclock.js function clockon(bgclock){ var now=new Date(); var year=now.getYear(); var month=now.getMonth(); var date=now.getDate(); var day=now.getDay(); var hour=now.getHours(); var minu=now.getMinutes(); var sec=now.getSeconds(); var week; month=month+1; if(month<10) month="0"+month; if(date<10) date="0"+date; if(hour<10) hour="0"+hour; if(minu<10) minu="0"+minu; if(sec<10) sec="0"+sec; var arr_week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); week=arr_week[day]; var time=""; time=year+"年"+month+"月"+date+"日 "+week+" "+hour+":"+minu+":"+sec; if(document.all){ bgclock.innerHTML="<b>"+time+"</b>"; } var timer=setTimeout("clockon(bgclock)",200); }
jsp页面代码如下：
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 引入js文件，根据自己放的路径修改 --> <script src="${pageContext.request.contextPath}/script/onclock.js"></script> <title>无标题文档</title> </head> <!-- 在body内加入onLoad="clockon(bgclock)" --> <body onLoad="clockon(bgclock)"> <!-- 在想要放时间的地方加入下面这行代码即可 --> <div align="left" id="bgclock"></div> </body> </html>
可以根据需求修改onclock.js文件中的配置，如：去掉年月日等等。
