function YpTreeMenu(ypTreeMenu,treeObj) {
this.ypTreeMenu=ypTreeMenu;
this.treeObj=treeObj;
this.treeId=treeObj.id+"tree";
this.treeOK=this.treeId+"ok";
this.treeCLOSE=this.treeId+"close";
this.treeCheckAll=this.treeId+"checkAll";
this.treeReverse=this.treeId+"reverse";
this.treeCancelAll=this.treeId+"CancelAll";
this.treeReset=this.treeId+"Reset";
this.tree=null;
this.init();
}
YpTreeMenu.prototype = {
init:function(){
var that=this;
this.width=this.ypTreeMenu.width||500;
this.height=this.ypTreeMenu.height||500;
this.treeStructure=this.ypTreeMenu.treeStructure;
this.treeUrl=this.ypTreeMenu.treeUrl;
this.treeIdObj=this.ypTreeMenu.treeIdObj;
this.treeExtendObjs=this.ypTreeMenu.treeExtendObjs;
this.treeType=this.ypTreeMenu.treeType||"radio";
this.disabledLink=this.ypTreeMenu.disabledLink;
this.lockParent=this.ypTreeMenu.lockParent;
this.isWarrants=this.ypTreeMenu.isWarrants;
this.clickParent=this.ypTreeMenu.clickParent;
$(that.treeObj).unbind().bind('click',function(ev){
that.show();
});
},
show:function(){
var that=this;
var treeDiv=$("#"+that.treeId);
if(!(treeDiv&&treeDiv.length)){
var tO=$(that.treeObj); var left=tO.offset().left;
if(that.width+left>$("body").width()){
left=left-(that.width-tO.width());
}
var top=tO.offset().top+tO.height();
var createBtn=function(bit){
var buttons=[];
var aStyle=' display:inline-block; margin: 2px 5px; text-decoration: none; color: #0A5991; font-weight: bold;';
if(bit){
var style=aStyle+'color:#2F3841;';
buttons.push([that.treeCheckAll,"全选",style,function(ev){
that.tree.tree.checkAllNodes(true);
}]);
buttons.push([that.treeCancelAll,"全部取消",style,function(ev){
that.tree.tree.checkAllNodes(false);
}]);
buttons.push([that.treeOK,"确认",style,function(ev){
var nodes=that.tree.tree.getCheckedNodes(true);
var names=[];
var ids=[];
if(nodes&&nodes.length){
for(var i=0;i<nodes.length;i++){
names.push(that.tree.getName(nodes[i]));
ids.push(that.tree.getId(nodes[i]));
}
}
$(that.treeObj).val(names.join(","));
if(that.treeIdObj){
$(that.treeIdObj).val(ids.join(","));
}
if(that.treeExtendObjs){
$(treeExtendObjs).val(jyTools.obj2JsonString(nodes));
}
that.recovery();
}]);
}
buttons.push([that.treeReset,"重置",aStyle+' ',function(ev){
$(that.treeObj).val("");
setNullCss($(that.treeObj),"字段不能为空");
$(that.treeIdObj).val("");
that.tree.tree.checkAllNodes(false);
that.recovery();
}]);
buttons.push([that.treeCLOSE,"关闭",aStyle+' ',function(ev){
that.recovery();
}]);
return {
getBtnStr:function(){
var btnStr=[];
var groupBtn=function(btn){
return '<a href="javascript:void(0)" id="'+btn[0]+'" style="'+btn[2]+'">'+btn[1]+'</a>'
}
for(var i=0;i<buttons.length;i++){
btnStr.push(groupBtn(buttons[i]));
}
return btnStr.join("");
},
addEvent:function(){
for(var i=0;i<buttons.length;i++){
var btn=buttons[i]
$("#"+btn[0]).unbind().bind("click",btn[3]);
}
}
}
}
var createTree=function(bit){
var h=that.height-25;
var btnDiv="";
var btnOp=createBtn(bit);
btnDiv='<div class="treeBtns">'+btnOp.getBtnStr()+'</div>';
var cDiv='<div style="overflow:auto;width:100%;height:'+h+'px;" id="'+that.treeId+'_"></div>';
$("body").append('<div class="ui-widget-content treeMenu" style="left:'+left+'px; top:'+(top+6)+'px;width:'+that.width+'px;height:'+that.height+'px;" id="'+that.treeId+'">'+cDiv+btnDiv+'</div>');
btnOp.addEvent();
};
if(that.treeStructure){
createTree();
that.tree= $("#"+that.treeId).jyTree(that.treeStructure);
that.tree.show();
}else if(that.treeUrl){
var ownTreeS= {"url":that.treeUrl};
if(this.treeType=="radio"){
createTree();
ownTreeS["viewFun"]=function(nodeId,node){
if(node.isParent && that.lockParent){
that.clickParent();
}else if(node.level != 4){
that.clickParent();
}else{
var a=that.tree.getName(node);
$(that.treeIdObj).css("border-color","#ff0000")
$(that.treeObj).val(a);
removeNullCss($(that.treeObj));
if(that.treeIdObj){
$(that.treeIdObj).val(that.tree.getId(node));
}
if(that.treeExtendObjs){
$(that.treeExtendObjs).val(jyTools.obj2JsonString(node));
}
if(that.isWarrants){
dictDetail();
}
that.recovery();
} };
}else if(this.treeType="checkbox"){
createTree(true);
ownTreeS["check"]=true;
}
if(this.disabledLink=="true")
{
ownTreeS["disabledLink"]=true;
}
that.tree=$("#"+that.treeId+"_").jyTree(ownTreeS);
that.tree.show();
}
}
$("#"+that.treeId).show();
},
recovery:function(){
var that=this;
$("#"+this.treeId).remove();
that=null;
}
}; (function( $ ){
$.fn.ypTreeMenu = function(menuTreeStructure) {
return new YpTreeMenu(menuTreeStructure,$(this)[0]);
};
})( jQuery );
    $(document).ready(function(){
var URL ="后台url返回List<map> json 串";
$("input[name='guarTypeName']").ypTreeMenu({"treeUrl":URL,"treeType":"checkbox","treeIdObj":$("input[name='guarType']"), "width":"200","height":"300","disabledLink": true});
$("input[name='guarTypeName']").attr({ readonly: "readonly"});
});
    private List<Map<String, String>> treeAreaData(List<AreaDTO> data) {
if(data!=null && data.size()>0){
List<Map<String, String>> maps = new ArrayList<Map<String, String>>();
for(AreaDTO dto: data){
Map<String, String> map = new HashMap<String, String>();
map.put("ID", dto.getAreaCode());
map.put("NAME", dto.getAreaName());
map.put("PID", dto.getParentId());
maps.add(map);
}
return maps;
}else{
return null;
}
}

自定义tree的更多相关文章

  1. js/jq基础(日常整理记录)-4-一个简单的自定义tree插件

    一.一个简单的自定义tree插件 上一篇是之前自定义的table插件,这一篇也是之前同期尝试做的一个tree插件. 话不多说,先看看长什么样子哈! 现在来看确实不好看,以后在优化吧! 数据源:ajax ...

  2. easyui treegrid 封装(不用分页,用加载更多按钮)延迟加载加加载更多

    /** * @author wsf数据加载 */ ; var intervalId = null; (function (win,$){ $.myCache = { dataCache : {},// ...

  3. zTree的拖拽排序

    ztree本身是可以支持拖拽的,但是却没有找到明确的支持拖拽的排序,也就是说,在拖拽过程中,需要自定义维护拖拽后的顺序并保存至后台. 在这样一个比较常规的需求情况下,网上也有朋友给出了一些解决方案,比 ...

  4. 使用layui-tree美化左侧菜单,点击生成tab选项

    layui-tree美化左侧菜单 html <div class="layui-side layui-bg-black"> <div class="la ...

  5. odoo10 addon开发流程

    odoo addon开发流程 创建一个addon(插件) 命令如下 python odoo-bin scaffold 插件名 路径 # 例如 python odoo-bin scaffold hh_t ...

  6. Git——基本操作(三)

    一.安装和配置 1.Git安装 yum install git -y 安装完Git就可以对其做一些配置: Git有一个工具被称为git config,它允许你获得和设置配置变量: 这些变量可以控制Gi ...

  7. antd Tree组件中,自定义右键菜单

    最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...

  8. easyUI tree 自定义图标

    文章转载自: https://blog.csdn.net/zhlantian/article/details/52913115 近期由于项目中需要使用easyui tree树形列表,并在系统中动态配置 ...

  9. element-ui tree树形组件自定义实现可展开选择表格

    最近做项目遇到一个需求,表格里可以展开,可以选择,大概效果如下图: 一开始是在table组件里找方法,使用了表格的合并方法,效果是实现了,但是表格的多选每次触发时,都会执行好几次,而且没法实现一部分的 ...

随机推荐

  1. Command3

    压缩和解压 gzip gunzip .gz 指定文件必须带后缀 gzip file filename.gz zip unzip .zip unzip filename.zip directory zi ...

  2. Linux下MiniGUI库的安装

    Linux下MiniGUI库的安装 今天试了下安装MiniGUI的库 先仿照官网的教程安装 传送门:MiniGUI官网 一.配置依赖环境 安装构建工具 apt install binutils aut ...

  3. 最全的HashMap源码解析!

    HashMap源码解析 HashMap采用键值对形式的存储结构,每个key对应唯一的value,查询和修改的速度很快,能到到O(1)的平均复杂度.他是非线程安全的,且不能保证元素的存储顺序. 他的关系 ...

  4. 【Linux】rsync模板配置问题

    ------------------------------------------------------------------------------------------------- | ...

  5. 【Linux】fdisk -l发现有加号"+"

    今天分区不够了,打算扩下分区,想起当时创建机器的时候还有大约80多个G没有用,今天打算重新利用上 就用了fdisk /dev/sda 创建了两个分区,但是发现分区下面有加号,感到而别的困惑 最后在很多 ...

  6. linux系统图形化管理工具

    webmin是一个非常好的图形化管理工具,提供了系统管理员对于linux系统的运维效率.对于那些记不住命令,新入门的新手真的是一个很好的工具呀,上图吧. 这是系统管理的首页,可以看到,CPU,内存.虚 ...

  7. 痞子衡嵌入式:MCUBootFlasher v3.0发布,为真实的产线操作场景而生

    -- 痞子衡维护的NXP-MCUBootFlasher工具(以前叫RT-Flash)距离上一个版本(v2.0.0)发布过去一年半以上了,这一次痞子衡为大家带来了全新版本v3.0.0,从这个版本开始,N ...

  8. Mybatis执行流程学习之手写mybatis雏形

    Mybatis是目前开发中最常用的一款基于ORM思想的半自动持久层框架,平时我们都仅仅停留在使用阶段,对mybatis是怎样运行的并不清楚,今天抽空找到一些资料自学了一波,自己写了一个mybatis的 ...

  9. Redis 实战 —— 05. Redis 其他命令简介

    发布与订阅 P52 Redis 实现了发布与订阅(publish/subscribe)模式,又称 pub/sub 模式(与设计模式中的观察者模式类似).订阅者负责订阅频道,发送者负责向频道发送二进制字 ...

  10. Python数据模型与Python对象模型

    数据模型==对象模型 Python官方文档说法是"Python数据模型",大多数Python书籍作者说法是"Python对象模型",它们是一个意思,表示&quo ...