自定义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组件里找方法,使用了表格的合并方法,效果是实现了,但是表格的多选每次触发时,都会执行好几次,而且没法实现一部分的 ...
随机推荐
- 5款极简极美WordPress主题,亲测可用附送源码
2020年深冬,新闻上报道是.从1950年以来最寒冷的冬天. 一个周六的下午,我找遍了全网的简约博客主题,搭建了三年来的第7个独立博客, 多么难得的周末啊,我却在家花了一整天的时间.整理出直接套用5️ ...
- php利用腾讯ip分享计划获取地理位置示例分享
<?php function getIPLoc_QQ($queryIP){ $url = 'http://ip.qq.com/cgi-bin/searchip?searchip1='.$quer ...
- 值得推荐的C#不同版本语言特性
C#语言在不断地版本升级中,为我们提供了很多新的语言特性.其中,有很多使用的语言特性,我觉得在实际开发中用起来很方便,能够简化我们的代码,增强可读性,提高开发效率. 小编不才,在这里给大家整理了一些实 ...
- 解决GitHub下载速度慢的问题(已解决)
核心:通过码云导入github资源,通过码云转接下载. $\color{blue}{1. 找到需要下载的GitHub地址}$ 然后复制链接,转到码云上去. $\color{blue}{2. 打开 ...
- 十四:SQL注入之类型及提交注入
简要明确参数类型 数字,字符,搜索,json等 简要明确请求方法 GET,POST,COOKIE,REQUEST,HTTP头 其中SQL语句干扰符号:' " % ) } 等,具体查看用法 非 ...
- 【Linux】Linux介绍和安装 - 测试题
第一部分测试题 Linux介绍和安装 测试题 做点练习题,巩固一下咯~ ~ _ 10 个选择题. 1.让我们选择开机时进哪个操作系统的软件叫什么? A. booter B. bootloader C. ...
- ps 2020 下载
一款极具实用价值的作图软件--ps,由于正版价格昂贵,所以这里分享破解版的资源.b话少说,下面是下载链接和安装步骤: 下载链接: 百度网盘链接:https://pan.baidu.com/s/1XPf ...
- oracle move表空间(分区表,索引)
1.修改分区表分区表空间 SELECT 'ALTER TABLE ' || table_owner || '.' || TABLE_NAME || ' MOVE PARTITION ' || PART ...
- SAP IDES登陆的short dump终于不见了
还记得这个IDES登陆的shortdump吗今天对内核从701_rel 升级到721,发现登陆的错误没了,看来721_rel内核支持的操作系统和数据库更多了,兼容性也更好了.
- 18V转5V,18V转3.3V,18V转3V稳压芯片,0.01A-3A输出
18V转5V,18V转3.3V,18V转3V, 18V转5V稳压芯片,18V转3.3V稳压芯片,18V转3V稳压芯片, 18V常降压转成5V电压,3.3V电压和3V电压给其他芯片或设备供电,适用于这个 ...