玩转 jQWidgets (jqxTreeGrid)
5.00/5 (1投票)
构建父子层级 TreeView
引言
最近我一直在做一个项目，我的队友让我用 JQuery 写一个高级的TreeView。 示例数据和TreeView结构大致如下：
示例数据
| 名称 | 电话 | CurrentBalance（当前余额） | UserType（用户类型） | UserCode（用户代码） | ParentCode（父代码） |
| Hakeem | 076 4876 6579 | 6,026 | 管理员 | AD-00001 | NULL |
| Lucian | 055 9658 5713 | 9,741 | Branch | BR-00001 | AD-00001 |
| Felix | 076 2291 6071 | 8,852 | Distributor（经销商） | DR-00001 | BR-00001 |
| Aquila | 056 5580 0460 | 9,095 | Agent（代理商） | AG-00001 | DR-00001 |
| Tyrone | 0916 103 0684 | 5,822 | 用户 | UR-00001 | AG-00001 |
TreeView 结构
| 名称 | 电话 | CurrentBalance（当前余额） | |
| 管理员 | Hakeem | 076 4876 6579 | 6,026 |
| Branch | Lucian | 055 9658 5713 | 9,741 |
| Distributor（经销商） | Felix | 076 2291 6071 | 8,852 |
| Agent（代理商） | Aquila | 056 5580 0460 | 9,095 |
| 用户 | Tyrone | 0916 103 0684 | 5,822 |
背景
正如您所见，TreeView结构遵循父子关系层次结构。 但是，我在这里向您展示了一个单一节点示例，但实际上一个节点可以有多个子节点，然后这些子节点可以有多个子节点，依此类推。
因此，我首先想到的是对这些数据运行一个递归函数，并将这些数据绑定到网络上数千个免费的 JQuery TreeView 中。 但坦率地说，我不喜欢递归的想法。 我不会说这增加了我的数据操作时间，问题是这次我不会使用递归。
所以我在网络上搜索了一些 JQuery TreeView 小部件，最后找到了一个很棒的 JQuery 小部件库，它有一个很棒的TreeView 小部件，完全符合我的要求。 因此，该小部件库的名称是 jQWidgets。 您可以在此链接上浏览他们的官方网站
如果您进入演示部分，您将看到他们有超过 42 个小部件可供您使用。 其中之一是jqxTreeGrid小部件。 我在那里阅读了文档，并发现了该小部件提供的一些很棒的功能。
那么，让我们构建一个演示应用程序。
构建演示应用程序
下载并添加 jQWidgets
转到 jQWidgets 的官方网站，在下载部分，从那里下载非商业版本。 脚本将下载为 zip 文件。 让我们解压缩它，并从解压后的文件夹中复制三个文件夹并添加到您的项目中。 这些文件夹是
- jqwidgets
- scripts
- styles（样式）
Using the Code
要创建示例用户数据列表，让我们创建一个复杂的用户数据类型。 意思是，在 *model* 文件夹中创建一个名为User的 POCO 类。 该类将具有以下属性
namespace jqxTreeGridDemo.Models
{
public class User
{
public string Name { get; set; }
public string Phone { get; set; }
public decimal CurrentBalance { get; set; }
public string UserType { get; set; }
public string UserCode { get; set; }
public string ParentCode { get; set; }
}
}
让我们转到表单的后台代码并声明一个 web 方法。 web 方法将简单地以 json 格式将我们预定义的示例数据返回给我们的 UI。 请记住将您的 web 方法声明为static 成员，否则您将无法通过 Ajax 调用从中获取数据。
以 json 格式构建和发送一个集合列表将需要一个小库。 所以启动 NuGet 包管理器并安装名为 JSON.net 的包。
好的，所以我们的 web 方法将如下所示
[WebMethod]
[ScriptMethod(UseHttpGet = true)]
public static string GetData()
{
List<User> users = new List<User>
{
new User {Name = "Hakeem", Phone = "076 4876 6579",
CurrentBalance = 6026, UserType = "Administrator", UserCode = "AD-00001"},
new User {Name = "Lucian", Phone = "055 9658 5713",
CurrentBalance = 9741, UserType = "Branch",
UserCode = "BR-00001", ParentCode = "AD-00001"},
new User {Name = "Felix", Phone = "076 2291 6071",
CurrentBalance = 8852, UserType = "Distributor",
UserCode = "DR-00001", ParentCode = "BR-00001"},
new User {Name = "Aquila", Phone = "056 5580 0460",
CurrentBalance = 9095, UserType = "Agent",
UserCode = "AG-00001", ParentCode = "DR-00001"},
new User {Name = "Tyrone", Phone = "0916 103 0684",
CurrentBalance = 5822, UserType = "User",
UserCode = "UR-00001", ParentCode = "AG-00001"},
new User {Name = "Jasper", Phone = "0916 103 0684",
CurrentBalance = 9935 , UserType = "Branch",
UserCode = "BR-00002", ParentCode = "AD-00001"},
new User {Name = "Erasmus", Phone = "0314 951 0576",
CurrentBalance = 5636 , UserType = "Distributor",
UserCode = "DR-00002", ParentCode = "BR-00002"},
new User {Name = "Elton", Phone = "0887 799 4296",
CurrentBalance = 6448 , UserType = "Distributor",
UserCode = "DR-00003", ParentCode = "BR-00002"},
new User {Name = "Colt", Phone = "07624 841017",
CurrentBalance = 5425, UserType = "Agent",
UserCode = "AG-00002", ParentCode = "DR-00003"},
new User {Name = "Phillip", Phone = "070 7469 2182",
CurrentBalance = 8344, UserType = "User",
UserCode = "UR-00002", ParentCode = "AG-00001"},
new User {Name = "Lucian", Phone = "055 9658 5713",
CurrentBalance = 9741, UserType = "User",
UserCode = "UR-00003", ParentCode = "AG-00001"},
new User {Name = "Aron", Phone = "0800 722148",
CurrentBalance = 5527, UserType = "User",
UserCode = "UR-00004", ParentCode = "AG-00002"},
};
string data = JsonConvert.SerializeObject(users);
return data;
}
现在，让我们回到 UI (jqxTreeGrid.aspx)。 为页面添加标题并按如下方式添加脚本引用
<head runat="server">
<title>jqxTreeGrid Demo</title>
<link href="jqwidgets/styles/jqx.base.css" rel="stylesheet" />
<script src="scripts/jquery-1.10.2.min.js"></script>
<script src="jqwidgets/jqxcore.js"></script>
<script src="jqwidgets/jqxdata.js"></script>
<script src="jqwidgets/jqxbuttons.js"></script>
<script src="jqwidgets/jqxscrollbar.js"></script>
<script src="jqwidgets/jqxdatatable.js"></script>
<script src="jqwidgets/jqxtreegrid.js"></script>
</head>
现在是主要部分。 在上面声明的那些引用之后创建一个script 部分并粘贴此代码
<script>
$(document).ready(function() {
function onSuccess(data) {
var users = data.d;
var source =
{
dataType: "json",
dataFields: [
{ name: 'UserType', type: 'string' },
{ name: 'Name', type: 'string' },
{ name: 'Phone', type: 'string' },
{ name: 'CurrentBalance', type: 'number' },
{ name: 'UserCode', type: 'string' },
{ name: 'ParentCode', type: 'string' }
],
hierarchy:
{
keyDataField: { name: 'UserCode' },
parentDataField: { name: 'ParentCode' }
},
id: 'UserCode',
localData: users
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#treeGrid").jqxTreeGrid(
{
width: 700,
height: 390,
source: dataAdapter,
ready: function () {
$("#treeGrid").jqxTreeGrid('expandRow', '2');
},
columns: [
{ text: 'User Type', dataField: 'UserType', width: 150 },
{ text: 'Name', dataField: 'Name', width: 150 },
{ text: 'Phone', dataField: 'Phone', width: 200 },
{ text: 'Current Balance', dataField: 'CurrentBalance',
width: 200, cellsalign: 'right', cellsFormat: "c2" }
]
});
}
$.ajax({
type: "GET",
url: "jqxTreeGrid.aspx/GetData",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: onSuccess,
failure: function(response) {
alert(response.d);
}
});
});
</script>
正如您在底部看到的那样，我正在初始化一个 Ajax 调用到我在后台代码中声明的 web 方法。 由于我们的后端代码仅在启动 HTTP GET 时才会返回 JSON 数据，因此我将 Ajax 请求类型设置为 "GET"。 然后我们声明了 URL 和返回的数据类型。 在成功的请求中，我们有一个回调。 回调函数将根据我们的设置重新排列数据。 我将剩下的留给您，因为它很容易理解在那里发生了什么，在获得响应数据之后。 只需要查看层次结构属性，我们就会明白这一点。
而在 HTML 中，您所需要做的就是声明一个 ID 为 treeGrid 的 <div></div> 标签，如下所示
<body>
<form id="form1" runat="server">
<div>
<div id="treeGrid"></div>
</div>
</form>
</body>
一切都完成了。 将 jqxTreeGrid.aspx 页面设置为默认起始页面并运行。 您将获得如下所示的输出。
关注点
此示例的 Git 存储库可以在这里找到感谢您阅读这篇文章。