使用 JQuery 和 Ajax 实现行展开折叠

• 下载源代码 - 311.02 KB

引言

如今，Web 应用程序的一个重要问题是如何快速渲染网页以及如何对其进行动画处理或可视化。

因此，为了从服务器获得快速响应，Ajax 是解决方案，对于一些带有服务器端响应的可视化，我们通常使用 jquery 或 JavaScript。

在本文中，为了展开、折叠和向 GridView 行添加详细信息，我们将使用 AJAX 向服务器发出调用，并使用 jquery 进行可视化。

目标

1. 通过在当前行旁边和第二行之前提取详细信息来获取产品详细信息。
2. 可视化行的展开。
3. 没有服务器端回发。
4. 使用 GridView 控件绑定数据，并使用脚本片段将数据简单绑定到表格。

使用 Jquery 代码

展开行

为了展开任何行，我们需要创建一个包含服务器端详细信息的新行，然后将其添加到当前行的下一行。

var trindex=0;	//trindex hold row index created by jquery
$("tr").click(function() {
if ($(this).find("td:first").length > 0) { //check whether it is header or content row
//row index increment to assign new row id everytime
trindex++;
//create a row with td colspan 3 to show product description
var row= '><td class="currRow" colspan="3" ><
div id="did"><img id="imagepath" src=""
style="height: 81px; width: 104px" />  Description :<
span id="des">sd</span><p>Cost :<
span id="cost">sd</span></p></div></td></tr>';

//adding animation to row
var newRow = $("<tr id=tr"+ trindex + row).animate({
height: "140px",
opacity: 0.25,
}, 500);
//adding row to existing table
$(this).after(newRow);

折叠行

在展开任何行的同时，我们需要折叠先前创建的行，因此我们需要记住先前创建的 rowIndex 或其 ID。

$("#"+rowName).find('td').removeClass('currRow').addClass('hideRow');
$("#"+rowName).animate({
    height: "0px",
    opacity: 0.25,
    }, 1000, function() {
$("#"+rowName).remove();

向服务器的 Ajax 调用

为了获取我们简要突出显示的产品的所有详细信息，我们需要使用 AJAX 向服务器发出异步调用。我们传递一些关键值（产品 ID）给服务器以提取 resultset。

$.ajax({
       type: "POST",
       url: "WebService.asmx/GetDetails",   //webserviceName/methodName
       data: "{'name': '" + $(this).find("td span").text()
       + "'}",  //passing values to webservice(productid)
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function(msg) {
       //extracting response data to newly created row
       $("#tr"+trindex ).find("td #did p #cost").text(msg.d.id );
       $("#tr"+trindex ).find("td #did  #des").text(msg.d.order);
       $("#tr"+trindex ).find("td #did #imagepath").attr
       ('src', msg.d.order); //$("#myImage").attr("src", "path/to/newImage.jpg");
       },
       error: FailedMessage     //showing error message if failure
       }); 

使用 WebService.cs

可编程应用程序逻辑可以通过标准 Web 协议访问。我们使用 webservice 通过 jquery Ajax 调用从数据库中提取数据，CollectData 类用于保存从数据库中提取的详细信息。

public class CollectData
{
        public string cost { get; set; }
        public string imagePath { get; set; }
        public string description { get; set; }
}

通过 WebMethod 对数据库进行简单查询

[WebMethod()]
    public CollectData GetDetails(string name)
    {
        SqlConnection con = new SqlConnection
	(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
        SqlCommand cmd = new SqlCommand("Select cost, imagePath, 
		description from Products where ProductId='" + name + "'",con);
        SqlDataReader data;
        CollectData c = new CollectData();
        try
        {
            con.Open();
            data=cmd.ExecuteReader();
            if (data.Read())
            {
                c.cost= data[0].ToString();
                c.imagePath = data[1].ToString();
                c.description = data[2].ToString();
                return c;
            }
            else
            {
                c.cost = "N/A";
                c.imagePath = "N/A";
                c.description = "N/A";
                return c;
            }
        }
        catch (Exception ex)
        {
            c.cost = "N/A";
            c.imagePath = "N/A";
            c.description = "N/A";
            return c;
        }
    }

结论

我们将 Jquery、Ajax、服务器控件 (Gridview) 混合在一起，以获得快速且可视化的输出。结果可能因浏览器而略有不同。

历史

• 2010 年 8 月 18 日：初始发布