Question

如何使用jQuery隐藏或显示基于asp.net角色的表行？

也许我是以错误的方式解决这个问题，但我已试图搜索论坛，自行试验，并经历整个试验和错误循环。 :)

这个问题与asp.net页面有关，我已成功设法根据客户端的请求将web.sitemap文件显示为html表。

鉴于我已将用户的Active Directory组保存在隐藏字段中（在此系统中，用户必须属于一个组，并且只能在一个组中）。

我现在需要做的是

遍历表格中的每一行
读取每个元素所持有的“data-group”属性，该属性可以是逗号分隔的字符串，单个值字符串或“*”。
如果在“data-group”属性中找到用户的组，则相应地更改css类。 css类 - 在此示例中将背景更改为黑色或绿色，具体取决于是否找到用户的组。

我用jQuery尝试过这个并且似乎被卡住了。我一直在使用jsFiddle来解决我的代码问题。根据jsFiddle我的jQuery代码是有效的，但我没有看到我需要的行为。

我愿意以一种非常简单的方式打赌我出错了，但我很想念它。谁能看到我哪里出错？

我按顺序粘贴了我的jQuery，CSS和示例HTML块。 HTML表只是更大表的子样本。这仅用于示例目的。

感谢您的任何见解。

jQuery块：

$(document).ready(function () {
    var strUser = $("#hfUserADGroup").val();
    var tblSitemap = $("#tblSitemap");
    var strGroup;

    tblSitemap.find("tr").each(function () {
        strGroup = $(this).data("roles");
        var arrGroup = strGroup.split(",");
        if (jQuery.isArray(strUser, arrGroup) == -1) {
            $(this).attr("class") = "HiddenObject";
        } else {
            $(this).attr("class") = "ShowObject";
        }
    });
});

CSS Block：

.trow1 {
    font-weight: bold;
}

.level1 {
    margin-left: 0em;
}

.level2 {
 margin-left: 1em;
}

.trow2 {
    font-weight: bold;
}

.level3 {
    margin-left: 2em;
}

.trow3 {
    background-color: lightcoral;
}

.level4 {
margin-left: 3em;
}

.trow4 {
    font-weight: bold;
    background-color: #FAFAD2;
    font-weight: normal;
}

.level5 {
margin-left: 4em;
}

.HiddenObject {
background-color: black;
}

.ShowObject {
    background-color: green;
}

HTML Block：

<input type="hidden" name="ctl00$ContentPlaceHolder1$hfUserADGroup" id="hfUserADGroup" value="ROSE\DM_RMG_Data_Manager" />
<table id="tblSitemap">
    <thead>
        <tr>
            <th style="border:thin solid gold;">Title</th>
            <th style="border:thin solid gold;">Description</th>
        </tr>
    </thead>
    <tbody>
        <tr class="trow1" data-roles="*">
            <td style="border:thin solid gold;"> <span class="level1">Homepage</span>

            </td>
            <td style="border:thin solid gold;">Descriptive sitemap for all pages available through the ROSE network.</td>
        </tr>
        <tr class="trow2" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_RMG_Business,ROSE\DM_RMG_Business_Manager,ROSE\DM_RMG_Clerk">
        <td style="border:thin solid gold;"> <span class="level2">Business</span>

        </td>
        <td style="border:thin solid gold;">Pages intended for use by the Business Department.</td>
    </tr>
    <tr class="trow3" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_RMG_Business,ROSE\DM_RMG_Business_Manager,ROSE\DM_RMG_Clerk">
        <td style="border:thin solid gold;"> <span class="level3">Incident Report</span>

        </td>
        <td style="border:thin solid gold;"></td>
    </tr>
    <tr class="trow4" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_RMG_Business,ROSE\DM_RMG_Business_Manager,ROSE\DM_RMG_Clerk">
        <td style="border:thin solid gold;"> <span class="level4">Add/Edit Records</span>

        </td>
        <td style="border:thin solid gold;">Use this page to add or view new records.    </td>
    </tr>
    <tr class="trow4" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_RMG_Business,ROSE\DM_RMG_Business_Manager,ROSE\DM_RMG_Clerk">
        <td style="border:thin solid gold;"> <span class="level4">View Records Before 8/14/2014</span>

        </td>
        <td style="border:thin solid gold;">This is a read-only table for historical searches.</td>
    </tr>
    <tr class="trow3" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_RMG_Business,ROSE\DM_RMG_Business_Manager">
        <td style="border:thin solid gold;"> <span class="level3">Inventory</span>

        </td>
        <td style="border:thin solid gold;">Under development; not released yet.</td>
    </tr>
    <tr class="trow3" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_RMG_Business,ROSE\DM_RMG_Business_Manager">
        <td style="border:thin solid gold;"> <span class="level3">Marketing</span>

        </td>
        <td style="border:thin solid gold;">This view allows you to choose the campus of interest.</td>
    </tr>
    <tr class="trow2" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_CRA_Principal,ROSE\DM_CRA_Teacher,ROSE\DM_CRA_Clerk,ROSE\DM_RMG_SPED_Director,ROSE\DM_RMG_SPED_Specialist,ROSE\DM_RMG_SS_Clerk,ROSE\DM_RMG_SS_Manager">
        <td style="border:thin solid gold;"> <span class="level2">CRA</span>

        </td>
        <td style="border:thin solid gold;"></td>
    </tr>
    <tr class="trow3" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_CRA_Principal,ROSE\DM_CRA_Clerk">
        <td style="border:thin solid gold;"> <span class="level3">Marketing</span>

        </td>
        <td style="border:thin solid gold;"></td>
    </tr>
    <tr class="trow3" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_CRA_Principal,ROSE\DM_CRA_Clerk">
        <td style="border:thin solid gold;"> <span class="level3">Credit Slip Log</span>

        </td>
        <td style="border:thin solid gold;"></td>
    </tr>
    <tr class="trow3" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_CRA_Principal,ROSE\DM_CRA_Clerk,ROSE\DM_RMG_SPED_Director,ROSE\DM_RMG_SPED_Specialist">
        <td style="border:thin solid gold;"> <span class="level3">Surveys</span>

        </td>
        <td style="border:thin solid gold;"></td>
    </tr>
    <tr class="trow4" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_CRA_Principal,ROSE\DM_CRA_Clerk,ROSE\DM_RMG_SPED_Director,ROSE\DM_RMG_SPED_Specialist">
        <td style="border:thin solid gold;"> <span class="level4">SPED Parent Satisfaction</span>

        </td>
        <td style="border:thin solid gold;"></td>
    </tr>
    <tr class="trow4" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_CRA_Principal,ROSE\DM_CRA_Clerk">
        <td style="border:thin solid gold;"> <span class="level4">Student Enrollment</span>

        </td>
        <td style="border:thin solid gold;"></td>
    </tr>
    <tr class="trow3" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_CRA_Principal,ROSE\DM_CRA_Teacher,ROSE\DM_RMG_SPED_Director,ROSE\DM_RMG_SPED_Specialist,ROSE\DM_RMG_SS_Clerk,ROSE\DM_RMG_SS_Manager">
        <td style="border:thin solid gold;"> <span class="level3">MIA Goal Tracker</span>

        </td>
        <td style="border:thin solid gold;"></td>
        </tr>
    </tbody>
</table>

Answer 1

我做了一个更新的小提琴来完成我认为你想做的事情：

http://jsfiddle.net/hwm5jjyu/

您的示例未使用strUser变量来检查值是否在数组中。我将代码更新为1）检查角色属性是否存在，然后检查结果数组是否使用indexOf检查strUser的值。最后你想使用addClass jQuery方法或者在vanilla JS中使用.className =＆＃34; new Class＆＃34;更改表行的类名。我不确定你想要的＆＃34; *＆＃34;为了在样本中表现，所以我将它单独留下，在这个例子中，它会将行变成黑色，因为它与strUsr不匹配。

$(document).ready(function () {
    var strUser = $("#hfUserADGroup").val();
    var tblSitemap = $("#tblSitemap");
    var strGroup;

    tblSitemap.find("tr").each(function () {
        strGroup = $(this).data("roles");
        if(strGroup){
            var arrGroup = strGroup.split(",");
            if (arrGroup.indexOf(strUser) == -1) {
                $(this).addClass("HiddenObject");
            } else {
                $(this).addClass("ShowObject");
            }
        }
    });
});

如何使用jQuery隐藏或显示基于asp.net角色的表行？

1 个答案: