javascript從資料庫獲取資料後，生成EasyUI樹
阿新 • • 發佈：2019-02-08
不用管是什麼資料庫，php還是java語言
只要資料庫表字段是有自身指向的結構的都行。
廢話少說，直接上程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MyOA</title> <link rel="stylesheet" type="text/css" href="http://jeasyui.com/easyui/themes/material-teal/easyui.css"> <link rel="stylesheet" type="text/css" href="http://jeasyui.com/easyui/themes/icon.css"> </head> <body> <ul id="tt" class="easyui-tree" data-options="data:menuData"></ul> </body> <script type="text/javascript" src="http://jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="http://jeasyui.com/easyui/jquery.easyui.min.js"></script> <script type="text/javascript"> function makeEasyTree(data){ if(!data) return []; var _newData = []; //最終返回結果 var _treeArray = {}; //記錄一級節點 var _root = 1; //最頂層fid var _idKey = "id"; //主鍵的鍵名 var _fidKey = "fid"; //父ID的鍵名 _getChildren(_root); function _getChildren($root){ var $children = []; for (var i in data){ if($root == data[i][_fidKey]){ data[i]["children"] = _getChildren(data[i][_idKey]); $children.push(data[i]); } //只要一級節點 if(_root == data[i][_fidKey] && !_treeArray[data[i][_idKey]]){ _treeArray[data[i][_idKey]] = data[i]; _newData.push(data[i]); } } return $children; } return _newData; } var menuData = [ {"id":"2","fid":"1","text":"系統設定","nodeUrl":"Admin"}, {"id":"5","fid":"1","text":"筆記本","nodeUrl":"Admin"}, {"id":"3","fid":"2","text":"系統角色管理","nodeUrl":"Admin&m=Sys&a=manageRole"}, {"id":"4","fid":"2","text":"系統選單管理","nodeUrl":"Admin&m=Sys&a=manageNode"}, {"id":"8","fid":"2","text":"使用者管理","nodeUrl":"Admin&m=Sys&a=manageUser"}, {"id":"6","fid":"5","text":"筆記列表","nodeUrl":"Admin&m=LjbNote"}, {"id":"7","fid":"5","text":"新增筆記","nodeUrl":"Admin&m=LjbNote&a=saveNote"}, {"id":"9","fid":"7","text":"管理分類","nodeUrl":"Admin&m=LjbNote&a=manageType"}, {"id":"10","fid":"9","text":"test","nodeUrl":""}]; menuData = makeEasyTree(menuData); </script> </html>