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. Turtlebot3入门教程-系统-SBC软件设置(ubuntu20.04)

    本文针对如何在树莓派3上安装ubuntu20.04系统和软件进行讲解 树莓派3接上显示屏和鼠标后,开机后继续安装软件包 详细步骤如下: (1)系统安装 (2)ROS安装 (3)TurboBot3依赖的 ...

  2. LeapMotion控制器 java语言开发笔记--(LeapMotion控制器简介)

    (1)LeapMotion系统识别和追踪手,手指,以及根手指类似的工具,这个设备运行在一个极小的范围,这个范围拥有个高精度,高跟踪频率可以记录离散的点,手势,和动作. (2)LeapMotion控制器 ...

  3. vue中添加文字或图片水印

    首先引用warterMark.js,内容如下 'use strict' var watermark = (className,str,type) => { let dom = document. ...

  4. Angular入门到精通系列教程(7)- 组件(@Component)基本知识

    1. 概述 2. 创建Component 组件模板 视图封装模式 特殊的选择器 :host inline-styles 3. 总结 环境: Angular CLI: 11.0.6 Angular: 1 ...

  5. 深入理解Go Context

    目录 emptyCtx类型 cancelCtx类型 timerCtx类型 valueCtx类型 在Go语言并发编程中,用一个goroutine来处理一个任务,而它又会创建多个goroutine来负责不 ...

  6. CSS 奇思妙想边框动画

    今天逛博客网站 -- shoptalkshow,看到这样一个界面,非常有意思: 觉得它的风格很独特,尤其是其中一些边框. 嘿嘿,所以来一篇边框特辑,看看运用 CSS,可以在边框上整些什么花样. bor ...

  7. VBA实现相同行合并

    帮人捣鼓了个VBA代码用来实现多行合并,具体需求为:列2/列3/列4 相同的情况下,则对应的行合并为一行,且列1用空格隔开,列5则相加: (对大多数办公室职员,VBA还算是提高效率的一个利器吧) 最终 ...

  8. 【Linux】大于2T的磁盘怎么分区?

    环境CentOS7.1 2.9t磁盘 fdisk 只能分区小于2t的磁盘,大于2t的话,就要用到parted 1,将磁盘上原有的分区删除掉: 进入:#parted   /dev/sdb 查看:(par ...

  9. LeetCode993. 二叉树的堂兄弟节点

    题目 1 class Solution { 2 public: 3 TreeNode* r1;TreeNode* r2; 4 bool isCousins(TreeNode* root, int x, ...

  10. 环境变量IFS

    环境变量IFS的值是由1个空格.1个制表符.1个换行符依序构成的字符串,也就是" \t\n"字符串. #查看IFS变量值的长度: test ~ # expr length &quo ...