Ignite UI 和 ComboBox 的介绍，支持按需加载、自动完成、远程过滤、自动建议和 ComboBox 项中的图片
了解 Infragistics Ignite UI 的强大功能，以及如何用极少的代码轻松配置控件以实现大量功能。
引言
本文将介绍 Infragistics Ignite UI [它本身基于 jQuery 构建]，它具有强大的功能，以及如何轻松地使用它来实现您的许多需求。
在本文中，您将学习如何启动和配置一个 jQuery ComboBox，它将具有按需加载、自动建议、远程过滤、自动完成和ComboBox 项中的图片等功能。
首次使用 Ignite UI 时，我发现很难找到能清楚展示客户端和服务器端交互的资源。因此，本文也将重点关注这种交互。
为什么选择 Ignite UI？
嗯，您可能已经在使用并喜欢 JQuery、Angular JS、Sencha/ExtJS 等工具/框架。那么，为什么还要选择它呢？以我非常有限的经验来看，我发现用它来实现各种控件的许多复杂功能非常容易且有趣。只需要很少的步骤/代码行。您只需要知道如何配置它。如果您想了解更多，Ignite UI 能更好地说明。在此我引用他们两段话：
"使用领先的 UI 工具集，为任何浏览器、平台或设备注入您的混合 HTML5 和 jQuery 开发活力"。
"最佳 HTML5 应用程序需要卓越的数据可视化和极快的性能，没有人比 Ignite UI（以前称为 NetAdvantage for jQuery）更能为您提供跨浏览器、平台和设备的工具。准备好启动现代 UI，它们能提供 HTML5 的多功能性，而不会牺牲资源、时间和金钱。有了 Ignite UI，您的应用程序将大胆地走向前所未有的应用领域。"。
如何开始
本文假设您知道如何使用、加载、运行和集成 HTML、JS、PHP、SQL\DB 文件。因此，第一步毫无疑问是从此处下载并安装。有试用版和商业版，您可以选择任何您想要的。安装后，请查看任何示例/演示，了解如何添加/加载 JS 和 CSS 文件以与 Ingite UI 一起使用。
现在回到本文，我们将介绍如何配置客户端和服务器端代码，以在单个 ComboBox 中实现按需加载、自动建议、远程过滤、自动完成和ComboBox 项中的图片等功能。
下面是一个非常简单的 HTML 文件，其中包含一个输入字段，我们将用它来开发我们想要的 ComboBox。您也可以为此目的使用任何 div。
Index.html 文件
<!DOCTYPE html>
<html>
<head>
<title>Infragistics Combo: Auto Complete, Remote Filter & Load on Demand</title>
<!-- Ignite UI Required Combined CSS Files -->
<link href="igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="igniteui/css/structure/infragistics.css" rel="stylesheet" />
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<!-- Ignite UI Required Combined JavaScript Files -->
<script src="igniteui/js/infragistics.core.js"></script>
<script src="igniteui/js/infragistics.lob.js"></script>
<!-- Our script-->
<script src="js/main.js"></script>
<style>
h1, h2 {
text-align: center;
}
</style>
<!-- The following style is copied from http://www.infragistics.com/products/jquery/sample/combo-box/templating -->
<style>
#comboContainer
{
height: 100px;
}
.comboTemplates
{
text-align: center;
padding: 2px;
}
#comboHeaderTemplate
{
font-size: large;
font-weight: bold;
background-color: rgb(185, 9, 11);
color: White;
}
#comboFooterTemplate
{
font-size: small;
background-color: rgb(245, 245, 164);
}
.empImage
{
float: left;
width: 64px;
padding-top: 10px;
}
.empInfo
{
float: left;
padding: 5px;
width: 215px;
}
.empName
{
font-weight: bold;
}
.comboItemContainer
{
width: 290px;
white-space: normal;
}
</style>
</head>
<body>
<div id="container" style="width:1000px; height: 100px; background: #f8fff8; margin-left:auto; margin-right:auto;">
<div id="info">
<h1>Infragistics Combo Example</h1>
<h3>The combo will load the data on <i>Demand</i> with <i>Auto Complete</i> and <i>Remote Filtering</i> and <i>Auto Suggestion</i> features.</h3>
</div>
<div>
<input id="combo">
</div>
</div>
</body>
</html>
关于上述文件内容：
文件中添加的注释提示了 Ignite UI 所需的 JS 和 CSS 文件。我们只关注<script src="js/main.js"></script>，它加载我们的 Js 文件，其中包含 ComboBox 的配置。<input id="combo"> 表明我们将 ComboBox 添加到此字段，该字段的 id="combo" [当然，您可以使用任何 id 名称]。
现在让我们看看如何使用 Ignite UI 并按照我们的目标创建 ComboBox。这是 main.js 文件的内容。
Main.js 文件
$(document).ready(function() {
$("#combo").igCombo({
autoComplete : true,
autoSuggestion: true,
filteringType : 'remote',
dataSource : "infra_service.php",
responseDataKey : "response.data", //which key in the JSON response we should look for the drop down data.
responseTotalRecCountKey : "response.totalRecordsInServer", //which key we should look for the total record in server side.
loadOnDemandSettings : {
enabled : true,
pageSize : 20
},
valueKey : "ID",
textKey : "Name",
headerTemplate : '<div id="comboHeaderTemplate" class="comboTemplates">Filtered Names</div>',
itemTemplate: '<div class="comboItemContainer"><div class="empImage"> <img src="images/${PIC_NAME}" width="64px" height="64px" alt="${Name}"/></div> <div class="empInfo"><span class"=empName">${Name}</span></div></div>',
footerTemplate : '<div id="comboFooterTemplate" class="comboTemplates" class="boxed"> {0} of {3}</div>',
nullText : 'No Result',
width: 200
});
}); 关于上述文件
是的，您已正确识别代码语法就像 jQuery 一样，而
$("#combo").igCombo(...) 告诉库将在 id="combo" 的 HTML 元素上创建一个 Ignite UI ComboBox。我相信其余的属性都是不言自明的，但我会描述其中的一些。请参阅此页面以获取完整的参考以及如何在各种 Ignite UI 控件中添加配置。点击 igCombo 并自行探索。要了解有关各种数据源的更多信息，请阅读此页面。您还可以设置 dataType，默认类型是 JSON。因此，在本文中我们讨论的是 JSON dataType。
autoComplete : true,
autoSuggestion: true,
filteringType : 'remote' "autComplete" 和 "autoSuggestioin" 设置为 true 表示启用该功能，而 "filteringType" 设置为 "remote" 表示过滤将在服务器端进行。这会对 URL 调用产生特殊影响。它会在 GET 请求中附加一个变量 "$filter"。您还可以设置不同类型的 filteringCondition，但在默认情况下以及 autoComplte 为 true 时，条件为 "startsWith"，您会在服务器端看到 "$filter" 变量的值为 "startswith(Name,'a') eq true"，其中 "Name" 是 ComboBox 项中的字段名，"a" 是您在 ComboBox 输入框中输入的字符。有关更多信息，请参阅此处的 filteringConditions。
dataSource : "infra_service.php" 这意味着我们的数据将从 "infra_service.php" URL 加载。可能有不同类型的数据，但在本文中我们只讨论 JSON 类型。此服务器页面具有特殊效果，我们将在相关部分了解它。
responseDataKey : "response.data"
这意味着在加载或交互 JSON 数据时，它会查找 JSON 数据中的 "data" 键，该键被包装在 "response" 键内。
responseTotalRecCountKey : "response.totalRecordsInServer" 对于按需加载，ComboBox 需要知道是否已完成从服务器到客户端的所有数据加载。因此，在我们的服务器端 JSON 响应中，我们将发送 "totalRecordsInserver" 键下的信息，该信息被包装在 "response" 键下。您可以选择任何您喜欢的名称。
loadOnDemandSettings : {
enabled : true,
pageSize : 20
} 是的，您说得对，"enabled" 设置为 true 表示 ComboBox 将具有按需加载功能，而 "pageSize"=20 表示 ComboBox 将每个请求加载 20 条记录（向下滚动时，如果还有更多项）。这也有另一个特殊效果。每当发送服务器端请求以进行 LoD 时，GET 请求将与 "dataSource" URL 附加两个额外的变量：$skip 和 $top。这意味着您应该从顶部行中跳过 $skip 行，然后只从服务器获取 $top 行，其中 $top 实际上是指您设置的 pageSize。当我们讨论服务器端的 infra_service.php 文件时，您会更好地理解。
valueKey : "ID",
textKey : "Name" "valuekey" 意味着 JOSN 数据将使用 "ID" 字段（当然它在 response.data 下）作为每个 ComboBox 项的 ID，而 "textKey" 意味着 ComboBox 中显示的项值来自 "Name" 字段。
headerTemplate : '<div id="comboHeaderTemplate" class="comboTemplates">Filtered Names</div>',
itemTemplate: '<div class="comboItemContainer"><div class="empImage"> <img src="images/${PIC_NAME}" width="64px" height="64px" alt="${Name}"/></div> <div class="empInfo"><span class"=empName">${Name}</span></div></div>',
footerTemplate : '<div id="comboFooterTemplate" class="comboTemplates" class="boxed"> {0} of {3}</div>', 当您运行演示时，您会看到（请参阅上面附加的图片），ComboBox 中有标题和页脚，并且每个 ComboBox 项除了数据外还有图片。我认为这些属性是不言自明的，但您也可以阅读它们的文档。$(PIC_NAM} 表示这是一个变量（实际上是 JSON 响应中的键），在加载项时应被替换，其中 PIC_NAME 是 JSON 响应中的数据字段。而 {0} 和 {3} 表示在服务器端总项数中加载了多少项。
如果您理解了上面的配置，我希望您也能理解服务器端 "infra_service.php" 文件的功能。
infra_service.php
<?php
/*
* The service which takes user's "Filtering" text and "Load On Demand" settings and returns data accordingly.
* The return is JSON string and to let know the infragistics/jQuery UI we need to name the responses. The whole response is wrapped inside the key "response",
* and filtered data and total records of the table are wrapper inside "data" and "totalRecordsInServer" keys.
*/
require_once 'dbconfig.php';
file_put_contents("test" . time() . ".txt", print_r($_GET, true));
$filter = isset($_GET['$filter']) ? $_GET['$filter'] : '';
$skip = isset($_GET['$skip']) ? $_GET['$skip'] : '';
$top = isset($_GET['$top']) ? $_GET['$top'] : '';
$limit = '';
if ($skip != '' && $top != '') {
$limit = " LIMIT " . $skip . ", " . $top;
}
$textName = "Name";
//This may change depending up on your column name. For this demo the column name in DB table and textKey in igCombo congiguration is "Name";
$start_text = "startswith(" . $textName . ",'";
$end_text = "') eq true";
$filter = str_replace($end_text, '', str_replace($start_text, '', $filter));
$select_query = 'SELECT ID, Name, PIC_NAME FROM ' . TABLENAME;
$count_query = 'SELECT COUNT(*) as totalRecordsInServer FROM ' . TABLENAME;
if ($filter != '') {
$select_query .= ' WHERE Name LIKE "%' . $filter . '%"';
} else {
//we don't want to show anyting in the combo if the filter value is empty.
$select_query .= " WHERE 1=2";
}
//So that the LIMIT doesn't return unpredicted result.
$select_query .= " ORDER BY ID ASC";
$select_query .= $limit;
$link = mysql_connect(DBSERVER, DBUSER, DBPASSWORD);
mysql_select_db(DBNAME, $link);
$select_result = mysql_query($select_query, $link);
$names = array();
if (mysql_num_rows($select_result)) {
while ($name = mysql_fetch_assoc($select_result)) {
$names[] = $name;
}
}
$count_result = mysql_query($count_query);
$count_data = mysql_fetch_row($count_result);
$count = $count_data[0];
$data = array("response" => array('data' => $names, "totalRecordsInServer" => $count));
header('Content-type: application/json');
$response = json_encode($data);
echo $response;
@mysql_close($link);
?>
关于上述文件
我相信现在您应该能关联 $filter、 $top 和 $skip 了，这意味着 filteringType 和 pageSize、responseDataKey、responseTotalRecCountKey 等属性。我不会解释任何关于 PHP/MYSQL/SQL 的内容。您可以从 $_GET 变量中提取 pageSize、要跳过的行数以及远程过滤条件以及用户的输入值。其余代码只是实现所有这些属性值，以从服务器获取数据，并以 JSON 格式设置在 igCombo 配置中指定的相应键中。您可以在服务器端选择任何语言、任何数据库或逻辑，但这只是一个示例。在我使用 Ignite UI 时，我感觉到缺乏服务器端实现的资源。如果您关联了所有三个文件，我希望您能清楚地了解 Ignite UI 或 igCombo。
结论
我已尽力使源代码和逻辑尽可能简单，以便重点完全放在 Ignite UI，即 igCombo 的配置上。Ignite UI 还有许多其他控件，我希望如果您理解了 igComob 的工作流程，那么其他控件对您来说也会更容易。
顺便说一句，在客户端设置少量属性就可以获得按需加载、自动建议、远程过滤、自动完成和ComboBox 项中的图片等大量丰富功能，这难道不是很简单吗？