Question

我在GridView中的<asp:DropDownList>内有一个<asp:TemplateField>：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="DatosTablaHandoff">
        <Columns>
            <asp:TemplateField HeaderText="STATUS">
                <ItemTemplate>
                    <asp:DropDownList ID="DropDownGV" runat="server" onchange="SetDropDownListColor(this);">
                    <asp:ListItem>Select...</asp:ListItem>
                    <asp:ListItem>Complete</asp:ListItem>
                    <asp:ListItem>Running</asp:ListItem>
                    <asp:ListItem>Waiting in SEV 1</asp:ListItem>
                    <asp:ListItem>No Batch</asp:ListItem>
                </asp:DropDownList>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

我在js中有一个脚本来设置“项目背景颜色”，具体取决于所选项目：

function SetDropDownListColor(ddl) {
        for (var i = 0; i < ddl.options.length; i++) {
            if (ddl.options[i].selected) {
                switch (i) {
                    case 0:
                        ddl.style.backgroundColor = 'White';
                        return;
                    case 1:
                        ddl.style.backgroundColor = 'lightgreen';
                        return;
                    case 2:
                        ddl.style.backgroundColor = 'Yellow';
                        return;
                    case 3:
                        ddl.style.backgroundColor = 'orangered';
                        return;
                    case 4:
                        ddl.style.backgroundColor = 'Grey';
                        return;
                }
            }
        }
    }

工作正常。但是当Postback，颜色消失了。每行中的DropDown都按照我的要求保留所选值，但背景颜色为白色。

我有另外一个脚本（在函数外部），在回发时“保存”颜色，但只有当DropDownList在GridView之外时它才有效：

window.addEventListener('load', function () { SetDropDownListColor(document.getElementById('<%= DropDownList1.ClientID %>')); }, false);

Answer 1

谢谢！它不是100％正确，因为我必须做出一些改变，但它有很大帮助！这对我有用：

window.addEventListener('load', function () {
var dropdowns = new Array(); 
var gridview = document.getElementById('<%= GridView1.ClientID %>'); 
dropdowns = gridview.getElementsByTagName('select'); 
for (var i = 0; i < dropdowns.length; i++) { 
SetDropDownListColor(dropdowns[i]); } }, false);

Answer 2

您可以为DropDownList CssClass提供一个SetDropDownListColor，然后循环浏览该元素集合，以便调用<asp:DropDownList ID="DropDownGV" runat="server" CssClass="ddl" onchange="SetDropDownListColor(this);">函数。

这样的事情：

.NET

    window.addEventListener('load', function () {
        var ddls = document.querySelectorAll(".ddl");
        for (var i = 0, length = ddls.length; i < length; i++) {
            SetDropDownListColor(ddls[i]);
        }
    }, false);

JS

Alt

Gridback中的下拉列表在回发时不保留背景颜色

2 个答案: