Easyui 菜單樹執行個體 PHP+MySQL後台載入json

執行個體一 PHP+MySQL+Easyui tree菜單從後台載入json資料

實現功能：從資料庫載入出所有的資料庫名，相應的資料庫載入對應的資料庫表名

非同步載入Tree

tree 支援內建的非同步載入模式,使用者建立一個空的tree,然後定義一個遠程伺服器網站返回json資料用於填充tree來非同步滿足非同步載入需求

<ul id="tree"></ul>

使用javascript載入資料

<script>$('#tree').tree({    url:'tree_getData.php'});</script>

tree的載入是通過URL  'tree_getDat.php'網站.子節點的載入依賴於父節點的狀態.當展開一個關閉節點,如果節點沒有子節點載入,將發送節點id值作為http參數,參數命名為'id'到遠程伺服器,通過以上URL定義.檢索子節點資料
查看一組從伺服器返回的資料

[{       "id": 1,       "text": "Node 1",       "state": "closed",       "children": [{           "id": 11,           "text": "Node 11"      },{           "id": 12,           "text": "Node 12"      }]   },{       "id": 2,       "text": "Node 2",       "state": "closed"  }]

我們需要做的是將後台返回的資料拼湊成上述格式
前台代碼即為上述代碼
後台代碼如下：

<?phprequire('./mysql_connect/mysql_connect.php');$db_select=@mysqli_select_db($dbc,'information_schema');if($dbc){        //查詢所有資料庫名稱        $sql="select SCHEMA_NAME from schemata where SCHEMA_NAME not in         ('information_schema' , 'performance_schema' , 'mysql')";        $rs=@mysqli_query($dbc,$sql);        if($rs)        {                //儲存最終結果            $items=array();            //            $result=array();            while($row=mysqli_fetch_array($rs,MYSQLI_ASSOC))            {                //echo $row['SCHEMA_NAME']." ";                $result['id']=$row['SCHEMA_NAME']; //id                //中間值                $schema_name=$row['SCHEMA_NAME'];                                $result['text']=$row['SCHEMA_NAME']; //text                $result['state']="closed";  //state                $children=array();                //echo $schema_name." ";                //$sql="select TABLE_NAME from tables where TABLE_SCHEMA=$row['SCHEMA_NAME']"; 顯示sql語句錯誤                $sql="select TABLE_NAME from tables where TABLE_SCHEMA='$schema_name'";                $res=@mysqli_query($dbc,$sql);                while($r=mysqli_fetch_array($res,MYSQLI_ASSOC))                {                    //    echo $r['TABLE_NAME']." ";                        $table_name=$r["TABLE_NAME"];                        array_push($children,array("id"=>$table_name,"text"=>$table_name));//childer中的id,text                        $result['children']=$children;                                    }                array_push($items,$result); //(1)            }                         //echo json_encode($result);(2)            echo json_encode($items); //(3)        }}else{        echo "Connect error".mysql_connect_error($dbc);}?>

起初沒有(1) (3),如（2）般輸出，發現前台載入不出來，然後輸出後台資料仔細看了大半天才發現自己個格式是這樣的：
{"id":"tpss","text":"tpss","state":"closed","children":[{"id":"t_prekeychart","text":"t_prekeychart"}]}
跟要求個格式不一樣，最外層少了一個[....],然後想了一下加上了(1)、(3)，然後測試通過了。
上截圖：

下一步就是右邊datagrid資料了。
額外補充：require('./mysql_connect/mysql_connect.php')的內容

<?php /*    在建立串連到Mysql時不選擇相應資料庫，    在其他頁面通過mysqli_select_db($dbc,db_name)選擇需要串連的資料庫    eg:    require ('./mysql_connect.php'); //相對路徑    $db_select=mysqli_select_db($dbc,'db_name');    if(!$dbc){    #coding...    }    else{        #coding...    }*/define('DB_USER','root');define('DB_PASSWORD','1234');define('DB_HOST', 'localhost');//串連$dbc=@mysqli_connect(DB_HOST,DB_USER,DB_PASSWORD) OR die('無法串連到MySQL:'.mysqli_connect_error());//設定字元集mysqli_set_charset($dbc,'utf8');?>

執行個體二 用Jquery easyUI和 Thinkphp 實現菜單樹

需求：

資料庫有某表department表，為了是記錄部門的結構，表中包含3個主要欄位：id、parentId、name。現在要把這個記錄集有規則的樹形輸出出來。

思路：

無外乎是寫處理這個排序的問題。初步想法可以用SQL讀出然後後台排序，這麼成熟的需求肯定有代碼，所以懶的寫，但是找了幾個都不太滿意，那麼就打算從前台找一下解決方案。在前台進行排序。於是翻了幾頁Jquery easyui的文檔，發現了可以這麼解決：
1、寫一個簡單的程式，用Json輸出全部department記錄（輸出地址為http://localhost:8080/app/index.php/Department/tree）
2、在前台處理這個記錄，進行排序。代碼都是現成的。

操作：

第1步：在模版對應的xxxAction頁面中寫一個函數，主要為了輸出tree的json

public function tree(){    $subproject = M('department');    $list = $subproject->select();        echo JSON_ENCODE($list);}

第2步：把下面代碼copy到模版頁面的head中：

<script type="text/javascript">    function convert(rows){        function exists(rows, parentId){            for(var i=0; i<rows.length; i++){                if (rows[i].id == parentId) return true;            }            return false;        }                var nodes = [];        // get the top level nodes        for(var i=0; i<rows.length; i++){            var row = rows[i];            if (!exists(rows, row.parentId)){                nodes.push({                    id:row.id,                    text:row.name                });            }        }                var toDo = [];        for(var i=0; i<nodes.length; i++){            toDo.push(nodes[i]);        }        while(toDo.length){            var node = toDo.shift();    // the parent node            // get the children nodes            for(var i=0; i<rows.length; i++){                var row = rows[i];                if (row.parentId == node.id){                    var child = {id:row.id,text:row.name};                    if (node.children){                        node.children.push(child);                    } else {                        node.children = [child];                    }                    toDo.push(child);                }            }        }        return nodes;    }        $(function(){        $('#tt').tree({            url: 'http://localhost:8080/app/index.php/Department/tree',            loadFilter: function(rows){                return convert(rows);            }        });    });</script>

第三步：

模版的body裡面加一行代碼：

<ul id="tt"></ul>