jQuery+json是否可以实现增删改查

微光 未命名 612 0
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>notemanage</title>
        <link href="<?php echo url::imgpath(); ?>style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" language="javascript" src="<?php echo url::jspath(); ?>jquery-1.5.2.min.js"></script>
        <script type="text/javascript" language="javascript" src="<?php echo url::jspath(); ?>public.js"></script>
        <script type="text/javascript" language="javascript" src="<?php echo url::sourcepath(); ?>lhgdialog/lhgdialog.min.js"></script>
        <script type="text/javascript" language="javascript">
            var types = new Array()
            types[0] = "推荐"
            types[1] = "最新"
            types[2] = "公告"
            types[3] = "活动"
            var dialogtitle;
            var dlg;
            $(document).ready(function(){
                getdata();    //页面载入时调用该方法,来获取JSON数据并插入到HTML中
            });
            function getdata(){
                $("#td_totals").html("<img src=\"<?php echo url::imgpath(); ?>loading.gif\" style=\"position: relative;top: 8px;\" />数据载入中...");
                var ajaxurl1 = "<?php echo url::site('operat/notemanage'); ?>?cmd=null&r="+Math.random();    //这里是我的获取JSON数据的地址,获取到的格式如:[{"title":"我是第一个标题","type":"0","link":"xxxxxxxxx","date":"2011-04-29 14:17:14"},{"title":"我是第二个标题","type":"1","link":"xxxxxxxxxx","date":"2011-05-03 10:58:32"}]
                $.getJSON(ajaxurl1, function(data){
                    if(data.length>0){
                        var str = "<table id=\"tab_repeat2\" style=\"width: 100%; margin: 0;\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";
                        for(var i=0;i<data.length;i++){
                            str += "<tr class=\"tab_repeat_tr2\">";
                            str += "<td><input type=\"hidden\" name=\"hid_title\" id=\"hid_title_"+i+"\" value=\""+data[i]['title']+"\" />"+data[i]['title']+"</td>";
                            str += "<td style=\" width: 90px;\"><input type=\"hidden\" name=\"hid_type\" id=\"hid_type_"+i+"\" value=\""+data[i]['type']+"\" />"+types[data[i]['type']]+"</td>";
                            str += "<td style=\" width: 390px;\"><input type=\"hidden\" name=\"hid_link\" id=\"hid_link_"+i+"\" value=\""+data[i]['link']+"\" />"+data[i]['link']+"</td>";
                            str += "<td style=\" width: 160px;\">"+data[i]["date"]+"</td>";
                            str += "<td style=\" width: 200px;\">";
                            str += "<span style=\"cursor: pointer; color: #F60;\" onclick=\"creatpop("+i+", 'edit');\">编辑</span>&nbsp;&nbsp;&nbsp;";
                            str += "<span style=\"cursor: pointer; color: #F60;\" onclick=\"creatpop("+i+", 'del');\">删除</span>";
                            str += "</td>";
                            str += "</tr>";
                        }
                        str += "</table>";
                        $("#td_totals").html(str);    //JS拼凑成HTML串,并插入到页面当中
                    }else{
                        $("#td_totals").html("暂无数据!");
                    }
                });
            }
            //准备创建弹出窗口
            function creatpop(obj, cmd){
                switch(cmd){
                    case "add":
                        dialogtitle = "公告管理--->添加";
                        showpop(obj, cmd);
                        break;
                    case "edit":
                        dialogtitle = "公告管理--->编辑";
                        showpop(obj, cmd);
                        break;
                    case "del":
                        if(confirm("是否确定删除该公告?")){
                            var params = $.param({"id":obj,"cmd":cmd});
                            isajax(params);
                        }
                        break;
                    default:
                        break;
                }
            }
            //弹出窗口
            function showpop(obj, cmd){
                dlg = new $.dialog({
                    id: "notepop_"+obj,
                    title: dialogtitle,
                    width: 500,
                    height: 230,
                    resize: false,
                    cover: true,
                    btnBar: false,
                    html: creathtml(obj, cmd),        //这里是生成弹出窗口中HTML的内容
                    rang: true,
                    dgOnLoad: function(){
                        if(cmd=="edit"){    //这里,如果是编辑,就用刚JS生成的隐藏的文本域的值给弹出页面中文本框赋值
                            $("#tbox_title_"+obj,dlg.topDoc).val($("#hid_title_"+obj).val());
                            $("#sel_type_"+obj,dlg.topDoc).val($("#hid_type_"+obj).val());
                            $("#tbox_link_"+obj,dlg.topDoc).val($("#hid_link_"+obj).val());
                        }
                        $("#dosubmit",dlg.topDoc).click(function(){    //这个是弹出窗口中的确定按钮的触发事件
                            var stitle = $("#tbox_title_"+obj,dlg.topDoc).val();
                            var stype = $("#sel_type_"+obj,dlg.topDoc).val();
                            var slink = $("#tbox_link_"+obj,dlg.topDoc).val();
                            if(!val_empty(stitle) || !val_empty(slink)){
                                alert("有未填项!");
                                return false;
                            }
                            var params = $.param({"id":obj,"stitle":stitle,"stype":stype,"slink":slink,"cmd":cmd});    //这里的id就是JSON中索引ID,从0开始,cmd就是告诉后台要执行的操作,其它值就是要生成JSON的值
                            isajax(params);
                        });
                    }
                });
                dlg.ShowDialog();
            }
            function creathtml(obj, cmd){
                var str = "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" style=\"margin: 10px auto 0 auto; width: 98%;\">";
                str += "<tr style=\"height: 42px; line-height: 42px;\">";
                str += "<td style=\"width: 100px; text-align: right;\">公告标题:</td>";
                str += "<td style=\"width: 350px; text-align: left;\"><input type=\"text\" name=\"tbox_title\" id=\"tbox_title_"+obj+"\" class=\"tbox\"  style=\"width: 300px;\" /></td>";
                str += "</tr>";
                str += "<tr style=\"height: 42px; line-height: 42px;\">";
                str += "<td style=\"width: 100px; text-align: right;\">公告类型:</td>";
                str += "<td style=\"width: 350px; text-align: left;\"><select name=\"sel_type\" id=\"sel_type_"+obj+"\">";
                str += "<option value=\"0\">"+types[0]+"</option><option value=\"1\">"+types[1]+"</option><option value=\"2\">"+types[2]+"</option><option value=\"3\">"+types[3]+"</option>";
                str += "</select>&nbsp;&nbsp;&nbsp;&nbsp;";
                str += "</td>";
                str += "</tr>";
                str += "<tr style=\"height: 42px; line-height: 42px;\">";
                str += "<td style=\"width: 100px; text-align: right;\">公告链接:</td>";
                str += "<td style=\"width: 350px; text-align: left;\"><input type=\"text\" name=\"tbox_link\" id=\"tbox_link_"+obj+"\" class=\"tbox\"  style=\"width: 300px;\" /></td>";
                str += "</tr>";
                str += "</tr>";
                str += "<tr style=\"height: 42px; line-height: 42px;\">";
                str += "<td style=\"width: 100px; text-align: center;\" colspan=\"2\"><input type=\"submit\" name=\"dosubmit\" id=\"dosubmit\" value=\"确 定\" class=\"but\" /></td>";
                str += "</tr>";
                str += "</table>";
                return str;
            }
            
            function isajax(params){
                var ajaxurl1 = "<?php echo url::site('operat/notemanage'); ?>?"+params+"&r="+Math.random();    //用AJAX再次提交给后台进行操作
                $.get(ajaxurl1, function(data){
                    if(data == "1"){
                        alert("操作成功!");
                        getdata();
                    }else{
                        alert("操作失败!");
                    }
                    dlg.cancel();
                });
            }
        </script>
    </head>

    <body>
        <div class="div_repeat">
            <table class="tab_repeat" id="tab_repeat1" border="0" cellspacing="0" cellpadding="0" style="margin: 10px auto 0 auto; width: 98%;">
                <tr class="tab_repeat_tr1">
                    <td style="text-align: left; font-size: 14px;" colspan="5">
                        <span style="margin: 0 10px 0 0;">游戏内公告管理</span>
                        <span><input type="submit" name="dosubmit" id="dosubmit" value="添加公告" class="but" onclick="creatpop(null,'add');" /></span> 
                    </td>
                </tr>
                <tr class="tab_repeat_tr1" style="background: none; text-indent: 0px;">
                    <td style="border-right: solid 1px #65dfe7;">公告标题</td>
                    <td style="border-right: solid 1px #65dfe7; width: 90px;">公告类型</td>
                    <td style="border-right: solid 1px #65dfe7; width: 390px;">公告链接</td>
                    <td style="border-right: solid 1px #65dfe7; width: 160px;">发布时间</td>
                    <td style="width: 200px;">操作</td>
                </tr>
                <tr>
                    <td colspan="5" id="td_totals" style="height: 38px; line-height: 38px;"></td>
                </tr>
            </table>
        </div>
    </body>
</html>

发布评论 0条评论)

  • Refresh code

还木有评论哦,快来抢沙发吧~