Ztree Ajax keyword retrieval Dynamic Tree

Ztree Official Website: http://www.ztree.me/v3/main.php#_zTreeInfo

Effect:

Initial page

Matching record

No record

JS Code:

<SCRIPT type = "text/JavaScript"> var quickmsg = "enter a keyword and press enter to search"; $ (function () {$ ("# quickquery "). focus (function () {if ($. trim ($ ("# quickquery "). val () = quickmsg) {$ ("# quickquery "). val ("") ;}}) ;}); function checkback (E, treeid, treenode) {var ztree =$. FN. ztree. getztreeobj ("treeforrole"); nodes = ztree. getcheckednodes (true); Id = ""; name = ""; nodes. sort (function compare (a, B) {return. id-b.id ;}); For (VAR I = 0, L = Nodes. length; I <L; I ++) {ID + = nodes [I]. ID + ","; name + = nodes [I]. name + ",";} If (name. length> 0) {name = Name. substring (0, name. length-1);} If (ID. length> 0) {id = ID. substring (0, id. length-1);} var selobj = $ ("# userforrolesel"); selobj. ATTR ("value", name); $ ("# selectrole "). val (ID); $ ("# userforrolesel "). focus ();} // if no Ajax callback is recorded, the system prompts function asyncback (event, treeid, treenode, MSG) {var nodes = $. FN. Ztree. getztreeobj ("treeforrole "). getnodes (); If (nodes. length = 0) {$ ("# treeforrole" regular .html ("<span style = 'color: # ff0000; margin-left: 10px; margin-top: 105px; '> no matching record retrieved </span> ") ;}} function showmenu () {$ (function () {if ($ (" # quickquery "). val () = "") {$ ("# quickquery "). val (quickmsg);} document. onkeydown = function (e) {// press enter to trigger Ajax query if (E? E. which: event. keycode) = 13) {var setting = {check: {enable: True, chkstyle: "checkbox", chkboxtype: {"Y": "S", "n ": "S" }}, callback: {oncheck: checkback, onasyncsuccess: asyncback}, async: {enable: True, URL: "user_ajaxroles.action", otherparam: {"namekey": $. trim ($ ("# quickquery "). val ()}, datatype: "JSON", datafilter: NULL}, data: {simpledata: {enable: True }};$. FN. ztree. init ($ ("# T Reeforrole "), setting) ;};}); var selobj =$ (" # userforrolesel "); var businessoffset =$ (" # userforrolesel "). offset (); $ ("# menucontentforrole" ).css ({left: businessoffset. left + "PX", top: businessoffset. top + selobj. outerheight () + "PX "}). slidedown ("fast"); $ ("body "). BIND ("mousedown", onbodydown);} function hidemenu () {$ ("# menucontentforrole "). fadeout ("fast");} function onbodydown (event) {If (! (Event.tar get. id = "menubtnforrole" | event.tar get. id = "menucontentforrole" | condition (event.tar get ). parents ("# menucontentforrole "). length> 0) {hidemenu () ;}</SCRIPT>

HTML code:

<S: textfield id = "userforrolesel" name = "userforrolesel" readonly = "true" size = "18"/> <a id = "menubtnforrole" href = "javascript: showmenu (); "> select </a> <Div id =" menucontentforrole "class =" menucontent "style =" border: 1px solid # CCC; width: 198px; height: 160px; overflow: Scroll; scroll-y; display: none; position: absolute; Background-color: # fcfcfc; "> <input class =" quicktext "id =" quickquery "type =" text "/> <ul id =" treeforrole "class =" ztree "style =" margin-top: 0; width: 140px; "> </ul> </div> <s: hidden id =" selectrole "name =" role. roleid "/>

Use struts2 in the background. The related code is as follows:

Action Code:

public String ajaxRoles()         throws Exception{        try        {            result = roleService.getAjaxRoles(nameKey);        }        catch(Exception e)        {            log.error(e.getMessage());            throw e;        }        return "ajaxRoles";}

Struts2-User.xml code:

<package name="rbac_user" namespace="/" extends="json"><action name="User_*" class="xx.UserAction" method="{1}"><result name="ajaxRoles" type="json"><param name="root">result</param></result></action></package>

Service Code:

Public String getajaxroles (string namekey) {// The Dao layer is a simple query by name and will not repeat the list <role> Results = roledao. getajaxroles (namekey); jsonarray JSON = new jsonarray (); For (role Ro: Results) {jsonobject Jo = new jsonobject (); Jo. put ("ID", Ro. getroleid (); Jo. put ("name", Ro. getname (); JSON. add (Jo);} return JSON. tojsonstring ();}