我有一个包含状态列的数据源。我还有一个数组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>
解决方案#1
可以使用Updating特性，并在columnSettings中指定要使用的组合编辑器的STATUS列。PART_STATUS将作为STATUS单元格中组合编辑器的数据源。
例如:
$.ig.loader({
//...
resources: "igGrid.Paging.Updating,igCombo"
});
//...
$("#grid1").igGrid({
//...
features: [
{
name: "Updating",
editMode: "cell",
columnSettings: [
{
columnKey: "STATUS",
editorType: "combo",
editorOptions: {
dataSource: PART_STATUS
}
}
]
}
]
});
可能解决方案#2
另一种使组合最初可见的方法是不需要更新，而是为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});
}
});
}
});
});
有关更多信息和完整示例，您可以查看Infragistics论坛上的以下回复:
http://www.infragistics.com/community/forums/p/103087/490162.aspx 490162