在一个页面修改数据，并且ajax刷新数据列表的数据实现。

最近做layui框架发现用别人封装好的东西总是无法满足我想要的效果。于是决定自己重新写。

今天讲分页

我这里将数据增删改查分成了4个页面，各个页面之间相互关联。

1.add 添加页

2.ajaxlist 采用ajax方式分页的数据页

3.edit修改页

4.volist主页

 

主页信息volist

<include file="tp/header"/>

<!--面包屑-->
<div class="layui-bg-gray" style="padding: 20px;">
<span class="layui-breadcrumb">
  <a href="javascript:;" class="layui-icon-set-fill layui-icon"><cite>{$bread['menu_3']}</cite></a>
  <a href="javascript:;"><cite>{$bread['menu_2']}</cite></a>
  <a href="javascript:;"><cite>{$bread['menu_1']}</cite></a>
</span>
</div>
<!--面包屑-->
<?php
$ajax_url= U('Admin/Scenic/ajaxlist?ajaxId=content');
?>

<fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
    <legend>{$bread['menu_1']}</legend>
    <form id="myForm1" action="{$ajax_url}" method="post">
    <!--搜索部分-->
    <div class="qbl_select" style="margin: 10px">
        <span>景区编号：</span>
        <div class="layui-inline">
            <input class="layui-input" name="scen_no" id="scen_no" autocomplete="off">
        </div>


        <span>景区名称：</span>
        <div class="layui-inline">
            <input class="layui-input" name="scen_name" id="scen_name" autocomplete="off">
        </div>

        <span>地址：</span>
        <div class="layui-inline">
            <input class="layui-input" name="dec_address" id="dec_address" autocomplete="off">
        </div>

        <a class="layui-btn" href="javascript:;"  id="searchBtn">搜索</a>
    </div>
    <!--搜索部分-->
    </form>

    <!--ajax分页加载数据区域-->
        <div id="content"></div>
    <!--ajax分页加载数据区域-->

    <br />

    <!--修改数据区域-->
    <div id="view"></div>
    <!--修改数据区域-->

</fieldset>
<script type="text/javascript">
    $(function(){
        ajaxUrlSo = "{$ajax_url}";
        $("#content").load(ajaxUrlSo);
        $("#searchBtn").click(function(){
            AjaxGetHtml("#myForm1","#content");
        });
    });
</script>
<include file="tp/bottom"/>
</body>
</html>

ajaxlist加载数据页信息

<!--表单数据-->
<style type="text/css">
    .pages a,.pages span {
        display:inline-block;
        padding:2px 5px;
        margin:0 1px;
        border:1px solid #f0f0f0;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;
        border-radius:3px;
    }
    .pages a,.pages li {
        display:inline-block;
        list-style: none;
        text-decoration:none; color:#58A0D3;
    }
    .pages a.first,.pages a.prev,.pages a.next,.pages a.end{
        margin:0;
    }
    .pages a:hover{
        border-color:#50A8E6;
    }
    .pages span.current{
        background:#50A8E6;
        color:#FFF;
        font-weight:700;
        border-color:#50A8E6;
    }
</style>
<form>
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>景区编号</th>
            <th>景区名称</th>
            <th>状态</th>
            <th>地址</th>
            <th>头像</th>
            <th>申请时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <volist name="list" id="vo">
            <tr>
                <td>{$vo['scen_no']}</td>
                <td>{$vo['scen_name']}</td>
                <td>{:getStatusText($vo['status'])}</td>
                <td>{$vo['dec_address']}</td>
                <td>{:showImg($vo['scen_logo'])}</td>
                <td>{:toStringDate($vo['apply_time'])}</td>
                <td width="220px">
                    <a class="layui-btn layui-btn-sm layui-icon layui-icon-edit" οnclick="GetView('#view','{:U('Admin/Scenic/edit?id='.$vo['id'])}');aname('#view');">修改</a>
                    <a class="layui-btn layui-btn-sm layui-btn-danger layui-icon layui-icon-delete" οnclick="DelId('{:U('Admin/Scenic/del')}','{$vo.id}','#content');">删除</a>
                </td>
            </tr>
        </volist>
        </tbody>
        <br />
        <tr class="content" id="{$_REQUEST["ajaxId"]}page">
        <td colspan="8" bgcolor="#FFFFFF"><div class="pages" style="width: 100%;text-align: right">{$page}</div>
        </td>
        </tr>
        {:ajaxPage()}
    </table>
</form>
<!--表单数据-->

add页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css">
    <style>
        #text{
            width: 500px;
            border: 1px solid red;
            height: 100px;
            overflow-y: scroll;
            word-wrap:break-word ;
        }

        /*样式1*/
        .a-upload {
            padding: 4px 10px;
            height: 20px;
            line-height: 20px;
            position: relative;
            cursor: pointer;
            color: #888;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            display: inline-block;
            *display: inline;
            *zoom: 1
        }
        .a-upload  input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }
        .a-upload:hover {
            color: #444;
            background: #eee;
            border-color: #ccc;
            text-decoration: none
        }
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg&s=1"></script>
</head>
<!--面包屑-->
<div class="layui-bg-gray" style="padding: 20px;">
<span class="layui-breadcrumb">
  <a href="javascript:;" class="layui-icon-set-fill layui-icon"><cite>{$bread['menu_3']}</cite></a>
  <a href="javascript:;"><cite>{$bread['menu_2']}</cite></a>
  <a href="javascript:;"><cite>{$bread['menu_1']}</cite></a>
</span>
</div>
<!--面包屑-->
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
    <legend>{$bread['menu_1']}</legend>
    <div style="width: 80%;margin: auto;box-sizing: border-box">
        <form class="layui-form" action="{:U('Admin/Scenic/insert')}" id="form1" method="post">

            <input type="hidden" name="scen_no" value="{$scenicID}">

            <!--景区名称-->
            <div class="layui-form-item">
                <label class="layui-form-label">景区名称</label>
                <div class="layui-input-inline">
                    <input name="scen_name" required lay-verify="required" placeholder="请输入景区名称" autocomplete="off" class="layui-input" type="text">
                </div>
                <div class="layui-form-mid layui-word-aux">名字不要太长，不要超过20个字</div>
            </div>
            <!--景区名称-->

            <!--景区描述-->
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">景区描述</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" name="scen_dec" class="layui-textarea"></textarea>
                </div>
            </div>
            <!--景区描述-->

            <!--景区状态-->
            <div class="layui-form-item">
                <label class="layui-form-label">景区状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="status"  value="1" checked="checked" title="正常">
                    <input type="radio" name="status"  value="2" title="暂停">
                </div>
            </div>
            <!--景区状态-->

            <fieldset class="layui-elem-field">
                <legend>经纬度设置</legend>

                <div class="layui-field-box">

                    <!--景区经度-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">景区经度</label>
                        <div class="layui-input-inline">
                            <input name="long" id="long"  autocomplete="off" class="layui-input" type="text">
                        </div>
                    </div>
                    <!--景区经度-->

                    <!--景区纬度-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">景区纬度</label>
                        <div class="layui-input-inline">
                            <input name="lat" id="lat"  autocomplete="off" class="layui-input" type="text">
                        </div>
                    </div>
                    <!--景区纬度-->

                    <!--景区地址-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">详细地区</label>
                        <div class="layui-input-inline">
                            <input name="dec_address"  id="dec_address" autocomplete="off" class="layui-input" type="text">
                        </div>
                    </div>
                    <!--景区地址-->

                    <!--点击查询经纬度-->
                    <div class="layui-form-item">
                        <div class="layui-input-inline" style="width: 150px;margin-left: 50%;margin-top: -100px">
                            <a class="layui-btn layui-btn-lg layui-icon-search layui-icon qbl_select_address" id='open'>经纬度查询</a>
                        </div>
                    </div>
                    <!--点击查询经纬度-->

                    <!--显示地图-->
                    <div style='width: 650px; height: 500px; position: relative; display: none;' id="allmap_wrap">
                            <div id='allmap' style='width: 100%; height: 100%; position: absolute;'></div>
                        <!--输入搜索-->
                        <div class="layui-input-inline" id="r-result">
                            <input class="layui-input" placeholder="请输入详细地址" type="text"  type="text" id="suggestId"/>
                        </div>
                        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:400px;height:auto; display:none;"></div>
                        <!--输入搜索-->
                    </div>
                    <!--显示地图-->
                </div>
            </fieldset>

            <!--景区logo-->
            <fieldset class="layui-elem-field">
                <legend>景区LOGO设置</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item">
                        <div class="layui-upload">
                            <div class="layui-upload layui-input-block">
                                <a href="javascript:;" class="a-upload">
                                    <input type="file" id="fileId" class="file" value="上传图片" accept="image/gif, image/jpeg,image/png"  οnchange="getUrl(this.files);"/>上传LOGO
                                </a>
                                <img src="__PUBLIC__/img/upload.png" id="Image" width="150px" height="150px" style="margin-left:20px;">
                                <input  type="hidden"  value="" id="scen_logo" name="scen_logo"/>
                            </div>
                        </div>
                    </div>

                </div>
            </fieldset>
            <!--景区logo-->

            <!--景区等级设置-->
            <fieldset class="layui-elem-field">
                <legend>景区等级设置</legend>
                    <div class="layui-form-item">
                        <label class="layui-form-label">景区等级</label>
                        <div class="layui-input-inline">
                            <div id="test1"></div>
                            <input type="hidden" name="scen_level" id="scen_level">
                        </div>
                    </div>
            </fieldset>
            <!--景区等级设置-->

            <!--景区的营业时间-->
            <div class="layui-form-item">
                    <label class="layui-form-label">营业时间</label>
                <div class="layui-inline" style="width: 200px"> <!-- 注意：这一层元素并不是必须的 -->
                    <input type="text" class="layui-input qbl_entry_time"  name="during_time" placeholder="请选择时间段" id="time">
                </div>
            </div>
            <!--景区的营业时间-->

            <!--所属地区-->
            <input type="hidden" value="{$area_no}" name="area_no">
            <!--所属地区-->

            <!--景区说明备注-->
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">说明备注</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" name="remark" class="layui-textarea"></textarea>
                </div>
            </div>
            <!--景区说明备注-->


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <a class="layui-btn layui-btn-lg layui-icon-ok layui-icon qbl_add">提交</a>
                </div>
            </div>

        </form>
    </div>
</fieldset>
<include file="tp/bottom"/>
<script>

    //点击提交
    $(".qbl_add").click(function () {
            var url = $("#form1").attr("action");
            var data = $("#form1").serialize();
            $.post(url,data,function (jsons) {
                if(jsons.status==1){
                    layer.msg(jsons.info, {
                        icon: 1,
                        icon:6,
                        offset:"c",
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                        window.location.reload();
                    });
                }else{
                    layer.alert(jsons.info,{icon:5,'offset':"c"});
                }
            },"json");
        return false; //必须加上return false 取消掉页面跳转事件
    });

    //景区等级
    layui.use('rate', function(){
        var rate = layui.rate;
        var $ = layui.jquery;
        var laydate = layui.laydate;

        //景区等级
        var ins1 = rate.render({
            elem: '#test1'  //绑定元素
            ,length:5
            ,value:2
            ,text :true
            ,setText: function(value) {
                var arrs = {
                    "2":"<span style='color: #fff9ec'>AA级景区</span>"
                    ,"3":"<span style='color: #F8F2C2'>AAA级景区</span>"
                    ,"4":"<span style='color: #F6E45D'>AAAA级景区</span>"
                    ,"5":"<span style='color: #FEE317'>AAAAA级景区</span>"
                };
                this.span.html(arrs[value]);
                $("#scen_level").val(value);
                var level =  $("#scen_level").val();
                if(level>2){
                    layer.msg( level+"A级景区等级设置成功！！！");
                }
            }
        });

        //layui时间选择器
        laydate.render({
            elem: '#time' //指定元素
            ,type: 'time'
            ,range: '~'
            ,done:function (value,date,endDate) {
                $(".qbl_entry_time").val(value);
            }
        });

    });

    //文件上传
    function getUrl(file) {
        var scen_logo =  document.getElementById("scen_logo");
        var img = document.getElementById("Image");
        for (var intI = 0; intI < file.length; intI++)
        {
            var tmpFile = file[intI];
            var reader = new FileReader();
            reader.readAsDataURL(tmpFile);
            reader.onload = function (e) {
                var url = e.target.result;
                img.src = url;
                scen_logo.value = url;
            }
        }
    }

    // <!--地图的显示隐藏-->
    document.getElementById('open').onclick = function () {
            if (document.getElementById('allmap_wrap').style.display == 'none') {
                document.getElementById('allmap_wrap').style.display = 'block';
            } else {
            document.getElementById('allmap_wrap').style.display = 'none';
        }
    }
    // <!--地图的显示隐藏-->

    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }

    var map = new BMap.Map("allmap");
    var geoc = new BMap.Geocoder();   //地址解析对象
    var markersArray = [];
    var geolocation = new BMap.Geolocation();
    var point = new BMap.Point(116.331398, 39.897445);
    map.centerAndZoom(point, 15); // 中心点

    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {"input" : "suggestId"
            ,"location" : map
        });

    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

        setPlace();
    });

    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }

    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            map.enableScrollWheelZoom(true);
        }
        else {
            alert('failed' + this.getStatus());
        }
    }, {enableHighAccuracy: true})
    map.addEventListener("click", showInfo);

    //清除标识
    function clearOverlays() {
        if (markersArray) {
            for (i in markersArray) {
                map.removeOverlay(markersArray[i])
            }
        }
    }
    //地图上标注
    function addMarker(point) {
        var marker = new BMap.Marker(point);
        markersArray.push(marker);
        clearOverlays();
        map.addOverlay(marker);
    }

    //点击地图时间处理
    function showInfo(e) {
        document.getElementById('long').value = e.point.lng;
        document.getElementById('lat').value =  e.point.lat;
        geoc.getLocation(e.point, function (rs) {
            var addComp = rs.addressComponents;
            var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
            layer.confirm("确定定位<strong>"+address+"</strong>是吗？",{icon: 3, title:'提示'},function (index) {
                document.getElementById('dec_address').value = address;
                layer.close(index);
            });
        });
        addMarker(e.point);
    }
</script>
</body>
</html>

edit页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css">
    <style>
        #text{
            width: 500px;
            border: 1px solid red;
            height: 100px;
            overflow-y: scroll;
            word-wrap:break-word ;
        }

        /*样式1*/
        .a-upload {
            padding: 4px 10px;
            height: 20px;
            line-height: 20px;
            position: relative;
            cursor: pointer;
            color: #888;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            display: inline-block;
            *display: inline;
            *zoom: 1
        }
        .a-upload  input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }
        .a-upload:hover {
            color: #444;
            background: #eee;
            border-color: #ccc;
            text-decoration: none
        }
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>
<style>
    #text{
        width: 500px;
        border: 1px solid red;
        height: 100px;
        overflow-y: scroll;
        word-wrap:break-word ;
    }

    /*样式1*/
    .a-upload {
        padding: 4px 10px;
        height: 20px;
        line-height: 20px;
        position: relative;
        cursor: pointer;
        color: #888;
        background: #fafafa;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
        display: inline-block;
        *display: inline;
        *zoom: 1
    }
    .a-upload  input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer
    }
    .a-upload:hover {
        color: #444;
        background: #eee;
        border-color: #ccc;
        text-decoration: none
    }
    .file {
        position: relative;
        display: inline-block;
        background: #D0EEFF;
        border: 1px solid #99D3F5;
        border-radius: 4px;
        padding: 4px 12px;
        overflow: hidden;
        color: #1E88C7;
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
    }
    .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
    }
    .file:hover {
        background: #AADFFD;
        border-color: #78C3F3;
        color: #004974;
        text-decoration: none;
    }
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg&s=1"></script>
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
    <legend>修改{$arr['scen_name']}信息</legend>
    <div style="width: 80%;margin: auto;box-sizing: border-box">
        <form class="layui-form" action="{:U('Admin/Scenic/update')}" id="form1" method="post">

            <input type="hidden" name="id" value="{$arr['id']}">

            <!--景区名称-->
            <div class="layui-form-item">
                <label class="layui-form-label">景区名称</label>
                <div class="layui-input-inline">
                    <input name="scen_name" required lay-verify="required" value="{$arr['scen_name']}"  autocomplete="off" class="layui-input" type="text">
                </div>
            </div>
            <!--景区名称-->

            <!--景区描述-->
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">景区描述</label>
                <div class="layui-input-block">
                    <textarea name="scen_dec" class="layui-textarea">{$arr['scen_dec']}</textarea>
                </div>
            </div>
            <!--景区描述-->

            <!--景区状态-->
            <div class="layui-form-item">
                <label class="layui-form-label">景区状态</label>
                {:getState("status",$arr['status']);}
            </div>
            <!--景区状态-->

            <!--景区logo-->
            <fieldset class="layui-elem-field">
                <legend>景区LOGO设置</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item">
                        <div class="layui-upload">
                            <div class="layui-upload layui-input-block">
                                <a href="javascript:;" class="a-upload">
                                    <input type="file" id="fileId" class="file" value="上传图片" accept="image/gif, image/jpeg,image/png"  οnchange="getUrl(this.files);"/>上传LOGO
                                </a>
                                <img src="{$arr['scen_logo']}" id="Image" width="150px" height="150px" style="margin-left:20px;">
                                <input  type="hidden"  value="" id="scen_logo" name="scen_logo"/>
                            </div>
                        </div>
                    </div>

                </div>
            </fieldset>
            <!--景区logo-->

            <!--景区等级设置-->
            <fieldset class="layui-elem-field">
                <legend>景区等级设置</legend>
                <div class="layui-form-item">
                    <label class="layui-form-label">景区等级</label>
                    <div class="layui-input-inline">
                        <div id="test1"></div>
                        <input type="hidden" name="scen_level"  id="scen_level">
                    </div>
                </div>
            </fieldset>
            <!--景区等级设置-->


            <!--景区说明备注-->
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">说明备注</label>
                <div class="layui-input-block">
                    <textarea  name="remark" class="layui-textarea">{$arr['remark']}</textarea>
                </div>
            </div>
            <!--景区说明备注-->


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <a class="layui-btn layui-btn-lg layui-icon-ok layui-icon qbl_add">提交</a>
                </div>
            </div>

        </form>
    </div>
</fieldset>
    <script src="__PUBLIC__/js/jquery-3.3.1.min.js"></script>
    <script src="__PUBLIC__/layui/layui.all.js"></script>
<script>

    //点击提交
    $(".qbl_add").click(function () {
        var url = $("#form1").attr("action");
        var data = $("#form1").serialize();
        $.post(url,data,function (jsons) {
            if(jsons.status==1){
                layer.msg(jsons.info, {
                    icon: 1,
                    icon:6,
                    offset:"c",
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function(){
                    window.location.reload();
                });
            }else{
                layer.alert(jsons.info,{icon:5,'offset':"c"});
            }
        },"json");
        return false; //必须加上return false 取消掉页面跳转事件
    });

    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
    });

    //景区等级
    layui.use('rate', function(){
        var rate = layui.rate;
        var $ = layui.jquery;
        var laydate = layui.laydate;

        //景区等级
        var ins1 = rate.render({
            elem: '#test1'  //绑定元素
            ,length:5
            ,value:2
            ,text :true
            ,setText: function(value) {
                var arrs = {
                    "2":"<span style='color: #fff9ec'>AA级景区</span>"
                    ,"3":"<span style='color: #F8F2C2'>AAA级景区</span>"
                    ,"4":"<span style='color: #F6E45D'>AAAA级景区</span>"
                    ,"5":"<span style='color: #FEE317'>AAAAA级景区</span>"
                };
                this.span.html(arrs[value]);
                $("#scen_level").val(value);
                var level =  $("#scen_level").val();
                if(level>2){
                    layer.msg( level+"A级景区等级设置成功！！！");
                }
            }
        });

        //layui时间选择器
        laydate.render({
            elem: '#time' //指定元素
            ,type: 'time'
            ,range: '~'
            ,done:function (value,date,endDate) {
                $(".qbl_entry_time").val(value);
            }
        });

    });

    //文件上传
    function getUrl(file) {
        var scen_logo =  document.getElementById("scen_logo");
        var img = document.getElementById("Image");
        for (var intI = 0; intI < file.length; intI++)
        {
            var tmpFile = file[intI];
            var reader = new FileReader();
            reader.readAsDataURL(tmpFile);
            reader.onload = function (e) {
                var url = e.target.result;
                img.src = url;
                scen_logo.value = url;
            }
        }
    }
</script>

控制器代码我不想贴出来，都是增删改查，简单的很。我想讲的是思维方式。

//让分页自动实现AJAX加载
function ajaxPage($js=""){
    strlen($_REQUEST["ajaxId"])<3?$id="content":$id=$_REQUEST["ajaxId"];

    $htm = "<script type=\"text/javascript\">";
    $htm .= "var ".$id."Url = function(url){\n";
    $htm .= "$('#".$id."').load(url);return false;}\n";
    $htm .= "$(\"#".$id."page a\").bind('click',
      function(){
         ".$id."Url(this.href);
         return false;
      });";
    $htm .= $js."</script>";
    $htm .= "<input type='hidden' value='".$_SERVER['REQUEST_URI']."' id='".$id."PageUrl' />";

    F('html',$htm);

    return $htm;
}
这个函数会将ajaxlist页面进行刷新。这样看起来，用户在一个页面修改，也会局部刷新ajax数据。