详解layui中的树形关于取值传值问题

2020-05-24 21:39:12易采站长站整理

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

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

最后解决方案是


<script type="text/javascript">
////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');