功能介绍:
- 使用JQuery控制复选框:复选框分标题行的和数据行的,选中标题行复选框则全选数据行的复选框,反之则全不选;同理若数据行的复选框全被选中了,则标题行的复选框被选中,否则不选中。
- 使用JQuery控制按钮的启用和禁用:若一个数据行被选中,则【删除一个】按钮可用,否则不可用;若没有选择了超过一个数据行,则【删除多个】按钮可用。
- 服务端使用Struts2和Json-lib返回数据。
本示例由一个JSP文件、一个Action文件和一个Service文件构成,相信您会明白的。
JSP文件
<%@taglib uri="/struts-tags" prefix="s"%><%@ 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"> <meta http-equiv="pragma" content="no-cache"/> <meta http-equiv="cache-control" content="no-cache"/> <meta http-equiv="expires" content="0"/> <title>基于JQuery的CheckBox多选单选操作演示</title> <SCRIPT type="text/javascript" src="js/jquery-1.4.4.min.js"></SCRIPT> <SCRIPT type="text/javascript"> function regeditCheckboxClick(){ $("tbody input").click(function(){ var totalInput = $("input[name='selectOne']"); var selInput = $("input[name='selectOne']:checked"); //设置删除一个按钮 if(selInput.size() == 1){ $("#delOne").attr("disabled",false); }else{ $("#delOne").attr("disabled",true); } //设置删除多个按钮 if(selInput.size() > 0){ $("#delMulti").attr("disabled",false); }else{ $("#delMulti").attr("disabled",true); } //设置全选复选框 if(selInput.size() == totalInput.size()){ $("#selectAll").attr("checked",true); }else{ $("#selectAll").attr("checked",false); } }); } function initData(){ $.post("listCheckbox2",null,function(json){ $("tbody").empty(); $("#delOne").attr("disabled",true); $("#delMulti").attr("disabled",true); $("#selectAll").attr("checked",false); for(var i=0;i<json.length;i++){ var tr = $("<tr></tr>"); tr.append('<td><input type="checkbox" name="selectOne" value="'+json[i].id+'"></td>'); tr.append("<td>"+json[i].id+"</td>"); tr.append("<td>"+json[i].name+"</td>"); $("tbody").append(tr); } regeditCheckboxClick(); },'json'); } $(function(){ initData(); //添加一个 $("#addOne").click(function(){ $.post("addOneCheckbox2",null,function(data){ initData(); },'text'); }); //删除一个 $("#delOne").click(function(){ var selCheckbox = $("input[name='selectOne']:checked"); var size = selCheckbox.size(); if(size == 1){ $.post("delOneCheckbox2",{"id":selCheckbox.val()},function(d){ initData(); },'text'); } }); //删除多个 $("#delMulti").click(function(){ var selCheckbox = $("input[name='selectOne']:checked"); var size = selCheckbox.size(); if(size > 0){ var params = ""; for(var i=0;i<size;i++){ params+='&ids='+selCheckbox.eq(i).val(); } $.post("delMultiCheckbox2",params.substring(1),function(d){ initData(); },'text'); } }); //全选复选框 $("#selectAll").click(function(){ //设置其他复选框 if($(this).attr("checked")){ $("input[name='selectOne']").attr("checked",true); }else{ $("input[name='selectOne']").attr("checked",false); } var selInput = $("input[name='selectOne']:checked"); //设置删除一个按钮 if(selInput.size() == 1){ $("#delOne").attr("disabled",false); }else{ $("#delOne").attr("disabled",true); } //设置删除多个按钮 if(selInput.size() > 0){ $("#delMulti").attr("disabled",false); }else{ $("#delMulti").attr("disabled",true); } }); }); </SCRIPT> </head> <body> <h3>使用JQuery实现数据的删除及显示</h3> <hr/> <div align="center"> <input type="button" id="addOne" value="添加一个"> <input type="button" id="delOne" value="删除一个"> <input type="button" id="delMulti" value="删除多个"> <table border="1" width="260px"> <thead> <tr> <th> <input type="checkbox" id="selectAll"> </th><th>编号</th><th>名称</th> </tr> </thead> <tbody></tbody> </table> </div> </body> </html>
Action文件
package com.zywang.action;
import java.io.IOException;
import java.util.List;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
import com.zywang.model.Teacher;
import com.zywang.services.CheckBoxService;
public class CheckBoxAction extends ActionSupport {
CheckBoxService checkBoxService = null;
int id;
int[] ids;
public List<Teacher> getTeachers() {
return getCheckBoxService().list();
}
/**
* 删除一个
* @return
*/
public String delOne() {
this.getCheckBoxService().del(id);
return null;
}
/**
* 删除多个
* @return
*/
public String delMulti() {
for (int i : ids) {
this.getCheckBoxService().del(i);
}
return null;
}
/**
* 添加一个
* @return
*/
public String addOne() {
this.getCheckBoxService().add();
return null;
}
/**
* 列表
* @return
*/
public String list() {
List<Teacher> list = getCheckBoxService().list();
String json = JSONArray.fromObject(list).toString();
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
try {
response.getWriter().write(json);
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
public CheckBoxService getCheckBoxService() {
return checkBoxService;
}
public void setCheckBoxService(CheckBoxService checkBoxService) {
this.checkBoxService = checkBoxService;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public int[] getIds() {
return ids;
}
public void setIds(int[] ids) {
this.ids = ids;
}
}
Service文件
package com.zywang.services.impl;
import java.util.List;
import java.util.Vector;
import com.zywang.model.Teacher;
import com.zywang.services.CheckBoxService;
public class CheckBoxServiceImpl implements CheckBoxService {
private static List<Teacher> teachers = new Vector<Teacher>();
private static int index=0;
static{
CheckBoxServiceImpl impl = new CheckBoxServiceImpl();
for(int i=0;i<10;i++){
impl.add();
}
}
@Override
public void add() {
index++;
Teacher teacher = new Teacher();
teacher.setId(index);
teacher.setName("教师["+index+"]");
teachers.add(teacher);
}
@Override
public void del(int id) {
for (Teacher teacher : teachers) {
if(teacher.getId() == id){
teachers.remove(teacher);
return;
}
}
}
@Override
public List<Teacher> list() {
return teachers;
}
}
Teacher对象(省略getter和setter)
public class Teacher {
int id;
String name;
}