zoukankan html css js c++ java

增删改查前端部分

请大家看的时候忽略前端界面,这里只看功能,界面我没有去做，起初是为学习,net为写的，至于为什么不把几个功能凑到一起，而单独放开来，这是一来自己写的时候没有规划，想到什么写什么，二呢我太懒不想想太多嘎嘎嘎,大神轻喷

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <link href="http://www.bootcss.com/p/buttons/css/buttons.css" rel="stylesheet" />
    <script src="http://common.cnblogs.com/script/jquery.js"></script>
    <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" />
    <title></title>
    <style type="text/css">
        .header {
             100%;
            padding: 0px;
            margin: 0px;
            background-color: #699C03;
        }

        .header-nav {
            min- 1170px;
            padding: 15px;
            height: 50px;
        }

        .header-nav-left {
            float: left;
            padding-left: 150px;
             40%;
        }

            .header-nav-left h3 {
                font-size: 18px;
                line-height: 25px;
                margin: 0px;
            }

        .header-nav-right {
            float: left;
             59.9999%;
            position: relative;
        }

            .header-nav-right ul {
                padding: 0px;
                margin: 0px;
                list-style: none;
                position: absolute;
                right: 25px;
            }

                .header-nav-right ul li {
                    float: left;
                    margin-left: 5px;
                    color: #fff;
                }

                    .header-nav-right ul li a {
                        color: #fff;
                        text-decoration: none;
                    }

        .content {
            min- 1170px;
            padding: 0px;
            margin: 0px auto;
        }

        .content-side {
             25%;
            float: left;
            margin: 20px 0px;
            padding: 20px;
        }

            .content-side ul {
                padding: 0px 0px 0px 50px;
                margin: 0px;
                list-style: none;
            }

                .content-side ul li {
                    margin-bottom: 10px;
                }

                    .content-side ul li a {
                        display: inline-block;
                        padding: 5px 10px;
                        border: 1px solid #ddd;
                        border-radius: 4px;
                        box-shadow: 0px 0px 5px 2px #eee;
                        text-decoration: none;
                    }

        .content-right {
             59.999%;
            margin: 20px 0px;
            padding: 20px;
            float: left;
        }

        .content-right-about {
            height: 250px;
             100%;
        }

        .content-right-form {
            margin: 0px auto;
            padding: 0px;
             100%;
            overflow: hidden;
        }

        .write {
            margin-top: 10px;
            height: 250px;
             99.99%;
            border: 1px solid #BBBBBB;
            border-radius: 4px;
            box-shadow: 0px 0px 5px 2px #DDDDDD;
        }

        .btn {
            margin-bottom: 5px;
            border: 1px solid #ccc;
        }

        .footer {
            border-top: 1px solid #bbb;
            min- 1200px;
            margin-top: 20px;
        }

        .submits button {
            background-color: #4CB0F9;
            border-radius: 4px;
            color: #fff;
        }

            .submits button:hover {
                background-color: #4F9FCF;
            }
            .on{
                display:none;
            }
            .uptext{
                100%;
                 display:none;
                 z-index:100;
            }
            .uptext-list{
                900px;
                height:auto;
                margin:0px auto;
                position:fixed;
                left:0px;
                right:0px;
                top:50px;
                bottom:0px;
                z-index:101;
                background-color:#fff;
               
            }
            #pages{
                padding:0px;
                margin:0px auto;
                list-style:none;
            }
            #pages li{
                float:left;
            }
            .tablebody{
                overflow:hidden;
            }
    </style>
</head>
<body style="position:relative">
    <div class="header">
        <div class="header-nav">
            <div class="header-nav-left">
                <h3>网站后台管理</h3>
            </div>
            <div class="header-nav-right">
                <ul>
                    <li><span>欢迎到来到网站后台</span></li>
                    <li><a href="" onclick="window.location.reload()">主菜单</a></li>
                    <li><a href="">网站首页</a></li>
                    <li><a href="">后台主页</a></li>
                    <li><a href="">内容发布</a></li>
                    <li><a href="">内容管理</a></li>
                    <li><a href="">退出</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content-side">
            <ul>
                
                <li><a href="">删除内容</a></li>
                <li><a href="">更改内容</a></li>
                <li><a href="">查询内容</a></li>
                <li><a href="">搜索内容</a></li>
            </ul>
        </div>
        <div class="content-right">
            <div class="content-right-form">
                <form id="myform" action="" method="post">
                    <dl>
                        <dt class="lead">标题</dt>
                        <dd><input id="frist" type="text" name="title" class="form-control" /></dd>
                    </dl>
                    <dl>
                        <dt>内容</dt>
                        <dd><textarea style="100%;height:250px"></textarea></dd>
                    </dl>
                    <div class=" submits row" style="margin-top: 20px;">
                        <div class="col-lg-6 col-md-6">
                            <button id="addtext" type="submit" class="pull-left form-control ">增加</button>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <button type="reset" class="pull-right form-control ">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="content-right on">
            <table cellpadding="0" class="table table-bordered">
                <tr class="toptr">
                    <th>标题</th>
                    <th>内容</th>
                    <th>删除</th>
                </tr>
                <tbody class="tablebody"></tbody>
            </table>
            <ul id="pages">
               
            </ul>
        </div>
        <div class="content-right on">
            <table cellpadding="0" class="table table-bordered">
                <tr class="toptr">
                    <th>标题</th>
                    <th>内容</th>
                    <th>修改</th>
                </tr>
                <tbody class="tablebody"></tbody>
            </table>
            <ul id="pages">
              
            </ul>
        </div>
        <div class="content-right on">
            <table cellpadding="0" class="table table-bordered">
                <tr class="toptr">
                    <th>标题</th>
                    <th>内容</th>
                </tr>
                <tbody class="tablebody"></tbody>
            </table>
            <ul id="pages"></ul>
        </div>
        <div class="uptext">
            <div class="uptext-list">
                <form id="myform" action="" method="post">
                    <dl>
                        <dt class="lead">标题</dt>
                        <dd><input type="text" name="title" class="form-control" /></dd>
                    </dl>
                    <dl>
                        <dt>内容</dt>
                        <dd><textarea style="100%;height:250px"></textarea></dd>
                    </dl>
                    <div class=" submits row" style="margin-top: 20px;">
                        <div class="col-lg-6 col-md-6">
                            <button id="uptext-button" type="submit" class=" pull-left form-control ">增加</button>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <button type="button" id="black" class="pull-right form-control ">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="content-right on">
            <div style="padding:20px;" ><label for="search" id="searchs" style="margin-right:5px;border:1px solid #ccc;border-radius:4px;padding:4px;cursor:pointer;color:#fff;background-color:#4CB0F9">搜索</label><input id="key" style="border:1px solid #bbb;border-radius:4px;line-height:14px;font-size:14px;padding:6px 12px"  type="text" placeholder="请输入关键字" /></div>
            <table cellpadding="0" class="table table-bordered">
                <tr class="toptr">
                    <th>标题</th>
                    <th>内容</th>
                </tr>
                <tbody class="tablebody"></tbody>
            </table>
            <ul id="pages">

            </ul>
        </div>
        </div>
    <script>
       $(function(){ //提交增加数据
        $("#addtext").on('click', function () {
            var $titleval = $("input[id=frist]").val(), $bodyval = $("textarea").val()
            if ($titleval == "" || $bodyval == "") {
                alert("标题与内容不能为空");
            } else {
                var datas = {
                    title: $titleval,
                    body: $bodyval
                };
                $.ajax({
                    type: 'post',
                    timeout: 6000,
                    data: datas,
                    url: '/indexs/addtext',
                    async: 'false',
                    success: function (result) {
                        $("input[type=text]").val('');
                        $bodyval = $("textarea").val('');
                        if (result == 'true') {
                            alert('增加成功');
                        } else if (result == 'repeat') {
                            alert('标题或内容已存在');
                        } else {
                            alert('出错');
                        }
                    },
                    error: function () {
                        alert('false');
                    }
                })
            } return false;
        })
        //end
        var table = function () {
            var tablebody = '';
            $.ajax({
                url: '/Indexs/Listtext',
                dataType: 'json',
                type: 'post',
                success: function (result) {
                    $(".tablebody").empty();
                    $.each(result, function (i, data) {
                        if (i <= result.length) {
                            tablebody += "<tr><td>" + data.Name + "</td><td>" + data.Link + "</td><td style='text-align:cneter'><span><a href='#' id='remove' textid='" + data.ID + "'>删除</a></td></tr>"
                        }
                    })
                    $(".tablebody").html(tablebody);
                }
            })
        }
        var table1 = function(){
            var tablebody = '';
            $.ajax({
                url: '/Indexs/Listtext',
                dataType: 'json',
                type: 'post',
                success: function (result) {
                    $(".tablebody").empty();
                    $.each(result, function (i, data) {
                        if (i <= result.length) {
                            tablebody += "<tr><td id='title'>" + data.Name + "</td><td id='bodyval'>" + data.Link + "</td><td  style='text-align:cneter'><span><a href='#' id='uptext' textid='" + data.ID + "'>修改</a></td></tr>"
                        }
                    })
                    $(".tablebody").html(tablebody);
                }
            })
        }
        var page = 0,//当前页初始化
          onepage = 2,//每页数
          all = 0,
          pagenum = 0;//页数初始化
        var pg = 0; //页码索引
        var table2 = function () {
            var tablebody = '';
            var   spanhtml='';
            $.ajax({
                url: '/Indexs/Listtext',
                dataType: 'json',
                type: 'post',
                success: function (result) {
                    $(".tablebody").empty();
                    $(".content .content-right").eq(3).children('ul').empty();
                    all = result.length;
                    pagenum = Math.ceil(all / 2);
                    var start = page * onepage, 
                       end = (page + 1) * onepage;
                    $.each(result, function (i, data){
                        if (i>=start&&i<end) {
                            tablebody += "<tr><td id='title'>" + data.Name + "</td><td id='bodyval'>" + data.Link + "</td></tr>"
                        }
                    })
                    for (pg = 0; pg <= 2; pg++) {
                        if (page == pg) {
                            spanhtml += "<span style='float:left;cursor:pointer;padding:0px 5px ;background-color:#21B9A4;color:#fff'>" + (page + 1) + "</span>";//当前页颜色突出
                        }else
                        spanhtml += "<span style='float:left;cursor:pointer;padding:0px 5px'>" + (pg+1) + "</span>";
                    }
                    $(".tablebody").html(tablebody);
                    $(".content .content-right").eq(3).children('ul').append("<li style='cursor:pointer'>上一页</li><li  style='cursor:pointer'>下一页</li>").children('li:eq(0)').after(spanhtml);
                }
            })
        }
        var table3 = function () {
            var tablebody = '';
            $.ajax({
                url: '/Indexs/Listtext',
                dataType: 'json',
                type: 'post',
                success: function (result) {
                    $(".tablebody").empty();
                    $.each(result, function (i, data) {
                        if (i <= result.length) {
                            tablebody += "<tr><td id='title'>" + data.Name + "</td><td id='bodyval'>" + data.Link + "</td></tr>"
                        }
                    })
                    $(".tablebody").html(tablebody);
                }
            })
        }
       
        $(".content-side ul li").click(function () {
            var index = $(this).index();
            $(".content .content-right").eq(index + 1).removeClass("on").siblings('div.content-right').addClass("on");
            if (index == 1) {
               table1();
            } else if(index==2){
                table2();
            } else if (index == 3) {
                table3();
            }else{
                table();    
            }
            return false;
        })
           //上下翻页
        $("ul#pages li").live('click', function () {
            var index = $(this).index();
            if (index == 0 && page > 0) {
                page--;
                
            } else if (index == (pg+1) && page < pagenum-1) {
                page++;
            }
            else return false;
            table2();
        })
           //跳转页
        $("ul#pages span").live('click', function () {
               page = $(this).index()-1;
               table2();
           })
        //删除数据
        $("#remove").live('click', function () {
            var TextID = $(this).attr('textid');
            $.ajax({
                type: 'post',
                data: {
                    TextID: TextID
                },
                url: '/Indexs/Removetext',
                success: function () {
                    table();
                }
            })
            return false;
        })//end
        //修改数据
        $("#uptext").live('click', function () {
            var TextID = $(this).attr('textid'),
                title = $(this).parents('td').siblings('#title').html();
            body = $(this).parents('td').siblings('#bodyval').html();
            
                $(".uptext input[type=text]").val(title);
                $(".uptext textarea").val(body);
                $(".uptext").show();
                $("#black").click(function () {
                    $('.uptext').hide();
                })
                $('#uptext-button').on('click', function () {
                    var title = $(".uptext input[type=text]").val(),
                        bodyval = $(".uptext textarea").val();
                    var uptext = {
                        title: title,
                        bodyval:bodyval,
                        TextID:TextID,
                    }
                    $.ajax({
                        type: 'post',
                        url: '/Indexs/Uptext',
                        data: uptext,
                        success: function () {
                            $('.uptext').hide();
                            table1();
                        },
                        error: function () {
                            alert('错误');
                        }
                      
                    })
                    return false;
                })
        })//end
           //搜索
        $("#searchs").live('click', function () {
            var $keys = $("input[id=key]").val(),
            resulthtml = '',
            i = 0;
            var keys = {
                keys: $keys
            };
            $.ajax({
                url: '/Indexs/Listtext',
                data: keys,
                dataType: 'json',
                type: 'post',
                success: function (result) {
                    if (result.length <= 0) {
                        alert('没有找到相关内容');
                    }
                    else {
                        $(".tablebody").empty();
                        $.each(result, function (i,data) {
                                resulthtml += "<tr><td id='title'>" + data.Name + "</td><td id='bodyval'>" + data.Link + "</td></tr>"
                        })
                        $(".tablebody").html(resulthtml);
                    }
                }
            })
        })
      })    
    </script>
    <div class="footer" style="position:fixed;bottom:20px;left:0px;right:0px">
        <p class="text-center">Copyright © 2016.4.6 </p>
    </div>
</body>
</html>


自己感觉乱了点，能用到的同学可以参考一下，不足之处很多请大家轻喷

查看全文

相关阅读:
进程DLL注入
 静态链接库LIB
利用MoveFileEx实现程序的隐藏、自启动与自删除
 QueueUserApc实现DLL注入的测试
 简单说说SSDT
ural 1521. War Games 2 约瑟夫环 SBT实现
 次小生成树（附：poj1679）
hoj 1138 LC Display
hoj 3029 Dictionary 模拟队列
 hoj 2578 Super_Stack 模拟栈

原文地址：https://www.cnblogs.com/liangxiblog/p/5435950.html