这篇文章主要介绍了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中树形关于取值传值问题的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
当前名称：layui中树形关于取值传值问题的示例分析
浏览地址：
http://bzwzjz.com/article/pdiiid.html
