交叉过滤表数据 [英] Cross filtering Table data

问题描述

我正在基于复选框过滤TableA行，现在我也希望使用TableB可选择行对它们进行过滤，因此过滤操作将使用Checkboxes + TableB进行，而现在只是复选框.

I am filtering my TableA rows based on check-boxes, now I want to filter them using TableB select-able rows as well, so filtering will be done using Checkboxes + TableB, at the moment it's just checkboxes.

这是代码，

<div class="someRow" style="width: 100%">
    <asp:CheckBox ID="Open" runat="server" ClientIDMode="Static" Checked="true" onclick="RMToggle(this)" />
    <asp:CheckBox ID="New" runat="server" ClientIDMode="Static" onclick="RMToggle(this)" />
    <asp:CheckBox ID="Closed" runat="server" ClientIDMode="Static" onclick="RMToggle(this)" />
    <asp:CheckBox ID="Rejected" runat="server" ClientIDMode="Static" onclick="RMToggle(this)" />
</div>
<table id="tableA" class="dmctable">
    <tr data-id="Open" fid="1"></tr>
    <tr data-id="Rejected" fid="2"></tr>
    <tr data-id="New" fid="1"></tr>
    <tr data-id="Open" fid="3"></tr>
    <tr data-id="Closed" fid="2"></tr>
    <tr data-id="Open" fid="2"></tr>
    <tr data-id="New" fid="1"></tr>
    <tr data-id="Open" fid="3"></tr>
</table>
<table id="tableB" class="dmctable2">
    <tr data-fid="1" Class="selected"></tr>
    <tr data-fid="2"></tr>
    <tr data-fid="3" Class="selected"></tr>
</table>

JS

function RMToggle( elm ) { // elm = element
    var ischecked = elm.checked,
        $target = $('#table1 tr[data-id="' + elm.id + '"]');
    if( ischecked ) {
        $target.show();  // HERE how can I check if tr's FID is visible in tableB or not
    }
    else {
        $target.hide();
    }
}

问题

如何根据复选框和TableB中的行过滤TableA中的行.

Question

How can I filter rows in TableA based on checkboxes and rows in TableB.

我可以在表b中检查是否已选择行，

I can check in table b if a row is selected or not by this,

if ($("#tableB tr[data-fid='1']").children(".selected").length > 0)

但是如何将它放入if(isChecked)?

But how can I put it in if(isChecked) ?

更新

使用此代码，我能够获取TableB所选行的ID，

I am able to get ID's of TableB's selected rows, using this code,

$("#tableB tr:has(.New.selected)").map(function(){return $(this).data("fid");}).get();

现在我的逻辑是

function RMToggle( elm ) {
        var wantedFIDs = $("#tableB tr:has(.New.selected)").map(function(){return $(this).data("fid");}).get();
        var ischecked = elm.checked,
            $target = $('#table1 tr[data-id="' + elm.id + '"]');
        if( ischecked ) {
        // Here I want only rows in $target where data-fid = wantedFIDs
        $target.show();
    }
    else {
        $target.hide();
    }
}

推荐答案

我最终得到了这段代码，

I ended up with this code,

function RMToggle(elm) {

    $target = $('#tableA tr[data-id="' + elm.id + '"]').filter(function () {
        var rowsFilter = $("#tableB tr .New.selected").parent().map(function () {
            return $(this).data("fid");
        }).get();

        return rowsFilter.indexOf($(this).data("fid")) >= 0;
    });

    if (elm.checked) { $target.show(); }
    else { $target.hide(); }
}

这篇关于交叉过滤表数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！