自定义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组件里找方法,使用了表格的合并方法,效果是实现了,但是表格的多选每次触发时,都会执行好几次,而且没法实现一部分的 ...
随机推荐
- 买卖股票的最佳时机 III
给定一个数组,它的第 i 个元素是一支给定的股票在第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你最多可以完成 两笔 交易. 注意:你不能同时参与多笔交易(你必须在再次购买前出售掉之前的 ...
- Map遍历的几种方式
代码示例 /** * @author liaowenhui * @date 2020/6/25 11:15 */ public class TestMap { public static void m ...
- php利用腾讯ip分享计划获取地理位置示例分享
<?php function getIPLoc_QQ($queryIP){ $url = 'http://ip.qq.com/cgi-bin/searchip?searchip1='.$quer ...
- python的默认参数的一个坑
前言 pass 正文 在 https://docs.python.org/3/tutorial/controlflow.html#default-argument-values 中,有这样一段话 Im ...
- 【SpringMVC】SpringMVC 入门
SpringMVC 入门 文章源码 SpringMVC 基本概念 在 JavaEE 开发中,几乎全都是基于 B/S 架构的开发.在 B/S 架构中,系统标准的三层架构包括:表现层.业务层.持久层. 表 ...
- JavaScript入门-函数function(二)
JavaScript入门-函数function(二) 递归函数 什么是递归函数? 递归简单理解就是,在函数体里,调用自己. //我们在求一个10的阶乘的时候,可能会这么做 //写一个循环 var to ...
- awk -v参数
-v var=val --assign var=val Assign the value val to the variable var, before execution of the progra ...
- kubernets之DaemonSet
一 k8s资源之DaemonSet 1.1 介绍认识DaemonSet DaemonSet可以理解为一种比较特殊的RS,DaemonSet的作用是永远保持被指定的节点只运行一个pod的副本,可用作集 ...
- Java中的基本数据类型与引用数据类型
一.基本数据类型 byte.short.int.long(整数类型) float.double(浮点数类型) char(字符型) boolean(布尔类型 ) Java数据大多数存放在堆栈中. 栈区: ...
- 用APICloud开发iOS App Clip详细教程
App Clip是苹果公司在WWDC20开发者大会上发布的新功能,用户可以只访问应用程序的一小部分,而无需下载整个应用,被称为苹果小程序.本文主要介绍如何通过APICloud开发App Clip. 一 ...