Power BI 表格跨维度全局实时搜索与筛选

wujunmin

发布于 2025-07-14 10:18:01

2300

文章被收录于专栏：wujunminwujunmin

Power BI 表格标题上方添加一个搜索框，这个搜索框可以检索表格中的任何内容，并进行筛选。

例如，搜索“温州”获得：

搜索“李”获得：

实现原理是DAX结合HTML制作表格，度量值如下，把度量值中的维度、指标替换为你模型中的数据，放入HTML Content视觉对象使用。

HTML表格.全局搜索1 = 
VAR t =
    ADDCOLUMNS (
        'A 店铺资料',
        "销售业绩", FORMAT ( [M.销售业绩], "#,#" ),
        "业绩达成率", FORMAT ( [M.业绩达成率], "0%" )
    )
VAR HTML_Text =
    CONCATENATEX (
        t,
        "<tr><td>" & [城市] & "</td><td>" & [店铺名称] & "</td><td>" & [督导] & "</td><td>" & [销售业绩] & "</td><td>" & [业绩达成率] & "</td><tr>"
    )
RETURN "
<head>
<style>
#htmlContent {
    font-size: 20px;
}
table {
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
th {
    background-color: #f2f2f2;
    text-align: center;
    padding: 8px;
}
td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
    text-align: center;
}
.search-container {
    margin-bottom: 10px;
}
#searchInput {
    padding: 6px;
    width: 300px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
</style>
</head>
<body>
<div class='search-container'>
    <input type='text' id='searchInput' placeholder='全局实时搜索...' onkeyup='searchTable()'>
</div>
<table id='dataTable'>
  <tr>
    <th>城市</th>
    <th>店铺名称</th>
    <th>督导</th>
    <th>销售业绩</th>
    <th>业绩达成率</th>
  </tr>" & 
  HTML_Text & "
</table>
<script>
function searchTable() {
    var input, filter, table, tr, td, i, j, txtValue, found;
    input = document.getElementById('searchInput');
    filter = input.value.toUpperCase();
    table = document.getElementById('dataTable');
    tr = table.getElementsByTagName('tr');
    
    for (i = 1; i < tr.length; i++) {
        found = false;
        td = tr[i].getElementsByTagName('td');
        // 公众号wujunmin
        for (j = 0; j < td.length; j++) {
            if (td[j]) {
                txtValue = td[j].textContent || td[j].innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    found = true;
                    break; 
                }
            }
        }
        tr[i].style.display = found ? '' : 'none';
    }
}
</script>
</body>"

以上表格比较朴素，样式可以按需修改：