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>
<!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>
<%@ 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();
- }
- }
打包的例子在我的资源里:checkboxtree-0.3.1.rar