hsiangleev / eletree Goto Github PK

如题所示，使用cdn或者layui方式时，均提示Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

这是我的html代码，粘贴说明文档

var ele = eleTree({
    el: '.eletree',
    data: data,
    showCheckbox: true,
    highlightCurrent: true,
    showRadio: true,
    imgUrl: "//eletreejs.surge.sh/images/",
    icon: {
        fold: "fold.png",
        leaf: "leaf.png",
        checkFull: ".eletree_icon-check_full",
        checkHalf: ".eletree_icon-check_half",
        checkNone: ".eletree_icon-check_none",
        dropdownOff: ".eletree_icon-dropdown_right",
        dropdownOn: ".eletree_icon-dropdown_bottom",
        loading: ".eleTree-animate-rotate.eletree_icon-loading1",
        radioCheck: "radioCheck.png",
        radioCheckNone: "radioCheckNone.png",
    }
})
ele.on('checkbox', function (data) {
    // console.log(this)
    console.log(data)
})
ele.on('radio', function (data) {
    // console.log(this)
    console.log(data)
})
//监听提交
form.on('submit(demo1)', function (data) {
    layer.alert(JSON.stringify(data.field), {
        title: '最终的提交信息'
    })
    return false;
})

找了一些200×200和16×16的去测试自定义图片，显示都特别小和模糊，是什么原因吗

在不使用 checkbox 的 radio 的时候，做为 select 使用时，如何指定默认选中项

可以说一下这个效果怎么删除的 需要哪个属性吗

使用 layui-v2.7.0-rc5.zip 调用 eletree 2.3.1 会出现如下错误

例如
eleTree.on('rightMenu',function(e){ if(e.type=='a'){ e.load([{name:'菜单1',value:'act1'}]) }else if(e.type=='b'){ e.load([{name:'菜单2',value:'act2'}]) } })
望采纳

你好，我需要通过ID查找并选中指定节点，请问如何实现

使用layui.use方式使用时，提示Uncaught TypeError: eleTree.render is not a function，大佬能提供一下正确使用方式吗？

                var ele = layui.eleTree({
                    el: '#xxx',
                    data: data,
                    showCheckbox: true,
                    checkOnClickNode: true,
                    defaultPid: '1',
                    defaultCheckedKeys: ['88','90'],
                    isDefaultChangePstatus: true,
                });

                ele.on('checkbox', function() {
                    let ckd = [];
                    ele.getChecked(false, true).forEach(function (item) {
                        ckd.push(item.id);
                    })
                    ipt.val(ckd.join(','));
                });

正常应该是选中这两个

结果却还是全选了

eletree V2.2.11 版本
使用异步加载树结构时 , 会报 uncaught in promise 错误 这个是不是插件 .catch()没有加上去的问题呢

你好？我信项目中需要同级拖拽排序功能，这个需求能开发吗？

当我子节点选中设置isopen为true时，希望自动展开父节点，但设置无效，下面是数据格式：
var data = [
{
"label": "安徽省",
"id": "001",
"children": [
{
"label": "淮北市",
"id": "001001"
},
{
"label": "马鞍山市",
"id": "001002",
"children": [
{
"label": "花山区",
"id": "001002001",
"isOpen": true
},
{
"label": "雨山区",
"id": "001002002"
}
]
}
]
}
]

初始化数据checkbox为禁用状态，当使用updateKeySelf方法更新后（将checkbox改为启用），选择子节点时父节点没有默认选中。

文档里是放在div里

对于做菜单和单位机构来说，还缺个下拉树

类似下面的效果

请问下节点点击显示选中（点击后被添加了eleTree-title-active样式）能否取消选中，reload不会清除这个选中

详情：
1、layui的tab选项卡中，加入layui的卡片面板布局，再写入eletree，开头好多个会飘得很远，如图：

拖到下面的一些选项则不会，如图：

似乎开头的几个的top都会多出100px左右，不知什么原因

后台接口返回的数据是children格式的，如下：

boolean类型的数据都是正常的，经过下面的处理渲染：
`
/**
* 目录树数据
/
var treeData = [];
/*
* 完整数据
*
* @type {*[]}
*/
var fullData = [];
$.ajax({
url : '../content.do',
type:'POST',
dataType: 'json',
async: false,
success : function(data) {
if (!data['success']) {
layer.msg(data['msg'], {icon: 2,time: 5000});
}
fullData = data.obj;
if (fullData !== null) {
for (let item of fullData) {
if (item['eleTree'] !== null) {
treeData.push(item['eleTree'])
}
}
}
}
});

// eleTree实例化
var ele = eleTree({
el: '#eletree1',
data: treeData,
draggable: true,
indent: 30,
highlightCurrent: true,
accordion: true,
imgUrl: "../../plugins/eletree/images/",
icon: {
fold: "connections.png",
leaf: "video.png",
checkFull: ".eletree_icon-check_full",
checkHalf: ".eletree_icon-check_half",
checkNone: ".eletree_icon-check_none",
dropdownOff: ".eletree_icon-dropdown_right",
dropdownOn: ".eletree_icon-dropdown_bottom",
loading: ".eleTree-animate-rotate.eletree_icon-loading1",
radioCheck: "radioCheck.png",
radioCheckNone: "radioCheckNone.png",
},
customText: function(data) {
var s = data.label
if (data.pid === "") {
s+=<i class="eletree_icon-edit edit_test"></i> <i class="eletree_icon-delete delete_test"></i>
}
return s
}
})
`
这是渲染后log出来的数据，上面是on事件的data，下面是我上面ajax存起来的一个treeData，事件的data.data正常，不知为啥treeData会在渲染后改变这个值，true为2，false为0

getchecked可以获取半选值，但是反过来setchecked的时候，半选的赋值，子节点全部选中了，这个setchecked是不是该加个选项，一个是只赋值叶子节点，一个是根据key值来选中？

搜索到子节点时请问选中当前父节点怎么只选中显示的而不选中隐藏的

场景：编辑目录树，目录树会带一些自定义的属性，后台传来难免有null的

进行拖拽、右键菜单等操作节点的操作时，会报Uncaught TypeError: Cannot convert undefined or null to object；并且操作的节点会消失：

定位发现似乎是操作节点时，这里的forEach无法兼容null的属性：

建议：不知是否可以加入兼容，只遍历操作节点所需的：id，pid，label等必要属性，不遍历用户自定义属性，因为实际场景里目录树带自定义数据方便传输的场景还是挺多的。

我目前是用了一个function来遍历filter掉自己的null属性，属于强行舍弃一些数据的操作了：

/**
	* 过滤掉null的属性
	* @param obj
	*/
function nullFilter(obj){
	if (obj['children'] !== undefined || obj['children'] !== null || obj['children'].length > 0) {
		obj['children'].forEach(e => nullFilter(e));
	}
	Object.keys(obj).forEach(item=>{
		if(obj[item] === null)  delete obj[item]
		if(item === 'data' && obj[item] != null) {
			Object.keys(obj[item]).forEach(e=>{
				if(obj[item][e] === null)  delete obj[item][e]
			})
		}
	});
	return obj;
}

我在页面使用CDN加载的方式引入该插件，通过路由切换切换时，2次加载带有该插件的页面时会报错，提示：only one instance of babel-polyfill is allowed，该问题是什么原因引起的，该如何解决或避免呢？

var organization_data = [
{id:1000,label:'根组织',type:0,sort_:1,children:[
{id:1001,label:'江苏省',type:0,icon:'chf-icon chf-icon-zuzhijiagou',sort_:1,
children:[
{id:1002,label:'南通市',type:0,icon:'chf-icon chf-icon-zuzhijiagou',sort_:1},
{id:1003,label:'南京市',type:2,icon:'chf-icon chf-icon-zuzhijiagou',sort_:0}
]
},
{id:2001,label:'安回省',type:0,icon:'chf-icon chf-icon-zuzhijiagou',sort_:0,
children:[
{id:2002,label:'a市',type:0,icon:'chf-icon chf-icon-zuzhijiagou',sort_:0},
{id:2003,label:'b市',type:2,icon:'chf-icon chf-icon-zuzhijiagou',sort_:1}
]
}
]},
{id:3000,label:'根组织3',type:0,sort_:0}
];

el5.sort({
field: "sort_", /这里用 sort_无效果，换成 label 有效果/
type: "desc",
})

看源码 sort.js 是有用到 field 的，不知道问题出在哪儿

渲染时在每个节点后边(比如：河南省)，
增加一个div区域，用于显示其他内容(比如节点缩略图片等)

如题，使用
ele.updateKeySelf(data.data.id, data.data)
可以新增、更新一些自定义的属性，用于后台处理，但是delete data.data.属性之后去updateKeySelf()，自定义属性依然存在，没有删除

是否可以支持多类型图标节点的自定义，比如 有 设备图标、组织图标、人员图标 等，现在只有目录和节点两种类型, ico 的自体图标最好能支持 color 的属性，这样就可以改颜色，不然就是黑白的

1. 怎么设置一个按钮用来 一键全选和反选 所有的节点数据，比如你的例子中省市的数据，有33个省市平级的，我怎么去全选和反选啊。

我的这个左边的线条看着好粗啊，不像官网显示的那么纤细，不知市何原因。
3. 看你官网做的这么全，想提点个人意见，不喜可略过。
不知是否用过 zTree 插件，这个是我用过的迄今为止最好用、文档最全的树插件，作者可以去参考下。
别人有的功能你要有，别人没有的你更要有，这样才能有竞争力。
哈哈，纯属个人意见，不喜勿喷。

setChecked只能选中数据的第一层吗？子节点怎么设置不了选中？

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': The provided selector is empty.
at e.value (http://127.0.0.1:8001/AdminIOT/component/pear/module/eleTree.js?v=3.8.20:11:127262)
at new e (http://127.0.0.1:8001/AdminIOT/component/pear/module/eleTree.js?v=3.8.20:11:127003)
at b (http://127.0.0.1:8001/AdminIOT/component/pear/module/eleTree.js?v=3.8.20:11:129181)
at window.render (http://127.0.0.1:8001/AdminIOT/view/system/power:179:17)
at r. (http://127.0.0.1:8001/AdminIOT/view/system/power:199:9)
at HTMLDocument. (http://127.0.0.1:8001/AdminIOT/component/layui/layui.js:1:1835)
at l (http://127.0.0.1:8001/AdminIOT/component/layui/layui.js:2:9223)
at Object.add [as done] (http://127.0.0.1:8001/AdminIOT/component/layui/layui.js:2:9525)
at pe.fn.init.pe.fn.ready (http://127.0.0.1:8001/AdminIOT/component/layui/layui.js:2:11611)
at new pe.fn.init (http://127.0.0.1:8001/AdminIOT/component/layui/layui.js:2:7052)

如题，当只有一条数据时，树为空

1. 点击编辑后,鼠标无法点击选中文字的位置开始编辑,只能通过键盘左右键来移动光标.
2. 添加同级或下级菜单,在编辑完成后,无法通过回车触发提交事件.需要手动将鼠标点击其他地方才触发.

希望可以改进这2个功能,好像做反了的样子,编辑时需要鼠标有效,添加时需要回车可以添加

headers: {Authorization:t},

启用了rightMenuList ， 右键弹出的菜单不在鼠标点击处，离得很远。

后来检查发现是和layui的css冲突，https://www.layuicdn.com/layui-v2.2.0/css/layui.css

不用这个css，右键菜单的弹出位置就是准的。

版本：
layui版本：v2.6.8
eleTree插件版本：hsiangleev-layui-eleTree

问题描述：
初始化eleTree，参数为checkStrictly为默认【即父子节点联动的情况下】

如果只是勾选父节点，然后直接通过getChecked方法获取只是其父节点，而相关的子节点没法获取

但是展开子节点之后，再次通过getChecked方法就可以正常获取所有选中的节点

并且这种情况出现在每次加载相关页面的时候，在展开后获取正常。

分析原因：
在未展开子节点的情况下，父节点相关的子节点dom并没有生成。而getChecked则是直接通过选择器选择的Dom，所以就无法获得相关子节点的数据。

if(leafOnly){
                el=options.elem.find(".layui-icon.leaf-icon").parent(".eleTree-node-content-icon")
                    .siblings("input.eleTree-hideen[eletree-status='1']");
            }else if(includeHalfChecked){
                el=options.elem.find("input.eleTree-hideen[eletree-status='1'],input.eleTree-hideen[eletree-status='2']");
            }else{
                el=options.elem.find("input.eleTree-hideen[eletree-status='1']");
            }
            el.each(function(index,item) {
                var obj={};
                var id=$(item).parent(".eleTree-node-content").parent(".eleTree-node").data(options.request.key);
                var label=$(item).siblings(".eleTree-node-content-label").text();
                obj[options.request.key]=id;
                obj[options.request.name]=label;
                obj.elem=item;
                obj.othis=$(item).siblings(".eleTree-checkbox").get(0)
                arr.push(obj);
            })

最近看了很多tree,觉得作者您的这个挺不错的，
但是经过测试发现

defaultCheckedKeys属性和setChecked方法传入的数组，需要使用parseInt转换成整形，讲真的，这样又得多写三行代码。
。。。。为毛呢？作者在for的时候，直接parseInt不就好了吗？