This article mainly introduces JQueryztree with filtering and asynchronous loading instances. zTree supports static and Ajax asynchronous loading of node data, and supports extremely flexible checkbox or radio selection, this article introduces the examples in this article and shares the examples of JQuery ztree filtering and asynchronous loading for your reference. The details are as follows:
<Head> <base href = "<% = basePath %>">My JSP 'ztree. jsp 'starting page
<Script type = "text/javascript" src = "zTrees/js/jquery-1.4.4.min.js? 1.1.9 "> script <script type =" text/javascript "src =" zTrees/js/jquery. ztree. core-3.5.js? 1.1.9 "> script <script type =" text/javascript "src =" zTrees/js/jquery. ztree. excheck-3.5.js? 1.1.9 "> script <script type =" text/javascript "src =" zTrees/js/jquery.ztree.exe dit-3.5.js? 1.1.9 "> script <script type =" text/javascript "src =" zTrees/js/jquery. ztree. exhide-3.5.js? 1.1.9 "> script <SCRIPT type =" text/javascript ">$ (function () {var setting = {async: {// asynchronously load type:" post ", enable: true, url: getUrl}, check: {enable: true}, data: {simpleData: {enable: true}, callback: {onClick: nodeClick, onCheck: nodeCheck };$. fn. zTree. init ($ ("# treeDemo"), setting) ;}); // return address function getUrl (treeId, treeNode) {return "***. do? Method = listXMLTree & **** Sid = 100 ";} // click node function nodeClick (event, treeId, treeNode) {// alert (treeId + treeNode. id + treeNode. mobileNO); var treeObj = $. fn. zTree. getZTreeObj ("treeDemo"); var sNodes = treeObj. getSelectedNodes (); if (sNodes. length> 0) {if (! TreeNode. isParent) {$. ajax ({type: 'post', url: '***. do? Method = listXMLChildren ', data: {' ***** Sid ': treeNode. id}, dataType: 'text', async: false, success: function (dat) {var dats = eval (dat); if (dats. length! = 0) {// var treeObj = $. fn. zTree. getZTreeObj ("treeDemo"); // treeObj. addNodes (treeNode, dats); treeObj. addNodes (treeNode, dats) ;}}) ;}else {treeObj. expandNode (treeNode) ;}}// select the node function nodeCheck (event, treeId, treeNode) {var treeObj =$. fn. zTree. getZTreeObj ("treeDemo"); nodes = treeObj. getCheckedNodes (true); var str = ""; for (var I = 0, l = nodes. length; I <l; I ++) {// alert (nodes [I]. id + nodes [I]. inclueno); if (nodes [I]. inclueno! = Null) {str + = nodes [I]. name + ":" + nodes [I]. mobileNO + ";" ;}}$ ('# mtdstname '). val (str);} // listen to the search box $ (function () {$ ('# sch '). bind ('input propertychang', function () {var treeObj = $. fn. zTree. getZTreeObj ("treeDemo"); var value = $ ('# sch '). val (); nodeList = treeObj. getNodesByParamFuzzy ('name', value); nodes = treeObj. getNodes (); treeObj. hideNodes (nodes [0]. children); treeObj. showNodes (nodeList) ;}); </SCRIPT>
Tree Structure:
List:
</Body>
Specific function operations:
Search Municipal Party committee:
The above is the ztree with filtering and asynchronous loading functions. I hope you will have a deep understanding of ztree through several recent articles.