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

本文介绍了layui中的树形关于取值传值问题，分享给大家，具体如下：这个是我们需要的效

本文介绍了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');
 }
 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;
 }
</script>

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