jquery的实现方式:
<!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>
<title>jquery treeview 的选中子目录,同时选中父目录,关联选择</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link type="text/css" href="css/css.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//wirted by qq:190988779 at 2010-1-5 9:52:08
//可以配合jquery treeview使用效果很好。
$(document).ready(function(){
$(".content input[type='checkbox'][name='c']").click(function(){
//子目录
var c = $(this).parent().find("input");
var b = $(this).attr('checked');
c.each(function(){
$(this).attr('checked',b);
});
var m = $(this).parent().parent('ul').find('input');
var count = 0;
m.each(function(){
if($(this).attr('checked')){
count++;
}
});
//父目录
var p = $(this).parents('li');//父目录
p.each(function(){
var o = $(this).find('input');
if(count){
o[0].checked = true;
}else{
o[0].checked = !o[0].checked;
}
});
$(this).attr('checked',b);
});
});
</script>
</head>
<body>
<div id="divMsg"> </div>
<div class="content">
<h1>jquery treeview 的选中子目录,同时选中父目录,关联选择</h1>
<ul class="scrollBox">
<li><input type="checkbox" name="c" value=2 /><a href="#">2</a> </li>
<li><input type="checkbox" name="c" value=3 /><a href="#">3</a>
<ul class="d">
<li><input type="checkbox" name="c" value=6 /><a href="#">6</a></li>
<li><input type="checkbox" name="c" value=5 /><a href="#">5</a>
<ul class="class100">
<li><input type="checkbox" name="c" value=111 /><a href="#">111</a></li>
<li><input type="checkbox" name="c" value=100 /><a href="#">100</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
</ul>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <!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>产品维度信息</title> <% String path=request.getContextPath(); %> <script language="javascript" src="<%=path%>/js/main.js"></script> <script src="<%=path%>/js/dialog.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="<%=path%>/js/checkboxtree/jquery1.4.2.min.js"></script> <script type="text/javascript" src="<%=path%>/js/checkboxtree/jquery-ui1.8.0.min.js"></script> <link rel="stylesheet" type="text/css" href="<%=path%>/js/checkboxtree/demo.css"> <link rel="stylesheet" type="text/css" href="<%=path%>/js/checkboxtree/jquery.checkboxtree.css"> <script type="text/javascript" src="<%=path%>/js/checkboxtree/jquery.checkboxtree.js"></script> <style type="text/css"> body{margin:0px;padding:0px;font-size:12px;} #main{ margin-left:auto; margin-right:auto;} #wrapper{margin:0px auto;width:520px;margin:10px;height:auto;} </style> <script type="text/javascript"> var closeFun = function(){ parent.dhtmlwindow.closeDialog({ success:true,returnValue:'' }); }; function submints() { theForm.submit(); //window.location.target="mainFrame" closeFun(); } function goback(){ parent.dhtmlwindow.closeDialog({ success:false,returnValue:'' }); } function select(sobj){ $.ajax({ type: "POST", url: "<%=path%>/cotton/productExtSelect.action", data: "stringArg="+$(sobj).val(), dataType:"json", success: function(data){ $("input[name='list']").each(function(){ $(this).removeAttr("checked"); }); $.each(data,function(idx,item){ $("input[name='list']").each(function(){ if($(this).val()==item.codeIdAndCodeName) { $(this).attr("checked",'true'); } }); }); } }); } $(document).ready(function() { $('#tree').checkboxTree(); }); </script> </head> <body> <div id="wrapper"> <div id="main"> <form action="<%=path%>/cotton/productExtSave.action" method="post" name="theForm"> <div id="main_center"> <table align="center" > <tr> <td height="30" colspan="4" align="center">请 选 择 产 品 及 维 度 信 息</td> </tr> <tr> <td width="100" height="30" align="center">产品:</td> <td width="180" height="30"><div align="left"><strong> <s:select name="stringArg" list="productCodeList" headerKey="" headerValue="请选择" listKey="productCode" listValue="productPyAndName" theme="simple" οnchange="javascript:select(this)"></s:select> </strong></div></td> </tr> <tr> <td width="46" align="center" valign="middle">维度:</td> <td colspan="3" align="left"> <ul id="tree"> <s:iterator value="codeList" status="index" var="ccode"> <li> <input type="checkbox" name="list" value="<s:property value="codeIdAndCodeName"/>"/><s:property value="codeName"/> <s:if test="childList!=null"> <ul> <s:iterator value="childList" status="index2"> <li> <input type="checkbox" name="list" value="<s:property value="codeIdAndCodeName"/>"/><s:property value="codeName"/> </li> </s:iterator> </ul> </s:if> </li> </s:iterator> </ul> </td> </tr> </table> </div> <div class="btn_area" style="text-align:center; margin-bottom:10px;"> <input type="button" οnclick="submints();" class="btn_bg3" name="btn_update" id="update" value="提交" /> <input type="button" οnclick="goback();" class="btn_bg3" name="btn_close" id="update" value="取消" /> </div> </form> </div> </div> </body> </html>
服务端代码:
public void productExtSelect(){
try {
if(stringArg!=null){
cproductExtExample.clear();
cproductExtExample.createCriteria().andProductCodeEqualTo(stringArg);
List<ProductExt> peList = cproductExtDao.selectByExample(cproductExtExample);
JSONArray json = JSONArray.fromObject(peList);
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("application/json;charset=UTF-8");
response.setCharacterEncoding("utf-8");
response.setHeader("Charset", "utf-8");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().println(json.toString());
}
} catch (Exception e) {
e.printStackTrace();
}
}