easyui-tree和thinkphp对于树节点的显示

         在码路上，对于一个新手，尤其是不是科班出身的人，其道路更为艰难，唯有坚持，唯有比别人花费更多的时间和精力才能把代码敲好，学好，用好，遇到挫折不气馁，不放弃---送给码路上的自己。。。 

     本文主要分析在easyui-tree使用过程中遇到的一些问题，希望在岁月中留下自己学习的足迹，同时也希望能帮助处于同样困境中的一些朋友。。

      easyui-tree对于树的加载，一种方式是通过html直接书写父节点以及子节点，另外一种是通过后台组装好这个树的节点数据，然后通过封装一个json格式的文件，在返回在这个树。

（一）：通过html实现（至贴出具体实现的代码，整个前台的html代码自己补充，不支持直接复制粘贴）

                    <ul class="easyui-tree">                     <li data-options="iconCls:'icon-tc'">                    <span>文件查看</span>                    <ul>                     <li data-options="iconCls:'icon-add'">                         <a href="javascript:void(0);"                             class="cs-navi-tab" style="text-decoration: none;color:black" >                             分类查看                         </a>                     </li>                     <li data-options="iconCls:'icon-searchfile'">                         <a href="javascript:void(0);"                             class="cs-navi-tab" style="text-decoration: none;color:black">                             文件查询                         </a>                     </li>                 </ul>             </li>        </ul>

效果图：

（二），js和后台结合显示树节点

在前台html中，仅需要添加如下代码：

<ul id='tree'> </ul>

然后在js中实现和后台交互，代码如下：

       <script type="text/javascript">            $(function () {                $('#tree').tree({                    url: '__APP__/Index/treeDisplay',                    animate: true,                    lines: true,                });                                                            });        </script>

其中url为树节点构造的方法，在本例子中，我紧紧通过构造一些假数据生成json格式的文件，代码如下：

public function treeDisplay() {        //$arr = array();        $ddd=array("id"=>"2",'text'=>"主机配置");        $chidrenArr = array($ddd);        $temp1 =array(            array(                'id' => "1",                 'text' => "系统管理",                'iconCls'=>'icon-add',                'children'=>$chidrenArr,                ),             array(                'id' => "2",                 'text' => "配置管理",                'children'=>array(                    array(                        'id'=>'21',                        'text'=>'系统配置',                        'children'=>                        array(                            array(                                'id'=>'211',                                'text'=>'cpu配置'                                ),                            array('id'=>'212',                                  'text'=>'内存配置'                                  ),                            )),                    array(                        'id'=>'22',                        'text'=>'节点配置'                        ))                ));       // array_push($arr, $temp1);        echo json_encode($temp1);    }

其中$tmep1必须是一个二维数组，如$temp1=array(array('id'=>'1','text'=>'hello')));这样能正常显示树节点，这样$temp1=array('id'=>'1','text'=>'hello')则无法正常显示（需注意，具体实现逻辑暂时没研究透）对于，children节点一样;

实现效果如下图：

如此，即可实现easyui-tree树节点的实现。

注意：

在本文章中，对于树节点采用了自定义图表的实现方式，iconCls这里，需要注意头文件的引入顺序，否则无法显示自定义图表，

        <link rel="stylesheet" type="text/css" href="__PUBLIC__/easyui/themes/default/easyui.css">        <link rel="stylesheet" type="text/css" href="__PUBLIC__/easyui/themes/icon.css">         <script type="text/javascript" src="__PUBLIC__/easyui/jquery.min.js"></script>          <script type="text/javascript" src="__PUBLIC__/easyui/jquery.easyui.min.js"></script>        <script type="text/javascript" src="__PUBLIC__/easyui/easyui-lang-zh_CN.js"></script>        <script type="text/javascript" src="__PUBLIC__/js/accordion.js"></script>

其中

easyui.css

必须比

icon.css

先引用，否则无法正常显示图片，还有就是

jquery.min.js

也必须在

jquery.easyui.min.js

之前引用，否则也会出现问题。望知晓