后台树状菜单，js实现递归无限分类

如果你需要更好看的无限分类，请查看
http://www.cnblogs.com/zx-admin/p/8021734.html

 //新闻类别管理 
    public function new_classify() {

        $arr = M('news_classify')->where("fid = 0")->select();
        $html = '<ul class="easyui-tree"><li><span>新闻中心</span><ul>';
        if (!empty($arr)) {
            $html .= $this->_tree($arr);
        }
        $html .= '</ul></li></ul>';


        $this->assign("html", $html);
        $this->display();
    }

    //递归树
    public function _tree($arr) {

        foreach ($arr as $key => $v) {

            $fid1 = $v['id'];
            //查询是否有子类
            $res = M('news_classify')->where("fid = $fid1")->select();

                if (!empty($res)) {
                    $html .= '<li ';
                    if (!empty($res)) {
                        $html .= 'data-options="state:\'closed\'"';
                    }
                    $html .= '> <span> ' . $v["new_classify_name"] . '&nbsp;&nbsp;&nbsp;&nbsp;<a id="new_classify_edit" rel=' . $v["id"] . '">编辑</a>&nbsp;&nbsp;&nbsp;&nbsp;<a id="new_classify_del" rel=' . $v["id"] . '>删除</a></span><ul>';

                    $html .= $this->_tree($res);

                    $html .= '</ul></li>';
                } else {
                    $html .= '<li ';
                    if (!empty($res)) {
                        $html .= 'data-options="state:\'closed\'"';
                    }
                    $html .= '> <span> ' . $v["new_classify_name"] . '&nbsp;&nbsp;&nbsp;&nbsp;<a id="new_classify_edit" rel=' . $v["id"] . '">编辑</a>&nbsp;&nbsp;&nbsp;&nbsp;<a id="new_classify_del" rel=' . $v["id"] . '>删除</a></span><ul>';
                    
//                     $html .= $this->_tree($res); //为空就不需要继续遍历
                    
                    $html .= '</ul></li>';
                }
          
        }

        return $html;
    }

			id	fid父ID	new_classify_name分类名称
编辑	复制	删除	1	0	新闻
编辑	复制	删除	2	0	公告
编辑	复制	删除	3	1	体育
编辑	复制	删除	4	2	教育
编辑	复制	删除	5	3	想详细
编辑	复制	删除	6	4	是飞洒的

表结构就这样了，还需要的一个结构的下拉框的结构

function _tree($arr, $fid = 0, $level = 0) {
    static $tree = array(); #用于保存重组的结果,注意使用静态变量
    foreach ($arr as $v) {
        if ($v['fid'] == $fid) {
            //说明找到了以$pid为父节点的子节点,将其保存
            $v['level'] = $level;
            $tree[] = $v;
            //然后以当前节点为父节点，继续找其后代节点
            _tree($arr, $v['id'], $level + 1);
        }
    }
    return $tree;
}

调用返回结果，这段代码随便拔下来的，需要改一下才能看到结果

 <?php foreach ($classify as $value) {  ?>
                    
               
                   <form action="<?php echo site_url('admin/classify_update');?>" class="jqtransform" method="post">
               <table class="form_table" width="100%" border="0" cellpadding="0" cellspacing="0">
                   <tr>
                      <td class="td_center">第<?php echo ($value['level']+1);?>级分类：</td>
                  <td class=""> 
                       <input type="hidden" name="id" value="<?php echo $value['id'];?>" />
                   <?php echo str_repeat("+++++++", $value['level'])?>    <input type="text" name="title" class="input-text lh30" size="15" value="<?php echo $value['title'];?>"> &nbsp;&nbsp;<input type="text" name="url" class="input-text lh30" size="15" value="<?php echo $value['url'];?>">
                   <input type="submit" value="更新" class="ext_btn ext_btn_submit" onclick="location.href='<?php echo base_url('')."index.php/admin/classify_update/".$value['id'];?>'">
                   <input type="button" class="ext_btn ext_btn_error" value="删除" onclick="location.href='<?php echo base_url('')."index.php/admin/classify_del/".$value['id'];?>'">   
             </td>
                </tr>
                  </table>  
                    </form>
              
           <?php      } ?>

html

http://www.jeasyui.com/demo/main/index.php?plugin=Tree&theme=gray&dir=ltr&pitem=

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Tree - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="easyui.css">
    <link rel="stylesheet" type="text/css" href="icon.css">
   
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Basic Tree</h2>
    <p>Click the arrow on the left to expand or collapse nodes.</p>
    <div style="margin:20px 0;"></div>
    <div class="easyui-panel" style="padding:5px">
        <ul class="easyui-tree">
            <li>
                <span>My Documents</span>
                <ul>
                    <li data-options="state:'closed'">
                        <span>Photos   <a href="http://www.baidu.com">编辑</a>  <a href="http://www.baidu.com">删除</a></span>
                        <ul>
                            <li>
                                <span>Friend22222  <a href="http://www.baidu.com">编1111111111111辑</a> </span>   
                            </li>
                            <li>
                                <span>Wife</span>
                            </li>
                            <li>
                                <span>Company</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span>Program Files</span>
                        <ul>
                            <li>Intel</li>
                            <li>Java</li>
                            <li>Microsoft Office</li>
                            <li>Games</li>
                        </ul>
                    </li>
                    <li>index.html</li>
                    <li>about.html</li>
                    <li>welcome.html</li>
                </ul>
            </li>
        </ul>
    </div>
 
</body>
</html>

posted on 2016-11-09 09:45 zh7314 阅读(7275) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

ZX

后台树状菜单，js实现递归无限分类

导航