Jquery ZTree 异步加载默认选中第一个节点下的第一个子节点
2014-07-16 09:29
411 查看
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="${pageContext.request.contextPath}/cms/css/layout.css" type="text/css" rel="stylesheet"/>
<script src="${pageContext.request.contextPath}/cms/js/jquery-1.7.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/cms/js/iframe/list.js" type="text/javascript"></script>
<!-- 树形菜单 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/cms/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/cms/zTree/js/jquery.ztree.all-3.5.js"></script>
<!-- 加密headerType -->
<script src="${pageContext.request.contextPath}/cms/js/baseCode16.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/cms/js/jquery.dialog.js" type="text/javascript"></script>
<script type="text/javascript">
var setting = {
view: {
selectedMulti: false,//不允许同时选中多个节点
showLine: true,//不显示节点之间的连线
showTitle: false//设置不显示提示信息
},
async:{
enable: true,
url:getAsyncUrl,//动态获取
autoParam:['id'],//动态获取树形菜单id并传递
dataFilter: filter
},
callback: {
onClick: onClick,
onAsyncSuccess: zTreeOnAsyncSuccess
}
};
var firstAsyncSuccessFlag = 0;
function zTreeOnAsyncSuccess(event, treeId, msg) {
if (firstAsyncSuccessFlag == 0) {
var zTree = $.fn.zTree.getZTreeObj("channelTree");
//调用默认展开第一个结点
var selectedNode = zTree.getSelectedNodes();
var nodes = zTree.getNodes();
zTree.expandNode(nodes[0], true);
var childNodes = zTree.transformToArray(nodes[0]);
zTree.expandNode(childNodes[1], true);
var childNodes1 = zTree.transformToArray(childNodes[1]);
zTree.checkNode(childNodes1[1], true, true);
zTree.selectNode(childNodes1[1]); //选中第一个父节点下面第一个子节点
zTree.expandNode(childNodes1[1], true);
zTree.setting.callback.onClick(null, zTree.setting.treeId, childNodes1[1]);//点击第一个父节点下面第一个子节点
var childNodes2 = zTree.transformToArray(childNodes1[1]);
zTree.checkNode(childNodes2[1], true, true);
firstAsyncSuccessFlag = 1;
}
}
function onClick(event, treeId, treeNode, clickFlag) {
firstAsyncSuccessFlag = 1;
var zTree = $.fn.zTree.getZTreeObj("channelTree");
zTree.expandNode(treeNode);
var currentId = treeNode.id;
var type = treeNode.type;
$("#currentId").val(currentId);
$("#type").val(type);
//alert(type);
if(type == "1" || type == "2"){
return;
}else{
//根据点击节点动态跳转到对应的页面
var url = '${pageContext.request.contextPath}/cms/core/modules/';
url+="channel/showChannel.jsp?channelId="+currentId+"&search=1,target:'detailChannel'";
}
//$("#form").submit();
window.parent.detailChannel.location.href=url;
//$("#checkedTreeNodeId").val(treeNode.id);
}
function getAsyncUrl(treeId, treeNode) {
var url = '<%=path%>/commonAction.do?m=treeChannelMenu'
if(!treeNode)return url;
var type = treeNode.type;
url += '&type='+type;
return url;
};
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
var childNodesName;
for (var i=0, l=childNodes.length; i<l; i++) {
childNodesName = childNodes[i].name;
childNodesName = childNodesName.replace(/\.n/g, '.');
}
return childNodes;
}
$(function(){
$.fn.zTree.init($("#channelTree"), setting);
$("#channelTree_1_a").click();
$("#channelTree_17_a").click();
$("#channelTree_34_a").click();
//$("#detailChannel").submit();
});
function check(){
alert($("#currentId").val());
}
function showRecycleChannel(dd){
var siteId = $("#currentId").val();
var type = $("#type").val();
if(type == "1" || type == "3" || siteId == "" || siteId == null){//如果没选中任何公司,则不返回站点回收站
alert("请选择一个站点!!");
return;
}
var no = getEncodeBase16(strUnicode2Ansi("headerType;1"));
var url = '${pageContext.request.contextPath}/cms/core/modules/';
url +='channel/recycleChannel.jsp?headerType='+no+'&leftType='+2+"&siteId="+siteId;
dd.href = url;
}
function deleteChannel(cc){
var channelId = $("#currentId").val();
var type = $("#type").val();
if(type == "1" || type == "2" || channelId == "" || channelId == null){
alert("请选择一个栏目!!");
return;
}
cc.href = "${pageContext.request.contextPath}/cms/core/modules/channel/dealChannel.jsp?method=delete&channelId="+channelId;
$.fn.zTree.init($("#channelTree"), setting);
$("#detailSite").submit();
}
function addChannel(bb){
var currentId = $("#currentId").val();
var type = $("#type").val();
//alert(type);
if(currentId == null || currentId == "" || type=="1"){
alert("请选中一个站点或栏目!!");
return;
}
bb.href = "${pageContext.request.contextPath}/cms/core/modules/channel/addChannel.jsp?currentId="+currentId+"&type="+type+"&s="+0;
}
function updateChannel(str){
var currentId = $("#currentId").val();
var type = $("#type").val();
if(currentId == null || currentId == "" || type == "1" || type == "2"){
alert("请选中一个栏目!!");
return;
}
window.parent.detailChannel.location.href = "${pageContext.request.contextPath}/cms/core/modules/channel/editChannel.jsp?channelId="+currentId+"&type="+type;
}
function showDiv(){
var currentId = $("#currentId").val();
var type = $("#type").val();
if(currentId == "" || type == "1" || type == "2"){
alert("请选择一个栏目!!");
return;
}
//alert(currentId);
var iframesrc = '${pageContext.request.contextPath}/cms/core/modules/channel/channelChangePosition.jsp?currentId='+currentId;
var dialog=jQuery.dialog({
width:489,
height:507,
content:'<iframe src="'+iframesrc+'" width="100%" height="100%" name="showDiv" frameborder="0" scrolling="no"></iframe>'
});
}
function showDivOrder(){
var currentId = $("#currentId").val();
var type = $("#type").val();
if(currentId == "" || type == "1" || type == "2"){
alert("请选择一个栏目!!");
return;
}
//alert(currentId);
var iframesrc = '${pageContext.request.contextPath}/cms/core/modules/channel/channelOrder.jsp?currentId='+currentId;
var dialog=jQuery.dialog({
width:489,
height:507,
content:'<iframe src="'+iframesrc+'" width="100%" height="100%" name="showDiv" frameborder="0" scrolling="no"></iframe>'
});
}
</script>
</head>
<body>
<form id="form" action="${pageContext.request.contextPath}/cms/core/modules/channel/showChannel.jsp">
<input id="currentId" type="hidden"/>
<input id="type" type="hidden"/>
</form>
<div class="center_list">
<div class="navigation">
<ul>
<li><a href="javascript:void(0);" onclick="addChannel(this);" target="detailChannel"><span class="icon_new"></span><span class="navigation_text">新建</span></a></li>
<li><a href="javascript:void(0);" onclick="updateChannel(this);"><span class="icon_update"></span><span class="navigation_text">修改</span></a></li>
<li><a href="javascript:void(0);" onclick="deleteChannel(this);"><span class="icon_remove"></span><span class="navigation_text">删除</span></a></li>
<li><a href="javascript:void(0);" onclick="showDivOrder();"><span class="icon_order"></span><span class="navigation_text">排序</span></a></li>
<li><a href="javascript:void(0);" onclick="showDiv();"><span class="icon_move"></span><span class="navigation_text">移动</span></a></li>
<li><a href="javascript:void(0);" onclick="showRecycleChannel(this);" target="_top"><span class="icon_reback"></span><span class="navigation_text">栏目回收站</span></a></li>
</ul>
</div>
<div id="channelTree" class="ztree" style="height:500px;overflow:auto">
</div>
</div>
<form action="${pageContext.request.contextPath}/cms/core/modules/channel/showChannel.jsp" method="post" target="detailChannel" id="detailChannel">
</form>
<input type="hidden" id="checkedTreeNodeId"/>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jsTree基本使用（新增，修改，删除，移动，点击，加载默认选中根节点，异步加载数据）
- ztree 默认设置选中第一个子节点，根节点禁止选中（只有一个根结点时）；选中想选中的子节点
- jquery EasyUi 添加节点、展开所有节点、默认选中第一个节点
- C#中不让TreeView 默认选中第一个节点的方法
- easyui tree 默认选中第一个节点
- extjs combox 默认 选中 异步加载 加载后 选中 select combo
- zTree异步加载数据，默认展开全部节点
- VS2008的MFC中CtreeCtrl默认选中第一个子节点
- extjs TreePanel 加载数据后默认选中第一个孩子并展开子级
- datagridview加载数据后默认不选中首行
- MzTreeView1.4版本,异步动态加载子节点
- extjs4.0 动态异步加载节点数据
- TreeView 控件树节点 TreeNode 的异步加载及对节点 CHECKBOX 的多选控制
- 如何设置extextenders tabcontainer 加载时默认显示第一个TabPnel
- flex tree默认展开第一个节点
- 表格加载后默认选中第一行，并可键盘导航
- c# 中treeview 树节点图标的动态加载，及选中时图标改变
- MyTree树控件_Ajax实现异步加载节点
- c# 中treeview 树节点图标的动态加载，及选中时图标改变
- JSTL做性别加载时的默认选中(string类)