使用XSL实现在客户端的排序操作

最新推荐文章于 2025-08-11 20:26:21 发布

最新推荐文章于 2025-08-11 20:26:21 发布 · 113 阅读

文章标签：

#ui #数据库 #javascript #ViewUI

现在很多WEB程序有排序及分页功能，通常每次操作都要到服务器取数据。本文使用XSL+XML方式，仅从服务器取一次数据并缓存在客户端，客户端可自行操作。还给出从数据库取数据转XML传客户端及从服务器取数据动态生成XSL实现排序的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在有WEB程序大多都有很多排序及分页的功能。每次进行这些操作的时候，我们都要到服务器去一次数据。这里我使用XSL+XML的方式来演示一下，只从服务器取一次数据，缓存在客户端，然后客户端可以进行自己想要的操作。

//这个文件的主要功能是从数据库里取出数据。然后转换成XML，传到客户端
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.Xml;
namespace c3
{
/// <summary>
/// WebForm9 的摘要说明。
/// </summary>
public class WebForm9 : System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
SqlConnection cn=new SqlConnection();
cn.ConnectionString="server=.;uid=sa;pwd=;database=northwind";
cn.Open();
SqlCommand cmd=new SqlCommand();
cmd.Connection=cn;
cmd.CommandText="select EmployeeID,LastName,Title,BirthDate from employees";
DataSet ds=new DataSet("Emps");
SqlDataAdapter da=new SqlDataAdapter();
da.SelectCommand=cmd;
da.Fill(ds,"Emp");
cn.Close();
Response.Clear();
this.Response.ContentType="text/xml";
//this.Response.ContentEncoding="gb2312";
this.Response.Write("<?xml version='1.0' encoding='gb2312'?>");
this.Response.Write(ds.GetXml());
Response.End();

}

#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion
}
}

//此文件的主要功能是从服务器取得数据。然后动态生成XSL实现排序。

WebForm8<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR"> <meta content="C#" name="CODE_LANGUAGE"> <meta content="JavaScript" name="vs_defaultClientScript"> <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"> <script> function GetXMLData(){ if(dbXML.readyState=='complete'){ SortXML("EmployeeID","number") } } function SortXML(k,t) { var srcXml=dbXML.XMLDocument var xslXml=xslSrc.XMLDocument var order=xslXml.selectSingleNode("//xsl:sort/@select") //查看是否是同一列进行排序 if(order.value==k) { if(xslXml.selectSingleNode("//xsl:sort/@order").value=="ascending") { xslXml.selectSingleNode("//xsl:sort/@order").value="descending" xslXml.selectSingleNode("//xsl:sort/@data-type").value=t } else { xslXml.selectSingleNode("//xsl:sort/@order").value="ascending" xslXml.selectSingleNode("//xsl:sort/@data-type").value=t } } else { order.value=k xslXml.selectSingleNode("//xsl:sort/@order").value="ascending" xslXml.selectSingleNode("//xsl:sort/@data-type").value=t } div1.innerHTML=(srcXml.transformNode(xslXml)) } </script>