已选择值的行中的 Infragistics 下拉列表

Question

我有一个包含状态列的数据源。我还有一个数组 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>

Answer 1

可能的解决方案#1

您可以使用更新功能并在 STATUS 列的 columnSettings 中指定要使用的组合编辑器。 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

使组合最初可见的另一种方法是不更新但为“状态”列创建模板并在列中的每一行上创建一个新组合。

由于不存在更新，这意味着需要手动保存数据。着色也可以实现，我已经包括了如何实现它。它将用于每个组合。

     //...
     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

已选择值的行中的 Infragistics 下拉列表

Infragistics dropdown in row with value selected

javascript

jquery

infragistics

ignite-ui

iggrid

可能的解决方案#1

可能的解决方案#2