基础Ajax,增删改查案例

其他 2018-09-16 20:21:32 阅读次数: 0 
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>表签设置</title>
    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">

    <!--open-->
    <link href="css/jquery.dialogbox-1.0.css" rel="stylesheet">

    <!-- Sweet Alert -->
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <style>
        .ibox-title{
            min-height:55px;
            min-width: 207%;
        }
        .ibox-content{
            min-width: 207%;
        }
        .col-sm-2 {
            width: 4.666667%;
        }
        .ibox-content{
            padding:0px 20px 0px 20px;
        }
        .ibox {
            margin-bottom: 0px;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form method="post" class="form-horizontal m-t" action="selectCount" name="query" id="query">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">添加标签：</label>
                            <div class="col-sm-2">
                                <button class="btn btn-outline btn-primary open_add_page" data-type="0" type="reset">添加</button>
                            </div>
                        </div>
                        <!-- 隐藏表单域,记录当前页面跳转地址,出现异常时获取此值 -->
                        <input type="hidden" name="current_page" value="authterm_data" >
                    </form>
                </div>

            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="table_basic.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>编号</th>
                            <th>标签名称</th>
                            <th>标签编号</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody class="list">
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>

<!---open--->
<script src="js/jquery.dialogbox-1.0.js"></script>
<!-- Peity -->
<script src="js/plugins/peity/jquery.peity.min.js"></script>

<!-- 自定义js -->
<script src="js/content.js?v=1.0.0"></script>


<!-- iCheck -->
<script src="js/plugins/iCheck/icheck.min.js"></script>

<!-- Peity -->
<script src="js/demo/peity-demo.js"></script>

<script>
    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    });
</script>

<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
<!--统计代码，可删除-->
<script src="js/plugins/layer/layer.min.js"></script>
<script src="js/plugins/sweetalert/sweetalert.min.js"></script>
<script type="text/javascript">
    $(function () {
        show();
    })

    // //打开添加数据页面
    $(document).on('click','.open_add_page',function(){
        //获取下拉列表这里要用同步async:false,
        var array=[];
            $.ajax({
                url:'tab/selectListTab',
                type:'get',
                dataType:'json',
                success:function(res){
                    var datas=res.obj;
                    for(var i=0;i< datas.length ;i++){
                        //先创建好select里面的option元素
                        var option = document.createElement("option");
                        //转换DOM对象为JQ对象,好用JQ里面提供的方法 给option的value赋值
                        $(option).val(datas[i].tId);
                        //给option的text赋值,这就是你点开下拉框能够看到的东西
                        $(option).text(datas[i].tName);
                        //获取select 下拉框对象,并将option添加进select
                        $('#problemTypeId').append(option);
                    }
                }
            })
        //iframe层   parent 注意  把  parent 去掉
        var index=layer.open({
                type : 1,
                title : '数据添加页面',
                shadeClose : false,//是否点击遮罩关闭  如果是true就关闭   false不能关闭
                shade : 0.3,//遮罩层的透明度  0-1
                area : [ '40%', '51%' ],//弹框的大小   宽和高
                content : "<div class='dialogbox-main' style='border-left-width: 5px; direction: ltr; border-color: rgb(90, 90, 90); display: block;'><div class='dialogbox-message'><div id='companySelectFotmTable' style='display:table;width:100%;'>\n" +
                "<div id='comapnyRowId1' style='display:table-row;height: 40px'><div style='display:table-cell;'><label for='companyRdoID1'>编号</label></div><div style='display:table-cell;height: 40px;'>\n" +
                "<input id='firstname' name='firstname' type='text' autocomplete='off'>\n" +
                "</div></div>\n" +
                "    \n" +
                "<div id='comapnyRowId1' style='display:table-row;height: 40px'><div style='display:table-cell;'><label for='companyRdoID1'>标签名称</label></div><div style='display:table-cell;'>\n" +
                "<select data-placeholder=' ' class='chosen-select' style='width:76.2%;' tabindex='4' id='problemTypeId'><option>请选择</option>\n</select>" +
                "</div></div><div style='display:table-row;height: 40px'><div style='display:table-cell'>&nbsp;</div><button class='btn btn-primary' type='submit' id='add' ids=''  data-type='0'>保存</button></div></div></div></div>" //iframe的url
            });
    })


    // //打开修改数据页面
    $(document).on('click','.open_add_page1',function(){
        //获取下拉列表这里要用同步async:false,
        var array=[];
        var me=$(this);
        var ttId=me.attr("id");
        var str ="";
        var str1="";
        var strhidden="";
        $.ajax({
            url:'tab/selectListTab',
            type:'get',
            dataType:'json',
            success:function(res){
                var datas=res.obj;
                for(var i=0;i< datas.length ;i++){
                    //先创建好select里面的option元素
                    var option = document.createElement("option");
                    //转换DOM对象为JQ对象,好用JQ里面提供的方法 给option的value赋值
                    $(option).val(datas[i].tId);
                    //给option的text赋值,这就是你点开下拉框能够看到的东西
                    $(option).text(datas[i].tName);
                    //获取select 下拉框对象,并将option添加进select
                    $('#problemTypeId').append(option);
                }
            }
        });
        $.ajax({
            url:'tabrecord/TabSelectOne',
            type:'get',
            async:false,
            data:{ ttId:ttId,},
            dataType:'json',
            success:function(res){
                var datas=res.object;
                if(datas.deviceId){
                    str ="<input id='firstname' name='firstname' type='text' value='"+datas.deviceId+"'>";
                }else {
                    str ="<input id='firstname' name='firstname' type='text' value=''>";
                }
                if(datas.tId){
                    str1="<option value='"+datas.tId+"' selected = 'selected'>"+datas.tName+"</option>"
                }else {
                   str1="<option value='' selected = 'selected'></option>"
                }
                  strhidden="<input type='hidden' id='field＿name'  name='field＿name' value='"+datas.ttId+"'>"
            }
        });
        //iframe层   parent 注意  把  parent 去掉
       var index1= layer.open({
            type : 1,
            title : '数据修改页面',
            shadeClose : false,//是否点击遮罩关闭  如果是true就关闭   false不能关闭
            shade : 0.3,//遮罩层的透明度  0-1
            area : [ '40%', '51%' ],//弹框的大小   宽和高
            content : "<div class='dialogbox-main' style='border-left-width: 5px; direction: ltr; border-color: rgb(90, 90, 90); display: block;'><div class='dialogbox-message'><div id='companySelectFotmTable' style='display:table;width:100%;'>\n" +
            "<div id='comapnyRowId1' style='display:table-row;height: 40px'><div style='display:table-cell;'><label for='companyRdoID1'>编号</label></div><div style='display:table-cell;height: 40px;'>\n" +
            str+strhidden+
            "</div></div>\n" +
            "    \n" +
            "<div id='comapnyRowId1' style='display:table-row;height: 40px'><div style='display:table-cell;'><label for='companyRdoID1'>标签名称</label></div><div style='display:table-cell;'>\n" +
            "<select data-placeholder=' ' class='chosen-select' style='width:76.2%;' tabindex='4' id='problemTypeId'>"+str1+"</select>" +
            "</div></div><div style='display:table-row;height: 40px'><div style='display:table-cell'>&nbsp;</div><button class='btn btn-primary' type='submit' id='update' ids=''  data-type='0'>保存</button></div></div></div></div>" //iframe的url
        });
    });



    $(document).on('click','.del',function(){//删除数据
        var me=$(this);
        var ttId=me.attr("id");
        swal({
                    title: "您确定要删除这条信息吗",
                    text: "删除后将无法恢复，请谨慎操作！",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "是的，我要删除！",
                    cancelButtonText: "让我再考虑一下…",
                    closeOnConfirm: false,
                    closeOnCancel: false,
                },
                function (isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url:'tabrecord/tabDelet',
                            type:'get',
                            data:{ ttId:ttId,},
                            dataType:'json',
                            success:function(res){
                                if(res.msg=='ok'){
                                    swal("删除成功！","成功","success");
                                    show();
                                }else {
                                    swal("删除失败！","失败","error");
                                }
                            }
                        })
                    } else {
                        swal("已取消", "您取消了删除操作！", "warning");
                    }
                });
    })

    $(document).on('click','#add',function(){//添加
        var me=$(this);
        var deviceId=$('#firstname').val();
        var tId=$('#problemTypeId option:selected').val();
        $.ajax({
            url:'tabrecord/TabInsert',
            type:'get',
            data:{deviceId:deviceId,
                tId:tId,},
            dataType:'json',
            success:function(res){
                if(res.msg=='ok'){
                    parent.layer.msg('保存成功!');
                    layer.close(layer.index);
                }else {
                    parent.layer.msg('保存失败!');
                    refresh()
                }
            }
        })
    })

    $(document).on('click','#update',function(){//修改
        var ttId=$('#field＿name').val();
        var deviceId=$('#firstname').val();
        var tId=$('#problemTypeId option:selected').val();
        console.log(ttId);
        $.ajax({
            url:'tabrecord/tabUpadte',
            type:'get',
            data:{ttId:ttId,
                deviceId:deviceId,
                tId:tId,},
            dataType:'json',
            success:function(res){
                if(res.msg=='ok'){
                    parent.layer.msg('修改成功!');
                    layer.close(layer.index);
                }else {
                    parent.layer.msg('修改失败!');
                    refresh()
                }
            }
        })
    })


    //    重置
    function refresh(){
        $('input[name="firstname"]').val('');//表签名称
        $('input[name="firstids"]').val('');//表签编号
    }


    function show(){
        $.ajax({
            url:'tabrecord/tabSelectList',
            type:'get',
            //data:{sid:sId},
            dataType:'json',
            success:function(res){
                var datas=res.obj;
                var str="";
                for(var i=0;i<datas.length;i++){
                    str+='<tr id="'+datas[i].ttId+'" class="idt">' +
                            '                    <td>'+[i+1]+'</td>' +
                            '                    <td>'+datas[i].deviceId+'</td>' +
                            '                    <td>'+datas[i].tName+'</td>' +
                            '                    <td>'+datas[i].tCoud+'</td>' +
                            '                    <td class="parent" id="'+datas[i].ttId+'"> ' + '                        ' +
                            '                    <a href="javascript:;" class="choose open_add_page1" id="'+datas[i].ttId+'">修改</a>' +
                            '                    <a href="javascript:;" class="del" id="'+datas[i].ttId+'">删除</a>' +
                            '</td> ' +
                            '                </tr>'
                }
                $('.list').html(str)
            }
        })
    }

</script>


</body>

</html>

猜你喜欢

转载自blog.csdn.net/c_molione/article/details/81318809
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022