自定义tree
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的更多相关文章
- js/jq基础(日常整理记录)-4-一个简单的自定义tree插件
一.一个简单的自定义tree插件 上一篇是之前自定义的table插件,这一篇也是之前同期尝试做的一个tree插件. 话不多说,先看看长什么样子哈! 现在来看确实不好看,以后在优化吧! 数据源:ajax ...
- easyui treegrid 封装(不用分页,用加载更多按钮)延迟加载加加载更多
/** * @author wsf数据加载 */ ; var intervalId = null; (function (win,$){ $.myCache = { dataCache : {},// ...
- zTree的拖拽排序
ztree本身是可以支持拖拽的,但是却没有找到明确的支持拖拽的排序,也就是说,在拖拽过程中,需要自定义维护拖拽后的顺序并保存至后台. 在这样一个比较常规的需求情况下,网上也有朋友给出了一些解决方案,比 ...
- 使用layui-tree美化左侧菜单,点击生成tab选项
layui-tree美化左侧菜单 html <div class="layui-side layui-bg-black"> <div class="la ...
- odoo10 addon开发流程
odoo addon开发流程 创建一个addon(插件) 命令如下 python odoo-bin scaffold 插件名 路径 # 例如 python odoo-bin scaffold hh_t ...
- Git——基本操作(三)
一.安装和配置 1.Git安装 yum install git -y 安装完Git就可以对其做一些配置: Git有一个工具被称为git config,它允许你获得和设置配置变量: 这些变量可以控制Gi ...
- antd Tree组件中,自定义右键菜单
最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...
- easyUI tree 自定义图标
文章转载自: https://blog.csdn.net/zhlantian/article/details/52913115 近期由于项目中需要使用easyui tree树形列表,并在系统中动态配置 ...
- element-ui tree树形组件自定义实现可展开选择表格
最近做项目遇到一个需求,表格里可以展开,可以选择,大概效果如下图: 一开始是在table组件里找方法,使用了表格的合并方法,效果是实现了,但是表格的多选每次触发时,都会执行好几次,而且没法实现一部分的 ...
随机推荐
- css3 知识点积累
-moz- 兼容火狐浏览器-webkit- 兼容chrome 和safari1.角度 transform:rotate(30dge) 水平线与div 第四象限30度 transform: ...
- Kafka知识总结及面试题
目录 概念 Kafka基础概念 命令行 Kafka 数据存储设计 kafka在zookeeper中存储结构 生产者 生产者设计 消费者 消费者设计 面试题 kafka设计 请说明什么是Apache K ...
- spark bulkload 报错异常:Caused by: java.io.IOException: Added a key not lexically larger than previous
------------恢复内容开始------------ Caused by: java.io.IOException: Added a key not lexically larger than ...
- hadoop完全分布式
虚拟机克隆 a. vim /etc/udev/rules.d/70-persistent-net.rules 更改网卡名 b. vim /etc/sysconfig/network-scrip ...
- ICPC Central Russia Regional Contest (CRRC 19)题解
题目连接:https://codeforces.com/gym/102780 寒假第二次训练赛,(某菜依旧是4个小时后咕咕咕),战况还行,个人表现极差(高级演员) A:Green tea 暴力枚举即可 ...
- MongoDB按照嵌套数组中的map的某个key无法正常排序的问题
前阵子同事有一个需求: 在一个数组嵌套map的结构中,首先按照map中的某个key进行筛选,再按照map中的某个key进行排序,但是奇怪的是数据总是乱序的. 再检查了代码和数据之后并没有发现什么错误, ...
- CopyOnWriteArrayList设计思路与源码分析
CopyOnWriteArrayList实现了List接口,RandomAccess,Cloneable,Serializable接口. CopyOnWriteArrayList特性 1.线程安全,在 ...
- Java内存模型与线程(一)
Java内存模型与线程 TPS:衡量一个服务性能的标准,每秒事务处理的总数,表示一秒内服务端平均能够响应的总数,TPS又和并发能力密切相关. 在聊JMM(Java内存模型)之前,先说一下Java为什么 ...
- python学习笔记 | 猜拳游戏
''' @author: 人人都爱小雀斑 @time: 2020/3/6 18:52 @desc: 实验结果心得: 1.难点主要在判断谁输谁赢 2.挺好的 ''' import random d={1 ...
- 【Linux】常用的Linux可插拔认证模块(PAM)应用举例:pam_limits.so、pam_rootok.so和pam_userdb.so模块
常用的Linux可插拔认证模块(PAM)应用举例:pam_limits.so.pam_rootok.so和pam_userdb.so模块 pam_limits.so模块: pam_limits.so模 ...