65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 jQuery UI 进行自定义排序

Farooq Kaiser
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.33/5 (6投票s)

2009年9月19日

CPOL

2分钟阅读

viewsIcon

35935

downloadIcon

364

在本文中，我将探讨如何使用 Jquery UI 构建自定义排序。 jQuery UI Sortable 插件通过用鼠标拖动使选定的元素可排序。

引言

在本文中，我将探讨如何使用 Jquery UI 构建自定义排序。 jQuery UI Sortable 插件通过用鼠标拖动使选定的元素可排序。 更多详情请参见 此处。 在我的演示应用程序中，我将创建一个 XML 文件来存储将保存排序顺序的自定义设置。

Using the Code

这是我们的 XML 文件

<?xml version="1.0" encoding="utf-8"?>
<customers>
<customer>
<id>1001</id>
<name>Microsoft</name>
<address>One Microsoft Way</address>
<sortorder>4</sortorder>
</customer>
<customer>
<id>1002</id>
<name>Google</name>
<address>Mountain View, CA</address>
<sortorder>5</sortorder>
</customer>
<customer>
<id>1003</id>
<name>Amazon</name>
<address>Seattle, WA</address>
<sortorder>2</sortorder>
</customer>
<customer>
<id>1004</id>
<name>IBM</name>
<address>Armonk, New York</address>
<sortorder>3</sortorder>
</customer>
<customer>
<id>1005</id>
<name>Yahoo</name>
<address>Sunnyvale, California</address>
<sortorder>1</sortorder>
</customer>
</customers>

我将创建一个简单的 Web 表单应用程序来演示自定义排序。 如果您想使用 ASP.NET MVC，请参阅 JQuery AJAX with ASP.NET MVC。

要创建 Web 应用程序，请按照以下步骤操作

  1. 启动 Visual Studio 2005 或 2008。
  2. 点击文件 -> 新建 -> 项目，然后选择 ASP.NET Web 应用程序。
  3. 它将为我们创建一个基本的 Web 应用程序模板。

这是我们的 default.aspx 页面

<%@ Page Language="C#" AutoEventWireup="true" 
	CodeBehind="Default.aspx.cs" Inherits="CustomSort._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Sortable Demo</title> 
<script type="text/javascript" 
src="http://www.google.com/jsapi"></script>
<script language="javascript" type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>
<script type="text/javascript" 
src="http://www.json.org/json2.js"></script>
<SCRIPT type=text/javascript>
$(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
function update() {
var list = new Array();
$("ul").each(function(index, id) {
var result = $('#' + id.id).sortable('toArray');
var j = 0;
for (var i = 0; i < result.length; i++) {
list[j++] = $('#' + result[i])[0].value;
}
});
var jsonText = JSON.stringify({ list: list });
$.ajax({
type: "POST",
url: "Default.aspx/SaveData",
data: jsonText,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(res) {
$("#divResult").text(res.d);
}
});
}
</SCRIPT>

<style type="text/css"> 
ul.horizontal_list li{
text-align:left;
list-style: none;
padding: 3px 10px 3px 10px;
margin: 5px;
border: 1px solid #CCC;
width: 250px; 
cursor : move;
}
</style>
</head>
<body> 
<div id="divResult" style="color:red;"></div>
<asp:Panel ID="spaceHolder" runat="server" ></asp:Panel> 
<input type="button" value="Update" onclick="javascript:update();" /> 
</body>
</html>

在上面的代码中：

  1. 我们的页面从 Google 托管的 AJAX 库 API 加载 JQuery 和 JQuery UI，因为它将提高网站性能。 更多详情请参见 此处。
  2. 我们的页面还从 json.org 加载实用程序类，该类具有一个方法 JSON.stringify(value)，该方法接受一个 JavaScript 值并生成一个 JSON 文本。
  3. 我们使用 Jquery sortable UI 插件来读取用户定义的排序顺序。 更多详情请参见 此处。
  4. 我们的页面使用 HTTP POST 请求进行 jquery AJAX 调用。
  5. 它将用户定义的排序数据以 JSON 格式传递给 [WebMethod]，如下所示。

这是我们的代码隐藏 Default.aspx.cs

namespace CustomSort
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
XDocument users = XDocument.Load(Server.MapPath("~/App_Data/Data.xml"));
var query = from user in users.Elements("customers").Elements("customer")
orderby user.Element("sortorder").Value 
select user;
StringBuilder sb = new StringBuilder();
int liCounter = 0;
sb.Append("<ul id=\"sortable\" class=\"horizontal_list\" 
	style=\"list-style-type:none;margin-left:10px;\">");
foreach (XElement usr in query)
{
sb.AppendFormat("<li id=\"itemID{0}\" value=\"{1}\">", 
	liCounter++, usr.Element("id").Value);
sb.AppendFormat("{0},{1}</li>", usr.Element("name").Value, usr.Element("address").Value);
}
sb.Append("</ul>");
spaceHolder.Controls.Add(new LiteralControl(sb.ToString())); 
}
[WebMethod]
public static string SaveData(List<string> list)
{
string retResult = string.Empty;
try
{
XDocument xmldoc = XDocument.Load
		(HttpContext.Current.Server.MapPath("~/App_Data/Data.xml"));
int sortOrder = 1;
list.ForEach(delegate(string c)
{
XElement xElement = xmldoc.XPathSelectElement
			("customers/customer[id = " + c + "]/sortorder");
xElement.SetValue(sortOrder++);
});
xmldoc.Save(HttpContext.Current.Server.MapPath("~/App_Data/Data.xml"));
retResult = "Data has been saved successfully";
}
catch (Exception ex)
{
retResult = ex.Message; 
}
return retResult; 
}
}
}

在上面的代码中，我们的 SaveData 方法接收客户 ID 列表，作为用户定义的排序顺序。 然后我们使用 LINQ to XML 在 XML 文件中更新用户定义的排序顺序。

以下是我们最终应用程序的一些屏幕截图

CustomSorting

CustomSorting

CustomSorting

摘要

在本文中，我们探讨了使用 jQuery UI 的自定义排序。 如您所见，jQuery UI 是一个 非常强大 的工具，用于构建 Web 2.0 启用的应用程序。

历史

  • 2009 年 9 月 19 日：初始发布
© . All rights reserved.