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();
}
}
4839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
