js 树菜单 ztree
/**
<div id="menuContent" class="menuContent" style=" position: absolute;">
<ul id="orgTree" class="ztree" style="margin-top:0; width:160px;"></ul>
</div>
*/
//var allowClick = true; //标记节点是否能被点击
var sdorg={};
/**
* 初始化组织机构树
* renderId 渲染位置
* nodeClick 点击时触发的事件
* beforeNodeClick 点击前触发的事件
* ischkbox 是否显示多选框
*/
sdorg.showcurrorg =function (renderId,nodeClick,beforNodeClick,ischkbox) {
var orgNodes;
var setting = {
data:{
simpleData:{
enable:true,
idKey:"id",
pIdKey:"parentId",
root:0
},
key:{
name:"orgName"
}
},
view:{
showIcon:true
},
check:{
enable:ischkbox
,chkStyle:'checkbox'
,chkboxType:{ "Y": "", "N": "" }
//,autoCheckTrigger: false
},
async:{
enable:true,
url:baseURL+"/org/org!listOrgNode.action",
autoParam:["id"],
dataFilter:ajaxDataFilter
},
callback:{
// onExpand:expandParentOrg,
onClick:nodeClick||_nodeClick,
beforeClick:beforNodeClick||_beforNodeClick,
}
};
var url =baseURL+'/org/org!listOrgRoot.action';
$.ajax({
url:url,
type:'post',
dataType:'json',
success:function (result) {
if ('0' == result.code) {
$.fn.zTree.init($('#'+renderId), setting, null);
var orgTree = $.fn.zTree.getZTreeObj(renderId);
orgTree.addNodes(null, result.data.orgList );
// 展开机构树的根节点
var rootNodes = orgTree.getNodes();
if (rootNodes.length > 0)
orgTree.expandNode(rootNodes[0], true, false, true);
//orgTree.expandAll(true);
} else {
alert(result.desc);
}
}
});
}
sdorg.showcurrorg1 =function (renderId,nodeClick,nodeCheck,ischkbox,beforeShow,onExpand,orgId,orgName) {
var orgNodes;
var setting = {
data:{
simpleData:{
enable:true,
idKey:"organizationId",
pIdKey:"parentId",
root:0
},
key:{
name:"organizationName"
}
},
view:{
showIcon:true
},
check:{
enable:ischkbox
,chkStyle:'checkbox'
,chkboxType: { "Y": "s", "N": "s" }
,autoCheckTrigger: true
},
async:{
enable:true,
url:baseURL+"/org/org!listOrgNode.action",
autoParam:["organizationId"],
dataFilter:ajaxDataFilter
},
callback:{
// onExpand:expandParentOrg,
onClick:nodeClick||_nodeClick,
onCheck:nodeCheck,
onExpand:onExpand
}
};
//var url = cur_user_id=="admin"?baseURL+'/orgext/orgext!listOrgRoot.action':baseURL+'/orgext/orgext!listOrgUnderCurrentUserOrg.action';
var url = orgId?baseURL+'/org/org!listOrgNode.action':baseURL+'/org/org!listOrgRoot.action';
// alert(orgId); return;
$.ajax({
url:url,
type:'post',
dataType:'json',
data:{organizationId:orgId},
success:function (result) {
if ('0' == result.code) {
$.fn.zTree.init($('#'+renderId), setting, null);
var orgTree = $.fn.zTree.getZTreeObj(renderId);
if(orgId){
var newNode = {organizationId:orgId,organizationName:orgName};
orgTree.addNodes(null, newNode);
orgTree.addNodes(orgTree.getNodeByParam("organizationId",orgId,null), result.data.orgList );
}else{
orgTree.addNodes(null, result.data.orgList );
}
// 展开机构树的根节点
var rootNodes = orgTree.getNodes();
if (rootNodes.length > 0)
orgTree.expandNode(rootNodes[0], true, false, true);
//orgTree.expandAll(true);
beforeShow&&beforeShow.call();
} else {
alert(result.desc);
}
}
});
}
sdorg.showchildorg= function (renderId,orgId,nodeClick,beforNodeClick,ischkbox,iscanexpand) {
var orgNodes;
var setting = {
data:{
simpleData:{
enable:true,
idKey:"organizationId",
pIdKey:"parentId",
root:0
},
key:{
name:"organizationName"
}
},
view:{
showIcon:true
},
check:{
enable:ischkbox
,chkStyle:'checkbox'
,chkboxType:{ "Y": "", "N": "" }
//,autoCheckTrigger: false
},
async:{
enable:iscanexpand||false,
url:baseURL+"/orgext/orgext!listOrgNode.action",
autoParam:["organizationId"],
dataFilter:ajaxDataFilter
},
callback:{
// onExpand:expandParentOrg,
onClick:nodeClick||_nodeClick,
beforeClick:beforNodeClick||_beforNodeClick,
}
};
var url = orgId?baseURL+'/orgext/orgext!listOrgNode.action':baseURL+'/orgext/orgext!listOrgRoot.action';
$.ajax({
url:url,
type:'post',
data:{organizationId:orgId},
dataType:'json',
success:function (result) {
if ('0' == result.code) {
orgNodes =ajaxDataFilter(null, null, result); //result.data.orgList;
if (orgNodes.length > 0) {
$.fn.zTree.init($('#'+renderId), setting, orgNodes);
// 展开机构树的根节点
var orgTree = $.fn.zTree.getZTreeObj(renderId);
var rootNodes = orgTree.getNodes();
if ((!orgId||iscanexpand)&&rootNodes.length > 0)
orgTree.expandNode(rootNodes[0], true, false, true);
//orgTree.expandAll(true);
}
} else {
alert(result.desc);
}
}
});
}
//
/**
* 异步加载节点数据后的处理函数
* @param treeId
* @param parent
* @param result
*/
function ajaxDataFilter(treeId, parent, result) {
//if ('0' == result.code) {
return result.data.orgList;
//}
}
function _nodeClick(event, treeId, treeNode) {
//console.info(treeNode);
//alert(treeNode.organizationId);
//alert(treeNode.organizationName);
}
/**
* 控制节点是否能被选中
* @param treeId
* @param treeNode
* @param clickFlag
*/
function _beforNodeClick(treeId, treeNode, clickFlag) {
}
//当前对应input框 显示的input 和要隐藏id的input
var $_currdom2,$_hiddendom2;
//显示下拉树
function showMenu2(inputid,hiddenid) {
$_currdom2 = $("#"+inputid);
$_hiddendom2 = $("#"+hiddenid);
var cityOffset = $_currdom2.offset();
$("#Content").css({left:cityOffset.left, top:cityOffset.top-50}).slideDown("fast");
$("body").bind("mousedown", onBodyDown2);
}
//隐藏下拉树
function hideMenu2() {
$("#Content").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown2);
}
//点击页面其他位置时,下拉树退出
function onBodyDown2(event) {
if (!(event.target.id == "Btn" || event.target.id == "Content" || $(event.target).parents("#Content").length>0)) {
hideMenu2();
}
}
//节点点击事件
function onClick2(e, treeId, treeNode) {
$_currdom2.val(treeNode.organizationName);
$_currdom2.focus();
$_hiddendom2.val(treeNode.organizationId);
$("#Content").fadeOut("fast");
}
function onCheck(e,treeId,treeNode){
var treeObj = $.fn.zTree.getZTreeObj("org");
var $ckNode = treeObj.getCheckedNodes();
var orgName = "";
var orgId = "";
$($ckNode).each(function(){
orgName+=this.organizationName+",";
orgId+=this.organizationId+",";
})
$_currdom2.val(orgName);
$_hiddendom2.val(orgId);
}
<!-- 组织架构树 -->
<div id="Content" class="menuContent" style="position:absolute;display:none;z-index:10000;">
<ul id="org" class="ztree" style="margin-top:0; width:350px; background:white; border:2px dotted #cccccc;"></ul>
</div>
js 树菜单 ztree的更多相关文章
- vue.js 树菜单 递归组件树来实现
树形视图 Example: https://vuefe.cn/v2/examples/tree-view.html 参照前辈方法实现的,觉得不错,记录一下: 父组件: <!-- 菜单树 --&g ...
- js无限级树菜单
以前做网站,树形菜单一般都很简单,自己定义风格样式,简单的js控制,后来原来网上很多文章都在讨论Js树型菜单,看了几个实例,发现这个树比较简单好用. http://hovertree.com/texi ...
- JS树形菜单
超全的JS树形菜单源代码共享(有实例图) 树形菜单是很常用的效果,常用在管理软件当中,但是一套树形菜单已经不能满足需求,所以如果能有一套比较全面的树形菜单JS特效代码,将会非常方便,下面懒人萱将超全的 ...
- C#动态加载树菜单
在做权限系统的时候,需要有一个树形的菜单.下图就是一个树形菜单的样式 但问题是,我们可以实现写死的树形菜单.什么是写死的?就是在前台代码中写好要加载的树形菜单是什么样子的.但是我们权限系统的要求是动态 ...
- EasyUI 树菜单
EasyUI 树菜单 通过ssm框架项目实现EasyUI 的树菜单的单选,复选,异步加载树,同步加载树和树权限控制等功能. 本章知识点 效果图: 需求:通过SSM框架,实现EasyUI 树菜单的单选, ...
- 基于Bootstrap Ace模板+bootstrap.addtabs.js的菜单
这几天研究了基于bootstrap Ace模板+bootstra.addtabs.js实现菜单的效果 参考了这个人的博客 https://www.cnblogs.com/landeanfen/p/76 ...
- js矩阵菜单或3D立体预览图片效果
js矩阵菜单或3D立体预览图片效果 下载地址: http://files.cnblogs.com/elves/js%E7%9F%A9%E9%98%B5%E8%8F%9C%E5%8D%95%E6%88% ...
- 顶 兼容各种浏览器js折叠菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 适合移动手机使用的js环形菜单特效插件
blooming-menu是一款适合在移动手机上使用的js环形菜单插件.该环形菜单提供了众多的參数,通过结合CSS3动画制作出效果很炫酷的圆形菜单展开和隐藏动画效果. 以下是这个圆形菜单菜价的可用參数 ...
随机推荐
- Android studio如何导出.so库(NDK开发入门)
转自:http://blog.csdn.net/ssy_neo/article/details/51758687 项目中用到了硬件调试,google一下拿到了硬件调试的源码,可惜握草so库根本加载不进 ...
- MYSQL三个默认库的介绍
数据库INFORMATION_SCHEMA:提供了访问数据库元数据的方式. 元数据是关于数据的数据,如数据库名或表名,列的数据类型,或访问权限等.有些时候用于表述该信息的其他术语包括“数据词典”和“系 ...
- IOS 预处理语句
程序中的源代码计算机是无法识别的,需要将写好的代码转成0.1二进制代码,计算机才能识别.将源代码转成二进制代码的需要经过两步,编译和链接.编译是通过编译器将每个文件的代码都转为二进制代码,在这个过程中 ...
- 用mysqlslap对MySQL进行压力测试
MySQL5.1地的确提供了好多有力的工具来帮助我们DBA进行数据库管理.现在看一下这个压力测试工具mysqlslap.关于他的选项手册上以及--help介绍的很详细.我解释一下一些常用的选项.这里要 ...
- TensorFlow 入门 上(自用)
下文会出现的一些知识点:TensorFlow的计算模型.数据模型.运行模型,TensorFlow的工作原理. 两个重要概念——Tensor和Flow: Tensor是张量,在TensorFlow中可以 ...
- (转)实现AI中LOD优化技术
LOD(Level Of Detail)是3D渲染中用到的概念,按照wikipedia上的翻译,可以译为“细节层次”,它是一种根据与观察点的距离,来减低物体或者模型的复杂度来提升渲染效率的优化技术,因 ...
- 手机网站调试神器之chrome控制台
现在真是一个信息化的时代,每个人手里都拿着一款智能机,上班下班走路坐车之余都会玩玩手机,上上网.于是作为广大网站媒体来说,争抢手机市场无疑是刻不容缓.对于我们Web前端工程师来说,了解并掌握手机编程的 ...
- mac下的git的安装与简单的配置
git 本地操作 git 简单介绍 .Git是分布式的SCM,SVN是集中式的 2.Git每一个历史版本号存储完整的文件,SVN存储文件差异 3.Git可离线完毕大部分操作,SVN则相反 4.Git有 ...
- HttpClient + PATCH support
From - http://compiledexperience.com/blog/posts/patch-support-in-httpclient/ public static class Htt ...
- eclipse如何优化构建的速度
eclipse如何优化构建的速度(Building) - AlanLee(Java) - 博客园 http://www.cnblogs.com/AlanLee/p/5383166.html