用一个form表单实现一次性无限极分类添加功能

最新推荐文章于 2023-10-28 10:54:16 发布

yqwwj001

最新推荐文章于 2023-10-28 10:54:16 发布

阅读量986

点赞数

本文链接：https://blog.csdn.net/yqwwj001/article/details/53670365

版权

首先表单类似于这个样子：

接下来是前台的显示页面，模板用smatey

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        $(function(){

            $(document).on('click','.a1',function(){

                $(this).parent().parent().before(' <tr><td></td><td><br/><input type="text" name="son_name1[]" placeholder="子分类名称"/>  <input type="text" name="son_sort1[]" placeholder="排序"/>  <a href="javascript:void(0)" style=" text-decoration:none" class="z1">-</a></td></tr>');

            })

            $(document).on('click','.z1',function(){

                $(this).parents('tr').remove();

            })

            $(document).on('click','.a2',function(){

                $(this).parent().parent().before(' <tr><td></td><td><br/><input type="text" name="son_name2[]" placeholder="子分类名称"/>  <input type="text" name="son_sort2[]" placeholder="排序"/>  <a href="javascript:void(0)" style=" text-decoration:none" class="z2">-</a></td></tr>');

            })

            $(document).on('click','.z2',function(){

                $(this).parents('tr').remove();

            })

            $(document).on('click','.a3',function(){

                $(this).parent().parent().before(' <tr><td></td><td><br/><input type="text" name="son_name3[]" placeholder="子分类名称"/>  <input type="text" name="son_sort3[]" placeholder="排序"/>  <a href="javascript:void(0)" style=" text-decoration:none" class="z3">-</a></td></tr>');

            })

            $(document).on('click','.z3',function(){

                $(this).parents('tr').remove();

            })

            $(document).on('click','.a4',function(){

                $(this).parent().parent().before(' <tr><td></td><td><br/><input type="text" name="son_name4[]" placeholder="子分类名称"/>  <input type="text" name="son_sort4[]" placeholder="排序"/>  <a href="javascript:void(0)" style=" text-decoration:none" class="z4">-</a></td></tr>');

            })

            $(document).on('click','.z4',function(){

                $(this).parents('tr').remove();

            })

        })
    </script>
</head>
<body>
<form action="add" method="post">
    <table>
        <tr>
            <td>栏目名称:</td>
            <td><input type="text" name="name" placeholder="栏目名称"/></td>
        </tr>
        <tr>
            <td>分类一：</td>
            <td><input type="text" name="big_name[]" placeholder="分类名称"/>  <input type="text" name="big_sort[]" placeholder="排序"/></td>
        </tr>
        <tr>
            <td></td>
            <td>子分类：<br/><input type="text" name="son_name1[]" placeholder="子分类名称"/>  <input type="text" name="son_sort1[]" placeholder="排序"/></td>
        </tr>
        <tr>
            <td></td>
            <td><a href="javascript:void(0)" style="text-decoration:none" class="a1">+</a></td>
        </tr>
        <tr>
            <td>分类二：</td>
            <td><input type="text" name="big_name[]" placeholder="分类名称"/>  <input type="text" name="big_sort[]" placeholder="排序"/></td>
        </tr>
        <tr>
            <td></td>
            <td>子分类：<br/><input type="text" name="son_name2[]" placeholder="子分类名称"/>  <input type="text" name="son_sort2[]" placeholder="排序"/></td>
        </tr>
        <tr>
            <td></td>
            <td><a href="javascript:void(0)" style=" text-decoration:none" class="a2">+</a></td>
        </tr>
        <tr>
            <td>分类三：</td>
            <td><input type="text" name="big_name[]" placeholder="分类名称"/>  <input type="text" name="big_sort[]" placeholder="排序"/></td>
        </tr>
        <tr>
            <td></td>
            <td>子分类：<br/><input type="text" name="son_name3[]" placeholder="子分类名称"/>  <input type="text" name="son_sort3[]" placeholder="排序"/></td>
        </tr>
        <tr>
            <td></td>
            <td><a href="javascript:void(0)" style="text-decoration:none" class="a3">+</a></td>
        </tr>
        <tr>
            <td>分类四：</td>
            <td><input type="text" name="big_name[]" placeholder="分类名称"/>  <input type="text" name="big_sort[]" placeholder="排序"/></td>
        </tr>
        <tr>
            <td></td>
            <td>子分类：<br/><input type="text" name="son_name4[]" placeholder="子分类名称"/>  <input type="text" name="son_sort4[]" placeholder="排序"/></td>
        </tr>
        <tr>
            <td></td>
            <td><a href="javascript:void(0)" style=" text-decoration:none" class="a4">+</a></td>
        </tr>
    </table>
    <input type="submit" value="保存"/>
</form>
</body>
</html>

之后是后台的数据处理：

<?php

class ColumnController extends BaseController{

    public function cat(){

        $this->display('index/add.html');

    }

    public function add(){

        $name = $_POST['name'];

        $data = ['name'=>$name];

        $cat = new CatModel();

        $listId = $cat->add($data);

        unset($_POST['name']);

        $data = array();
        foreach($_POST['big_name'] as $k => $v){

            $data['name'][] = $v;
            $data['sort'][] = $_POST['big_sort'][$k];

        }

        foreach($data['name'] as $kk=>$vv){

            if($data['name'][$kk]==''&&$data['sort'][$kk]==''){

                continue;

            }

            $ids[] = $cat->add(['name'=>$vv,'sort'=>$data['sort'][$kk],'pid'=>$listId]);

        }

        $arr = array();
        for($i=1;$i<=4;$i++){

            foreach($_POST['son_name'.$i] as $k=>$v){

                $arr['name'][$i][] = $v;
                $arr['sort'][$i][] = $_POST['son_sort'.$i][$k];

            }
        }

        foreach($arr['name'] as $kk=>$vv){

            foreach($vv as $kkk=>$vvv){

                if($data['name'][$kkk]==''&&$data['sort'][$kkk]==''){

                    continue;

                }

                foreach($ids as $k=>$v){

                    $cat->add(['name'=>$vvv,'sort'=>$data['sort'][$kkk],'pid'=>$v]);

                }

            }

        }

    }

}