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

本文链接：https://blog.csdn.net/greystar/article/details/290512

现在有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实现排序。

<%@ Page language="c#" Codebehind="WebForm8.aspx.cs" AutoEventWireup="false" Inherits="c3.WebForm8" %> WebForm8 <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>