jquery应用实例一动态添加删除生成表格table

Page.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EntityList.aspx.cs" Inherits="Web.admin.Entity.EntityList" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="../../js/jquery-1.7.min.js" type="text/javascript"></script>
    <title></title>
    <script>
        $(document).ready(function () {
            showEntityList();//显示所有列表

            //删除 
            $("#delBtn").bind("click", function () {
                $("tbody input:checkbox").each(function () {
                    if (this.checked) {
                        //var chk_value = [];                        
                        //$('input[name="ckbAll"]:checked').each(function () {                            
                        //    chk_value.push($(this).val());
                        //    alert(chk_value.push($(this).val()));
                        //});
                        //alert(chk_value.length == 0 ? '你还没有选择任何内容!' : chk_value);                      

                        var str = document.getElementsByName("ckbAll");
                        var objarray = str.length;
                        var chestr = "";
                        for (i = 0; i < objarray; i++) {
                            if (str[i].checked == true) {
                                $.get("EntityHandler.ashx", {
                                    method: "delEntity", id: str[i].value
                                },
                                    function (resultData) {
                                        //alert(resultData.message);                                        
                                        $(this).parent().parent().remove();
                                    }, "json");
                                //chestr += str[i].value + ",";                               
                            }
                        }
                        $(this).parent().parent().remove();

                    }
                });
            });
            // 全选  
            $("#ckbAll").bind('click', function () {
                if (this.checked) {
                    $("tbody input:checkbox").each(function () {
                        this.checked = true;
                    });
                } else {
                    $("tbody input:checkbox").each(function () {
                        this.checked = false;
                    });
                }
            });
           
        });
        //取消
        function CleanEntity() {
            $("#name").val("");
            $("#address").val("");
            $("#phone").val("");
            $("#person").val("");
        }
        // 添加
        function addEntity() {
            if ($.trim($("#name").val()) == 0) {
                alert("请输入名称!");
                $("#name").focus();
                return;
            }
            if ($.trim($("#num").val()) == 0) {
                alert("请输入编码!");
                $("#num").focus();
                return;
            }
            if ($.trim($("#address").val()).length == 0) {
                alert("请输入地址!");
                $("#address").focus();
                return;
            }
            if ($.trim($("#phone").val()).length == 0) {
                alert("请输入电话!");
                $("#phone").focus();
                return;
            }
            if ($.trim($("#person").val()).length == 0) {
                alert("请输入联系人!");
                $("#person").focus();
                return;
            }
            $.post("EntityHandler.ashx", {
                method: "AddEntity", name: $.trim($("#name").val()), num: $.trim($("#num").val()), address: $.trim($("#address").val()), phone: $.trim($("#phone").val()), person: $("#person").val()
            },
                function (resultData) {
                    alert(resultData.message);
                }, "json");

        }
        //查询       
        function showEntityList() {
            $.post("EntityHandler.ashx", { method: "GetDataByName" },
                            function (data) {
                                var obj = eval(data);
                                for (var i = 0; i < obj.length; i++) {
                                    // 创建tr  
                                    var $tr = $("<tr></tr>");
                                    // 创建td  
                                    var $td1 = $("<td></td>");
                                    var $td2 = $("<td></td>");
                                    var $td3 = $("<td></td>");
                                    var $td4 = $("<td></td>");
                                    var $td5 = $("<td></td>");
                                    var $td6 = $("<td></td>");
                                    var $td7 = $("<td></td>");
                                    // 为td添加文本内容  
                                    var $ipt = $("<input/>");
                                    $ipt.attr({ type: "checkbox", name: "ckbAll", value: obj[i].EntityId });
                                    $td1.append($ipt);
                                    $td2.text(obj[i].EntityName);
                                    $td3.text(obj[i].EntityNum);
                                    $td4.text(obj[i].EntityAddress);
                                    $td5.text(obj[i].EntityPhone);
                                    $td6.text(obj[i].EntityPerson);
                                    $td7.text(obj[i].EntityState);
                                    $tr.append($td1).append($td2).append($td3).append($td4).append($td5)
                                            .append($td6).append($td7);
                                    $tr.find("td").each(function (i) {
                                        if (i == 0) {
                                        } else {
                                            $(this).bind("dblclick", function () {
                                                var $td = $(this);                                                
                                                if ($td.children("input").length > 0) {
                                                    return false;
                                                }                                                 
                                                var $input = $("<input type='text'/>");
                                                var yval = $td.text();
                                                $input.attr("value", yval);
                                                $td.html("");  
                                                $td.append($input);  
                                                $input.keyup(function (event) {
                                                    var key = event.which;
                                                    if (key == 13) {
                                                        $td.html($input.val());
                                                    } else if (key == 27) {
                                                        $td.html(yval);
                                                    }
                                                });
                                            });
                                        }
                                    });
                                    $("#showUsers").append($tr);
                                }

                            }, "json");
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div align="center">  
            <div>  
                名称:  
                <input type="text" name="name" id="name"  />  
                <br />
                编号:  
                <input type="text" name="num" id="num"  />  
                <br />
                地址:  
                <input type="text" name="address" id="address" />  
                <br />
                联系电话:  
                <input type="text" name="phone" id="phone" />  
                <br />  
                联系人:  
                <input type="text" name="person" id="person" />  
                <br />
               
                
                <br /><br />  
                <input type="button" value="添加" id="addUser" onclick="addEntity()" />
                  
                <input type="button" value="取消" id="btnQX" onclick="CleanEntity()" />  
            </div>  
  
            <div>  
            <input type="button" value="删除所选" id="delBtn"/>  

                <table border="1px" cellpadding="0" cellspacing="0">  
                    <thead>  
                        <tr>  
                            <th>  
                                <input type="checkbox" id="ckbAll" name="ckbAll"/>  
                            </th>  
                            <th>  
                                名称  
                            </th> 
                            <th>  
                                编号  
                            </th>   
                            <th>  
                                地址  
                            </th>  
                            <th>  
                                联系电话  
                            </th>  
                            <th>  
                                联系人  
                            </th>  
                            <th>  
                                状态  
                            </th>  
                        </tr>  
                    </thead>  
                    <tbody id="showUsers">  
                        
                    </tbody>  
                </table>  
            </div>  
        </div>              

    </form>
</body>
</html>


EntityHandler.ashx

using Newtonsoft.Json;
using PQWeb.Forum;
using System;
using System.Collections.Generic;
using System.Data;
using System.IO;
using System.Linq;
using System.Text;
using System.Web;

namespace Web.admin.Entity
{
    /// <summary>
    /// EntityHandler 的摘要说明
    /// </summary>
    public class EntityHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            //context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            string method = context.Request["method"];
            if (!string.IsNullOrEmpty(method))
            {
                switch (method)
                {
                    case "AddEntity": AddEntity(context); return;
                    case "GetDataByName": GetDataByName(context); return;
                    case "delEntity": delEntity(context); return;
                }
            }
        }
        /// <summary>
        /// 删除
        /// </summary>
        /// <param name="context"></param>
        private void delEntity(HttpContext context)
        {
            context.Response.ContentType = "application/json";
            string resultData = "{{\"error\":{0},\"message\":\"{1}\"}}";
            if (context.Request["id"] == "on")
            {
                return;
            }
            if (EntityForum.delEntity(int.Parse(context.Request["id"])) > 0)
            {
                context.Response.Write(string.Format(resultData, 0, "删除成功!"));
            }
            else 
            {
                context.Response.Write(string.Format(resultData, -1, "删除失败!"));
            }
        }
        /// <summary>
        /// 添加 
        /// </summary>
        /// <param name="context"></param>
        private void AddEntity(HttpContext context)
        {
            context.Response.ContentType = "application/json";
            string resultData = "{{\"error\":{0},\"message\":\"{1}\"}}";
            int cont=EntityForum.ExistEntity(context.Request["name"]);
            if (cont == 0)
            {
                string name = context.Request["name"];
                string num = context.Request["num"];
                string address = context.Request["address"];
                string phone = context.Request["phone"];
                string person = context.Request["person"];
                string state = "0";
                bool result = EntityForum.AddEntity(name,num, address, phone, person, state);
                
                if (result == true)
                {
                    context.Response.Write(string.Format(resultData, 0, "添加成功!"));
                }
                else
                {
                    context.Response.Write(string.Format(resultData, -1, "error"));
                }
                
            }
            else 
            {
                context.Response.Write(string.Format(resultData, -1, "添加失败已存在!"));                
            }
            
        }
        /// <summary>
        /// 获取列表
        /// </summary>
        /// <param name="context"></param>
        private void GetDataByName(HttpContext context)
        {
            //context.Response.ContentType = "text/html";            
            context.Response.ContentType = "application/json";
            DataTable dt =EntityForum.GetEntity().Tables[0];
            string[] resultData = new string[0];
            int i = 0;
            if (dt.Columns.Count > 0)
            {
                string data = ToJson(dt);               
                context.Response.Write(data);
            }
            else
            {
                context.Response.Write("{\"error\":-1}");
            }
        }
        /// <summary>
        /// dataTable转JSON
        /// </summary>
        /// <param name="atable_data"></param>
        /// <returns></returns>
        public string ToJson(DataTable atable_data)
        {
            string s_jsonstring = string.Empty;
            //参数检测  
            if (atable_data == null)
                return s_jsonstring;

            StringBuilder sb = new StringBuilder();
            StringWriter sw = new StringWriter(sb);
            using (JsonWriter jw = new JsonTextWriter(sw))
            {
                JsonSerializer ser = new JsonSerializer();
                jw.WriteStartArray();

                foreach (DataRow dr in atable_data.Rows)
                {
                    jw.WriteStartObject();

                    foreach (DataColumn dc in atable_data.Columns)
                    {
                        jw.WritePropertyName(dc.ColumnName);
                        ser.Serialize(jw, dr[dc].ToString());
                    }

                    jw.WriteEndObject();
                }
                jw.WriteEndArray();

                sw.Close();
                jw.Close();
            }

            return sb.ToString();
        }  
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}


 

DataTable 转 JSON , 并输出到前台. (Newtonsoft.dll)

http://blog.csdn.net/yenange/article/details/7647119

http://blog.csdn.net/sgx425021234/article/details/8694047

猜你喜欢

转载自blog.csdn.net/panyuanyuan/article/details/25628715
今日推荐