我有一个包含状态列的数据源。我还有一个数组PART_STATUS，其中包含所有可能的状态。
是否可以在该列中显示包含所有PART_STATUS状态的下拉菜单并选择正确的选项？
<!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>
<script type="text/javascript" src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20122/latest/js/infragistics.loader.js"></script>
<script type="text/javascript">
var data = [
{"ProductID":1,"ECName":"EC4532","PRIORITY":"1","ECID":"21026120061","STATUS":"Out For Refurb"},
{"ProductID":2,"ECName":"EC4522","PRIORITY":"1","ECID":"21026120034","STATUS":"Out For Cleaning"},
{"ProductID":3,"ECName":"EC4524","PRIORITY":"1","ECID":"21026120022","STATUS":"Out For Repair"},
{"ProductID":4,"ECName":"EC4232","PRIORITY":"1","ECID":"21026120061","STATUS":"Removed"},
{"ProductID":5,"ECName":"EC4222","PRIORITY":"2","ECID":"21026120034","STATUS":"Need Refurb"},
{"ProductID":6,"ECName":"EC2224","PRIORITY":"2","ECID":"21026120342","STATUS":"Need Refurb"},
{"ProductID":7,"ECName":"EC5532","PRIORITY":"2","ECID":"21026177061","STATUS":"Need Refurb"}
];
$.ig.loader({
scriptPath: "http://cdn-na.infragistics.com/jquery/20122/latest/js/",
cssPath: "http://cdn-na.infragistics.com/jquery/20122/latest/css/",
resources: "igGrid.Paging.Updating"
});
var PART_STATUS = [
"Out For Cleaning",
"Out For Repair",
"Out For Refurb",
"Need Cleaning",
"Need Repair",
"Need Refurb",
"Removed",
"Cleaned",
"Repaired",
"Refurbished"
];
$.ig.loader(function () {
$("#grid1").igGrid({
height: 500,
width: 1700,
columns: [
{ headerText: "Product ID", key: "ProductID", dataType: "number" },
{ headerText: "EC Name", key: "ECName", dataType: "string" },
{ headerText: "PRIORITY", key: "PRIORITY", dataType: "string" },
{ headerText: "ECID", key: "ECID", dataType: "number" },
{ key: "STATUS", headerText: "Status", dataType: "string", width: "200px" }
],
primaryKey: "ProductID",
autoGenerateColumns: false,
autoCommit: true,
dataSource: data
});
});
</script>
</head>
<body>
<table id="grid1"></table>
</body>
</html>
答案 0 :(得分：4)
您可以使用更新功能并在要使用的STATUS列的columnSettings中指定组合编辑器。 PART_STATUS将充当STATUS单元格中组合编辑器的数据源。
例如，您可以添加：
//...
var PART_STATUS = [
{"Name": "Out For Cleaning", "TextColor": "black", "BackgroundColor": "white"},
{"Name": "Out For Repair", "TextColor": "white", "BackgroundColor": "red"},
{"Name": "Out For Refurb", "TextColor": "black", "BackgroundColor": "white"},
{"Name": "Need Cleaning", "TextColor": "black", "BackgroundColor": "white"},
{"Name": "Need Repair", "TextColor": "black", "BackgroundColor": "white"},
{"Name": "Need Refurb", "TextColor": "white", "BackgroundColor": "blue"},
{"Name": "Removed", "TextColor": "black", "BackgroundColor": "white"},
{"Name": "Cleaned", "TextColor": "white", "BackgroundColor": "green"},
{"Name": "Repaired", "TextColor": "black", "BackgroundColor": "yellow"},
{"Name": "Refurbished", "TextColor": "black", "BackgroundColor": "white"}
];
$.ig.loader(function () {
$("#grid1").igGrid({
//...
columns: [
//...
{ headerText: "Status", key: "STATUS", dataType: "string", width: "200px", template: "<input class='combo' value='${STATUS}'/>"}
],
rowsRendered: function () {
$(".combo").igCombo({
dataSource: PART_STATUS,
width: "100%",
enableClearButton : false,
//Template for the dropdown items when clicking on the arrow so they have colors as well:
itemTemplate: "<div style='color: ${TextColor}; background-color:${BackgroundColor};' title='${Name}'>${Name}</div>",
//Assign text color and background color for the initially selected value:
create: function(evt, ui) {
var inTextColor = $(evt.target).data("igCombo").options.dataSource[$(evt.target).data("igCombo").selectedIndex()].TextColor;
var inBgColor = $(evt.target).data("igCombo").options.dataSource[$(evt.target).data("igCombo").selectedIndex()].BackgroundColor;
$(evt.target).css({ 'color': inTextColor, 'background-color': inBgColor});
},
selectionChanged: function (evt, ui) {
//Update data source, so the new selected value would be saved
var rowId = parseInt(ui.owner.element.closest("tr").attr("data-id"));
$("#grid1").data("igGrid").dataSource.setCellValue(rowId, "STATUS", ui.items[0].value, true);
//Update text color and background color when changing a new value
var newTextColor = ui.owner.options.dataSource[ui.owner._activeID].TextColor;
var newBgColor = ui.owner.options.dataSource[ui.owner._activeID].BackgroundColor;
ui.owner.element.css({ 'color': newTextColor, 'background-color': newBgColor});
}
});
}
});
});
另一种方法是使组合最初可见，但没有更新，而是为Status列创建模板，并在列的每一行上创建一个新的组合。
由于更新不会出现，这意味着需要手动保存数据。 着色也可以实现，我已经包括如何实现它。它将用于每个组合。
using System;
using System.IO;
using System.Net;
using System.Threading;
using System.Net.Sockets;
using System.Security.Cryptography;
using System.Security.Cryptography.X509Certificates;
using System.Net.Security;
class Program
{
static void Main(string[] args)
{
SecureTcpServer server = null;
SecureTcpClient client = null;
try
{
int port = 8889;
RemoteCertificateValidationCallback certValidationCallback = null;
certValidationCallback = new RemoteCertificateValidationCallback(IgnoreCertificateErrorsCallback);
string certPath = System.Reflection.Assembly.GetEntryAssembly().Location;
certPath = Path.GetDirectoryName(certPath);
certPath = Path.Combine(certPath, "serverCert.cer");
Console.WriteLine("Loading Server Cert From: " + certPath);
X509Certificate serverCert = X509Certificate.CreateFromCertFile(certPath);
server = new SecureTcpServer(port, serverCert,
new SecureConnectionResultsCallback(OnServerConnectionAvailable));
server.StartListening();
client = new SecureTcpClient(new SecureConnectionResultsCallback(OnClientConnectionAvailable),
certValidationCallback);
client.StartConnecting("localhost", new IPEndPoint(IPAddress.Loopback, port));
}
catch (Exception ex)
{
Console.WriteLine(ex);
}
//sleep to avoid printing this text until after the callbacks have been invoked.
Thread.Sleep(4000);
Console.WriteLine("Press any key to continue...");
Console.ReadKey();
if (server != null)
server.Dispose();
if (client != null)
client.Dispose();
}
static void OnServerConnectionAvailable(object sender, SecureConnectionResults args)
{
if (args.AsyncException != null)
{
Console.WriteLine(args.AsyncException);
return;
}
SslStream stream = args.SecureStream;
Console.WriteLine("Server Connection secured: " + stream.IsAuthenticated);
StreamWriter writer = new StreamWriter(stream);
writer.AutoFlush = true;
writer.WriteLine("Hello from server!");
StreamReader reader = new StreamReader(stream);
string line = reader.ReadLine();
Console.WriteLine("Server Recieved: '{0}'", line == null ? "<NULL>" : line);
writer.Close();
reader.Close();
stream.Close();
}
static void OnClientConnectionAvailable(object sender, SecureConnectionResults args)
{
if (args.AsyncException != null)
{
Console.WriteLine(args.AsyncException);
return;
}
SslStream stream = args.SecureStream;
Console.WriteLine("Client Connection secured: " + stream.IsAuthenticated);
StreamWriter writer = new StreamWriter(stream);
writer.AutoFlush = true;
writer.WriteLine("Hello from client!");
StreamReader reader = new StreamReader(stream);
string line = reader.ReadLine();
Console.WriteLine("Client Recieved: '{0}'", line == null ? "<NULL>" : line);
writer.Close();
reader.Close();
stream.Close();
}
static bool IgnoreCertificateErrorsCallback(object sender,
X509Certificate certificate,
X509Chain chain,
SslPolicyErrors sslPolicyErrors)
{
if (sslPolicyErrors != SslPolicyErrors.None)
{
Console.WriteLine("IgnoreCertificateErrorsCallback: {0}", sslPolicyErrors);
//you should implement different logic here...
if ((sslPolicyErrors & SslPolicyErrors.RemoteCertificateChainErrors) != 0)
{
foreach (X509ChainStatus chainStatus in chain.ChainStatus)
{
Console.WriteLine("\t" + chainStatus.Status);
}
}
}
//returning true tells the SslStream object you don't care about any errors.
return true;
}
}
有关更多信息和完整示例，您可以在Infragistics论坛上查看以下回复：
http://www.infragistics.com/community/forums/p/103087/490162.aspx#490162