ext combox tree 執行個體 可運行 php

來源:互聯網
上載者:User

js 部分

<br /> /**<br /> tree demo 1 非同步樹<br /> 組成:<br /> 1.節點<br /> a.普通節點<br /> b.根節點<br /> c.預設屬性 id text leaf children icon<br /> 2..樹載入器<br /> 3.樹容器<br /> 4.事件<br /> 5.渲染<br /> **/<br /> Ext.onReady(function() {<br /> var comboHidden = new Ext.form.Hidden({<br /> name:'comboHidden',<br /> value:''<br /> });<br /> var comboxWithTree = new Ext.form.ComboBox({<br /> store:new Ext.data.SimpleStore({fields:[],data:[[]]}),<br /> editable:false,<br /> mode: 'local',<br /> triggerAction:'all',<br /> maxHeight: 200,<br /> height:500,<br /> tpl: "<div id='tree'></div>",<br /> selectedClass:'',<br /> value:'',<br /> onSelect:Ext.emptyFn<br /> });<br /> comboxWithTree.render('comboxWithTree');<br /> var opRoot = new Ext.tree.AsyncTreeNode({<br /> id:'1',<br /> text:'root'<br /> });<br /> //與後台通訊的載入器<br /> var loader = new Ext.tree.TreeLoader({<br /> dataUrl: 'exttree.php',<br /> baseParams:{<br />method:'getTree',<br />pId:''<br /> }<br /> });<br /> //樹容器<br /> var opTree = new Ext.tree.TreePanel({<br /> anchor : '95%',<br /> frame : false,<br /> width : 200,<br /> height : 400,<br /> animate : false,<br /> rootVisible : true,<br /> autoScroll : true,<br /> loader : loader, //之前定義的載入器<br /> root : opRoot //之前定義的根節點<br /> });<br /> //載入之前所觸發的事件<br /> opTree.loader.on("beforeload", function(treeLoader, node) {<br />loader.baseParams.pId = node.attributes.id;<br /> });<br /> //樹節點點擊事件<br /> opTree.on('click',function(node,event) {<br /> if(node.isLeaf()){<br />event.stopEvent();<br />comboxWithTree.setValue(node.attributes.text);<br />comboHidden.setValue(node.attributes.id);<br />comboxWithTree.collapse();</p><p>Ext.Msg.show({<br /> title : '提示',<br /> msg : "你單擊了:<br /> node -- " + node<br />+ "<br /> node.attributes.target -- " + node.attributes.target<br />+ "<br /> comboHidden.getValue() -- " + comboHidden.getValue(),<br /> animEl: node.ui.textNode<br />});<br /> } else {<br />event.stopEvent();<br />node.toggle(); //點擊時展開或關閉子節點<br /> }<br /> });<br /> comboxWithTree.on('expand',function(){<br />opTree.render('tree');<br />opTree.root.reload();<br /> });<br /> });<br /> 

html 部分

<div id='comboxWithTree'></div> 

php 部分,這裡省略資料庫互動過程,通過數組類比後台資料

#################################exttree.php:

<br />$Record = array(<br />array("ID" => "5", "NAME" => "A02", "TARGET" => "類別")<br />,array("ID" => "11", "NAME" => "A03", "TARGET" => "年代")<br />,array("ID" => "15", "NAME" => "A04", "TARGET" => "地區")<br />);</p><p>$jsonRet = "[";<br />foreach ($Record as $key => $value){<br /> if ($totalRecord[0]["total"] > 0){<br /> $ifleaf = "false";<br /> } else {<br /> $ifleaf = "true";<br /> }<br /> /* 傳遞自訂屬性,單個欄位的值 */<br /> $jsonRet .= "{<br /> id:'{$value["ID"]}'<br /> ,text:'{$value["NAME"]}'<br /> ,leaf:{$ifleaf}<br /> ,target:'{$value["TARGET"]}'<br /> },";<br />}<br />$jsonRet = trim($jsonRet, ",");<br />$jsonRet .= "]";<br />@header("Content-type: text/html; charset=utf-8");<br />exit($jsonRet); 

 

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.