详解layui中的树形关于取值传值问题
更新时间:2018年01月16日 10:44:13 作者:暴君2008
本篇文章主要介绍了详解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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
本篇文章主要介绍了easyUI的doCellTip 就是鼠标放到单元格上有个提示的功能,对于Javascript教程感兴趣的同学可以参考一下2016-08-08jQuery中的read和JavaScript中的onload函数的区别
这篇文章主要介绍了jQuery中的read和JavaScript中的onload函数的区别,这两个函数在web编程中是最常用的,一定要搞清楚它们的区别,需要的朋友可以参考下2014-08-08jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
在上两篇文章中,我们看到每次要通过 jQuery 的原型增加共享方法的时候,都需要通过 jQuery.fn 一个个进行扩展,非常麻烦.2010-08-08jQuery插件jquery-barcode实现条码打印的方法
这篇文章主要介绍了jQuery插件jquery-barcode实现条码打印的方法,结合实例形式较为详细的分析了jQuery插件jquery-barcode的功能及打印条码的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11jQuery插件form-validation-engine正则表达式操作示例
这篇文章主要介绍了jQuery插件form-validation-engine正则表达式操作,结合实例形式分析了jQuery插件form-validation-engine进行正则验证操作的相关技巧,需要的朋友可以参考下2017-02-02
最新评论