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. Adnc如何本地调试 - 一个轻量级的.Net Core微服务开发框架

    前言     Adnc是一个轻量级的.Net Core微服务开发框架,同样适用于单体架构系统的开发.     如果只是想本地调试,只需要安装必备软件,必备软件除开发工具外,其它软件建议大家都使用`do ...

  2. IDEA maven项目报错,找不到或无法找到主类

    最近在写UDF,依赖复制的公司的依赖, <dependency> <groupId>org.apache.hive</groupId> <artifactId ...

  3. vue 过滤器 filter 的使用

    1.局部过滤器的使用 比如性别,订单状态的数据,后端一般返回数字来代替状态.以性别为模拟数据,0是未知,1是男,2是女. 直接数据渲染出来,只有012,没有性别 根据后端返回的int类型值,前端对数据 ...

  4. Go语言快速安装手册

    Go 是一个开源的编程语言,它能让构造简单.可靠且高效的软件变得容易. Go是从2007年末由Robert Griesemer, Rob Pike, Ken Thompson主持开发,后来还加入了Ia ...

  5. 腾讯IOT之树莓派物联网设备

    目录 腾讯IOT之树莓派物联网设备 硬件配置 软件配置 Tecent IOT 开发平台的使用 新建项目 新建产品 添加自定义功能 设备开发 微信小程序配置 面板配置 新建设备 使用设备 在线调试 设备 ...

  6. MySQL多版本并发控制——MVCC机制分析

    MVCC,即多版本并发控制(Multi-Version Concurrency Control)指的是,通过版本链维护一个数据的多个版本,使得读写操作没有冲突,可保证不同事务读写.写读操作并发执行,提 ...

  7. Centos 安装 Node-v12.17.0-linux-x64.tar.gz

    wget https://nodejs.org/dist/v12.17.0/node-v12.17.0-linux-x64.tar.gz tar -zxf node-v12.17.0-linux-x6 ...

  8. 【Git】2、Linux快速安装Git环境 & oh-my-zsh

    Linux快速安装Git环境 文章目录 Linux快速安装Git环境 1.Linux安装Git 2.安装zsh 3.安装oh-my-zsh 3.1.安装oh-my-zsh 3.2. 测试验证 4.小结 ...

  9. linux系统中set、env、export关系

    set 用来显示shell变量(包括环境变量.用户变量和函数名及其定义),同时可以设置shell选项来开启调试.变量扩展.路径扩展等开关env 用来显示和设置环境变量export 用来显示和设置导出到 ...

  10. JavaScript中原型对象的应用!

    JavaScript中原型对象的应用! 扩展内置对象的方法 我以数组对象为例! // 原型对象的应用 扩展内置对象方法! Array.prototype.sum = function() { var ...