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

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