layui根据name获取对象_详解layui中的树形关于取值传值问题

本文详细探讨了layui框架中处理树形结构数据的取值和传值问题,包括如何获取选中节点的值,以及在渲染前处理父级选中状态。通过示例代码展示了layuiXtree的各个关键方法,如GetChecked、GetParent等,帮助开发者理解和解决类似问题。
摘要由CSDN通过智能技术生成

本文介绍了layui中的树形关于取值传值问题,分享给大家,具体如下:

这个是我们需要的效果,实际操作中会先执行渲染 然后在执行方法,然后我们发现树形的JSON是空,调试了N遍一直以为是优先级别的问题了。

最后解决方案是

layui 的 form 模块

var form = "";

layui.use(['form'], function () {

// $ = layui.jquery;

form = layui.form;

//获取节点数据

getTreeData();

//return false;

});

function getTreeData() {

$.ajax({

//async: false,

type: "post",

url: "/api/WebFW//getOrgTree",

datatype: "json",

contenttype: "application/json; charset=utf-8",

success: function (jdata) {

var xtree1 = new layuiXtree({

elem: 'xtree1',

form: form,

data: strToJson(jdata),

isopen: true, //false初始关闭,true打开

click: function (data) { //节点选中状态改变事件监听,全选框有自己的监听事件

console.log(data.elem); //得到checkbox原始DOM对象

console.log(data.elem.checked); //是否选中,true选中

alert(data.value); //弹出value值

}

});

//获取选中val

document.getElementById('btn1').onclick = function () {

var oCks = xtree1.GetChecked();

for (var i = 0; i < oCks.length; i++) {

alert(oCks[i].value);

}

}

//子节点选中改变,父节点更改自身状态

layuiXtree.prototype.ParendCheck = function (ckelem) {

var _this = this;

var xtree_p = ckelem.parentNode.parentNode;

if (xtree_p.getAttribute('class') == 'layui-xtree-item') {

var xtree_all = _this.getChildByClassName(xtree_p, 'layui-xtree-item');

var xtree_count = 0;

for (var i = 0; i < xtree_all.length; i++) {

if (_this.getChildByClassName(xtree_all[i], 'layui-xtree-checkbox')[0].checked) {

xtree_count++;

}

}

if (xtree_count <= 0) {

_this.getChildByClassName(xtree_p, 'layui-xtree-checkbox')[0].checked = false;

_this.getChildByClassName(xtree_p, 'layui-xtree-checkbox')[0].nextSibling.classList.remove('layui-form-checked');

} else {

_this.getChildByClassName(xtree_p, 'layui-xtree-checkbox')[0].checked = true;

_this.getChildByClassName(xtree_p, 'layui-xtree-checkbox')[0].nextSibling.classList.add('layui-form-checked');

}

this.ParendCheck(_this.getChildByClassName(xtree_p, 'layui-xtree-checkbox')[0]);

}

}

//渲染之前按照选中的末级去改变父级选中状态

layuiXtree.prototype.ParentCheckboxChecked = function (e) {

var _this = this;

if (e.parentNode.parentNode.getAttribute('class') == 'layui-xtree-item') {

var _pe = _this.getChildByClassName(e.parentNode.parentNode, 'layui-xtree-checkbox')[0];

_pe.checked = true;

_this.ParentCheckboxChecked(_pe);

}

}

//获取全部选中的末级checkbox对象

layuiXtree.prototype.GetChecked = function () {

var _this = this;

var arr = new Array();

var arrIndex = 0;

var cks = _this.getByClassName('layui-xtree-checkbox');

for (var i = 0; i < cks.length; i++) {

if (cks[i].checked && cks[i].getAttribute('data-xend') == '1') {

arr[arrIndex] = cks[i];

arrIndex++;

}

}

return arr;

}

//获取全部的原始checkbox对象

layuiXtree.prototype.GetAllCheckBox = function () {

var _this = this;

var arr = new Array();

var arrIndex = 0;

var cks = _this.getByClassName('layui-xtree-checkbox');

for (var i = 0; i < cks.length; i++) {

arr[arrIndex] = cks[i];

arrIndex++;

}

return arr;

}

//根据值来获取其父级的checkbox原dom对象

layuiXtree.prototype.GetParent = function (a) {

var _this = this;

var cks = _this.getByClassName('layui-xtree-checkbox');

for (var i = 0; i < cks.length; i++) {

if (cks[i].value == a) {

if (cks[i].parentNode.parentNode.getAttribute('id') == _this._container.getAttribute('id')) return null;

return _this.getChildByClassName(cks[i].parentNode.parentNode, 'layui-xtree-checkbox')[0];

}

}

return null;

}

}

});

}

function strToJson(str) {

var json = (new Function("return " + str))();

return json;

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

本文标题: 详解layui中的树形关于取值传值问题

本文地址: http://www.cppcns.com/ruanjian/java/217870.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值