詳解layui中的樹形關(guān)于取值傳值問題
本文介紹了layui中的樹形關(guān)于取值傳值問題,分享給大家,具體如下:
這個(gè)是我們需要的效果,實(shí)際操作中會先執(zhí)行渲染 然后在執(zhí)行方法,然后我們發(fā)現(xiàn)樹形的JSON是空,調(diào)試了N遍一直以為是優(yōu)先級別的問題了。
最后解決方案是
<script type="text/javascript"> ////layui 的 form 模塊 var form = ""; layui.use(['form'], function () { // $ = layui.jquery; form = layui.form; //獲取節(jié)點(diǎn)數(shù)據(jù) 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初始關(guān)閉,true打開 click: function (data) { //節(jié)點(diǎn)選中狀態(tài)改變事件監(jiān)聽,全選框有自己的監(jiān)聽事件 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); } } //子節(jié)點(diǎn)選中改變,父節(jié)點(diǎn)更改自身狀態(tài) 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]); } } //渲染之前按照選中的末級去改變父級選中狀態(tài) 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; } //根據(jù)值來獲取其父級的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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Jquery右下角抖動、浮動 實(shí)例代碼(兼容ie6、FF)
本實(shí)例結(jié)合了jquery+js中的setTimeout函數(shù)實(shí)現(xiàn)了一直浮動在頁面右下解的廣告,有需要的朋友可以參考一下2013-08-08Query中click(),bind(),live(),delegate()的區(qū)別
這篇文章主要介紹了Query中click(),bind(),live(),delegate()之間的區(qū)別。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11基于jquery的內(nèi)容循環(huán)滾動小模塊(仿新浪微博未登錄首頁滾動微博顯示)
新浪微博未登錄首頁有一個(gè)“大家正在說”的模塊,動態(tài)滾動最新發(fā)布的微博。2011-03-03JQuery 插件制作實(shí)踐 xMarquee插件V1.0
今天要介紹的是實(shí)現(xiàn)類跑馬燈效果的的廣告插件。類似偶公司web-dev的同事在網(wǎng)站首頁上做的目錄廣告播放器。其實(shí)很簡單,LEVIN實(shí)際應(yīng)用中也用到,所以稍作整理如下.2010-04-04jQuery插件AjaxFileUpload實(shí)現(xiàn)ajax文件上傳
這篇文章主要為大家詳細(xì)介紹了jQuery插件AjaxFileUpload實(shí)現(xiàn)ajax文件上傳的相關(guān)資料,需要的朋友可以參考下2016-05-05jQuery實(shí)現(xiàn)的上傳圖片本地預(yù)覽效果簡單示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的上傳圖片本地預(yù)覽效果,結(jié)合實(shí)例形式分析了jQuery上傳圖片本地預(yù)覽所涉及的相關(guān)頁面元素屬性動態(tài)操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-03-03