JQuery将无限极拿到的数组展示在table表格中

php代码

//展示
    public function zs(){
        $this->display();
    }
    public function zhanshi(){
        $model = D("node");
        $res = $model->getAll();
        echo json_encode($res);
    }

html代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<center>
    <table border="1">
        <tr>
            <th>权限ID-排序ID</th>
            <th>权限结构</th>
            <th>名称</th>
            <th>类型</th>
            <th>操作</th>
        </tr>
        <tbody id="tb"></tbody>
    </table>
</center>

<script src="__PUBLIC__/js/jquery.js"></script>
<script>
    $(document).ready(function () {
        //请求方法，拿到json数据
        $.get("{:U('Pro/zhanshi')}",function (data) {
            //转化成键值格式的json
            var res = JSON.parse(data);
            //获取一下顶级菜单
            var first_menu = res[0];
            //获取一下二级菜单
            var second_menu = first_menu.child;

            // console.log(second_menu);
            // return false;

            //拼接第一级的菜单
            var str = '';
            str += "<tr><td>"+first_menu.nid+"-"+first_menu.order_val+"</td><td>"+first_menu.chinese_name+"</td><td>"+first_menu.english_name+"</td><td>"+first_menu.type_name+"</td><td><a href='#'>删除</a></td></tr>";

            //循环拼接二级菜单
            for(var i=0;i<second_menu.length;i++){
                str += "<tr>";
                str += "<td>"+second_menu[i].nid+"-"+second_menu[i].order_val+"</td>";
                str += "<td>&nbsp;&nbsp;&nbsp;&nbsp;|--"+second_menu[i].chinese_name+"</td>";
                str += "<td>"+second_menu[i].english_name+"</td>";
                str += "<td>"+second_menu[i].type_name+"</td>";
                str += "<td><a href='#'>删除</a></td>";
                str += "</tr>";

                //判断一下有没有三级的菜单
                if(second_menu[i].child){
                    var three_menu = second_menu[i].child;
                    for(var j=0;j<three_menu.length;j++){
                        str += "<tr>";
                        str += "<td>"+three_menu[j].nid+"-"+three_menu[j].order_val+"</td>";
                        str += "<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|--"+three_menu[j].chinese_name+"</td>";
                        str += "<td>"+three_menu[j].english_name+"</td>";
                        str += "<td>"+three_menu[j].type_name+"</td>";
                        str += "<td><a href='#'>删除</a></td>";
                        str += "</tr>";
                    }
                }
            }

            //替换
            $("#tb").html(str);
        });
    });
</script>
</body>
</html>

最终效果：

完成删除的话可以参考如下代码：

然后在这句话的外面写方法

$(document).ready(function () {



就可以了！！！！！！！！！！！！例如：

posted @ 2018-07-27 17:02 车车大人阅读(877) 评论(0) 收藏举报

刷新页面返回顶部