学步园

一个XML文件,名称就暂定为GroupStudents.xml吧,内容如下:

<?xml version="1.0" encoding="utf-8"?>
<GroupStutents>
  <GroupStutent value="个人资料">
    <Item>
      <ID>0011-0220-302</ID>
      <Name>名称01</Name>
      <StartTime>1900-01-01</StartTime>
      <EndTime>2012-02-02</EndTime>
      <Description>身份证信息0000</Description>
      <Remark>0011-0220-302</Remark>
    </Item>
    <Item>
      <ID>0011-0220-303</ID>
      <Name>名称02</Name>
      <StartTime>1900-01-01</StartTime>
      <EndTime>2012-02-02</EndTime>
      <Description>身份证信息0000</Description>
      <Remark>0011-0220-302</Remark>
    </Item>
    <Item>
      <ID>0011-0220-304</ID>
      <Name>名称03</Name>
      <StartTime>1900-01-01</StartTime>
      <EndTime>2012-02-02</EndTime>
      <Description>身份证信息0000</Description>
      <Remark>0011-0220-302</Remark>
    </Item>
  </GroupStutent>
  <GroupStutent value="企业资料">
    <Item>
      <ID>0020-0220-303</ID>
      <Name>企业05</Name>
      <StartTime>1900-12-01</StartTime>
      <EndTime>2012-02-02</EndTime>
      <Description>身份证信息0000</Description>
      <Remark>0011-0220-302</Remark>
    </Item>
    <Item>
      <ID>0020-0220-304</ID>
      <Name>企业98</Name>
      <StartTime>1900-01-01</StartTime>
      <EndTime>2012-12-02</EndTime>
      <Description>身份证信息0001</Description>
      <Remark>0011-0220-302</Remark>
    </Item>
  </GroupStutent>
  <GroupStutent value="其它资料">
    <Item>
      <ID>0030-0220-301</ID>
      <Name>其它wew</Name>
      <StartTime>2012-01-01</StartTime>
      <EndTime>2012-02-12</EndTime>
      <Description>身份证信息00200</Description>
      <Remark>0011-0220-302</Remark>
    </Item>
    <Item>
      <ID>0030-0220-303</ID>
      <Name>其它322</Name>
      <StartTime>1990-01-12</StartTime>
      <EndTime>2012-02-02</EndTime>
      <Description>身份证信息00枯00</Description>
      <Remark>0011-0220-302</Remark>
    </Item>
  </GroupStutent>
</GroupStutents>

要求做成下面的样子,不能在网络上查资料~看看自己的动手能力

要求使用jquery,ajax读取XML并能删除(ajax)数据.并保存XML.

删除后台保存可以用到后台代码.

 

 

亲们,动手吧..看你能多久搞定

 

最后,贴上自己写的代码吧.

<form id="form1" runat="server">
    <div>
        <table id='tabList' cellpadding="0" border="1" cellspacing="0" style="border-collapse: collapse">
            <thead>
                <tr>
                    <th>
                        Name
                    </th>
                    <th>
                        FROM
                    </th>
                    <th>
                        TO
                    </th>
                    <th>
                        Remark
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    </form>

    <script type="text/javascript">
        $(function() {
            var tbody = $('#tabList tbody');
            $.ajax({
                url: 'GroupStudents.xml?r=' + Math.random(),
                dataType: 'xml',
                success: function(result) {
                    $(result).find('GroupStutent').each(function() {
                        var str = ($(this).attr('value'));
                        tbody.append('<tr><td colspan="6" class="title">' + str + '</td></tr>');
                        $(this).find('Item').each(function() {
                            var html = "<tr>";
                            html += "<td>" + $(this).find('Name').text() + "</td>";
                            html += "<td>" + $(this).find('StartTime').text() + "</td>";
                            html += "<td>" + $(this).find('EndTime').text() + "</td>";
                            html += "<td>" + $(this).find('Remark').text() + "</td>";
                            html += "<td>" + $(this).find('Description').text() + "</td>";
                            html += "<td><input type='button' class='btnDelete' rel='" + $(this).find('ID').text() + "' value='删除'></td>";
                            html += "</tr>";
                            tbody.append(html);
                        });
                    });

                    $('#tabList tbody .btnDelete').bind('click', function() {
                        if (!confirm('Are your sure delete?')) return;
                        var button = $(this);
                        $.ajax({
                            url: 'XMLReader.aspx?action=delete&id=' + $(this).attr('rel') + '&r=' + Math.random(),
                            method: 'POST',
                            success: function(res) {
                                if (res == "ok") {
                                    button.parents('tr').remove();
                                    alert('删除成功');
                                } else {
                                    alert(res);
                                }
                            }
                        });
                    });
                }
            });

        });
    </script>

后台删除:

if (Request["action"] == "delete")
                {
                    Response.Clear();
                    try
                    {
                        System.Xml.XmlDocument xmlDoc = new System.Xml.XmlDocument();

                        xmlDoc.Load(Server.MapPath("/XML/GroupStudents.xml"));
                        //GroupStutents/GroupStutent/Item[@ID='" + Request["id"] + "'] 表示属性,没有@表示节点
                        XmlNodeList nodeList = xmlDoc.DocumentElement.SelectNodes("/GroupStutents/GroupStutent/Item[ID='" + Request["id"] + "']");
                        if (nodeList.Count > 0)
                        {
                            foreach (XmlNode node in nodeList)
                            {
                                node.ParentNode.RemoveChild(node);
                            }
                            xmlDoc.Save(Server.MapPath("/XML/GroupStudents.xml"));
                            Response.Write("ok");
                        }
                        else
                        {
                            Response.Write("error");
                        }

                    }
                    catch
                    {
                        Response.Write("fail");
                    }
                    Response.End();
                }