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>