<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<meta name="decorator" content="default"/>
<link href="${ctxStatic}/jquery-ztree/3.5.12/css/zTreeStyle/zTreeStyle.min.css" rel="stylesheet" type="text/css"/>
<script src="${ctxStatic}/jquery-ztree/3.5.12/js/jquery.ztree.all-3.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#channelId").val("${channelId}");
var setting = {check:{enable:true,nocheckInherit:true},view:{selectedMulti:false},
data:{simpleData:{enable:true}},callback:{beforeClick:function(id, node){
tree.checkNode(node, !node.checked, true, true);
return false;
}}};
//以下treeNodes为示例
var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"},
......
];
// 用户-菜单
/*var treeNodes=[
<c:forEach items="${areaAll}" var="administrtiveDivisions">{id:"${administrtiveDivisions.id}",
pId:"${not empty administrtiveDivisions.parent.id?administrtiveDivisions.parent.id:0}",
name:"${not empty administrtiveDivisions.parent.id?administrtiveDivisions.name:'列表'}"},
</c:forEach>]; **/
// 初始化树结构
var tree = $.fn.zTree.init($("#menuTree"), setting, treeNodes);
// 不选择父节点(选择任意节点不连带父节点或子节点)
/* <c:forEach items="${areaChannel}" var="area">
var node = tree.getNodeByParam("id", 1);
try{tree.checkNode(node, true, false);}catch(e){}
</c:forEach> */
// 默认选择一个节点
var node = tree.getNodeByParam("id", "${area.areaCode}");
try{tree.checkNode(node, true, false);}catch(e){}
// 默认展开全部节点
tree.expandAll(true);
});
function savearea(){
var zTreeOjb = $.fn.zTree.getZTreeObj("menuTree"); //ztree的Id zTreeId
//获取复选框/单选框选中的节点:
var checkedNodes = zTreeOjb.getCheckedNodes();
var ids="";
for(var i=0; i<checkedNodes.length; i++) {
ids+=checkedNodes[i].id+",";
}
$("#areaIds").val(ids);
$("#inputForm").submit();
}
</script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="${ctx}/channelmanage/channel/">频道列表</a></li>
<li class="active"><a href="">频道区域修改</a></li>
</ul><br/>
<form:form id="inputForm" modelAttribute="channel" action="${ctx}/channelmanage/channel/saveArea" method="post" class="form-horizontal">
<form:hidden path="id"/>
<div class="control-group">
<label class="control-label">频道区域:</label>
<div class="controls">
<div id="menuTree" class="ztree" style="margin-top:3px;float:left;"></div>
<input type="hidden" id ="areaIds" name="areaIds" />
<input type="hidden" id ="channelId" name="channelId" />
</div>
</div>
<div class="form-actions">
<input id="btnSubmit" class="btn btn-primary" type="button" οnclick="savearea()" value="保 存"/>
<input id="btnCancel" class="btn" type="button" value="返 回" οnclick="history.go(-1)"/>
</div>
</form:form>
</body>
</html>
<html>
<head>
<meta name="decorator" content="default"/>
<link href="${ctxStatic}/jquery-ztree/3.5.12/css/zTreeStyle/zTreeStyle.min.css" rel="stylesheet" type="text/css"/>
<script src="${ctxStatic}/jquery-ztree/3.5.12/js/jquery.ztree.all-3.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#channelId").val("${channelId}");
var setting = {check:{enable:true,nocheckInherit:true},view:{selectedMulti:false},
data:{simpleData:{enable:true}},callback:{beforeClick:function(id, node){
tree.checkNode(node, !node.checked, true, true);
return false;
}}};
//以下treeNodes为示例
var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"},
......
];
// 用户-菜单
/*var treeNodes=[
<c:forEach items="${areaAll}" var="administrtiveDivisions">{id:"${administrtiveDivisions.id}",
pId:"${not empty administrtiveDivisions.parent.id?administrtiveDivisions.parent.id:0}",
name:"${not empty administrtiveDivisions.parent.id?administrtiveDivisions.name:'列表'}"},
</c:forEach>]; **/
// 初始化树结构
var tree = $.fn.zTree.init($("#menuTree"), setting, treeNodes);
// 不选择父节点(选择任意节点不连带父节点或子节点)
tree.setting.check.chkboxType = { "Y" : "", "N" : "" };
// 不选择父节点(选择某一节点连带父节点或子节点)
// tree.setting.check.chkboxType = { "Y" : "ps", "N" : "s" };
/* <c:forEach items="${areaChannel}" var="area">
var node = tree.getNodeByParam("id", 1);
try{tree.checkNode(node, true, false);}catch(e){}
</c:forEach> */
// 默认选择一个节点
var node = tree.getNodeByParam("id", "${area.areaCode}");
try{tree.checkNode(node, true, false);}catch(e){}
// 默认展开全部节点
tree.expandAll(true);
});
function savearea(){
var zTreeOjb = $.fn.zTree.getZTreeObj("menuTree"); //ztree的Id zTreeId
//获取复选框/单选框选中的节点:
var checkedNodes = zTreeOjb.getCheckedNodes();
var ids="";
for(var i=0; i<checkedNodes.length; i++) {
ids+=checkedNodes[i].id+",";
}
$("#areaIds").val(ids);
$("#inputForm").submit();
}
</script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="${ctx}/channelmanage/channel/">频道列表</a></li>
<li class="active"><a href="">频道区域修改</a></li>
</ul><br/>
<form:form id="inputForm" modelAttribute="channel" action="${ctx}/channelmanage/channel/saveArea" method="post" class="form-horizontal">
<form:hidden path="id"/>
<div class="control-group">
<label class="control-label">频道区域:</label>
<div class="controls">
<div id="menuTree" class="ztree" style="margin-top:3px;float:left;"></div>
<input type="hidden" id ="areaIds" name="areaIds" />
<input type="hidden" id ="channelId" name="channelId" />
</div>
</div>
<div class="form-actions">
<input id="btnSubmit" class="btn btn-primary" type="button" οnclick="savearea()" value="保 存"/>
<input id="btnCancel" class="btn" type="button" value="返 回" οnclick="history.go(-1)"/>
</div>
</form:form>
</body>
</html>