当前位置: 代码迷 >> Web前端 >> jquery兑现的简单复选树,checkboxtree
  详细解决方案

jquery兑现的简单复选树,checkboxtree

热度:135   发布时间:2012-10-31 14:37:31.0
jquery实现的简单复选树,checkboxtree

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">&nbsp;</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" onchange="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" onclick="submints();" class="btn_bg3" name="btn_update" id="update" value="提交" />
                    <input type="button" onclick="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();
		}
	}
  相关解决方案