文章/答案/技术大牛

发布

社区首页 >问答首页 >引导表中的分页/全局搜索在Blazor中不能正常工作。

问引导表中的分页/全局搜索在Blazor中不能正常工作。
EN

Stack Overflow用户

提问于 2021-10-23 07:00:40

回答 1查看 1.1K关注 0票数 1

我在我的应用程序中使用引导表来实现分页、全局搜索等，这是一个使用Blazor框架(.net 5)的单页应用程序。问题是，当我运行这个应用程序时，它会立即显示一个带有分页、搜索的引导表，但是它会消失，变成一个常规的引导表。

我试过的是：

我的Index.razor

@page "/"
@inherits IndexBase

   <div class="container mt-3 mb-3">
   <table class="table table-hover" id="tblCustomers"
          data-toggle="table"
          data-pagination="true"
          data-search="true"
          data-search-align="left"
          data-show-refersh="true"
          data-detail-view="true"
          data-detail-formatter="detailFormatter">
       <thead>
           <tr>
               <th data-field="Id" data-width="18" data-align="center" data-sortable="true">Cust Id</th>
               <th data-field="Name" data-width="18" data-align="center" data-sortable="true">Cust Name</th>
               <th data-field="GId" data-width="18" data-align="center" data-sortable="true">G Id</th>
               <th data-field="AccNo" data-width="18" data-align="center" data-sortable="true">Acc No</th>
               <th data-field="Active" data-width="18" data-align="center" data-sortable="true">Active</th>
               <th data-field="Key" data-width="18" data-align="center" data-sortable="true">Key</th>
               <th data-field="action" data-align="center">Action</th>
           </tr>
       </thead>
       <tbody>
           @if (Customers == null)
           {
               <tr rowspan="10">
                   <td colspan="8" style="text-align:center"> <div class="spinner">
                       <img src="/images/loader.gif" height="60" width="40"/>
                          </div>
                   </td>
               </tr>
           }
           else
               @foreach (var cust in Customers)
               {
                   <tr>
                       <td>@cust.CustomerId</td>
                       <td>@cust.CustomerName</td>
                       <td>@cust.GId</td>
                       <td>@cust.AccNo</td>
                       <td>@cust.IsActive</td>
                       <td>Not available</td>
                       <td>
                           <a href="" class="edit" style="text-decoration:none;" title="edit" @onclick="(()=>OnEdit(cust.CustomerId))" @onclick:preventDefault> <i class="fa fa-edit fa-lg fa-charade"></i></a>
                           <a href="" class="remove" style="text-decoration:none;" title="remove" @onclick="() =>OnDelete(cust)" @onclick:preventDefault> <i class="fa fa-trash fa-lg fa-charade"></i></a>
                       </td>
                   </tr>
               }
       </tbody>

   </table>

</div>

_host.cshtml

@page "/"
@namespace MyBlazorApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MyBlazorApp</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="MyBlazorApp.styles.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="~/js/bootstrap-table/bootstrap-table.min.css" />
    <link rel="stylesheet" href="~/css/custom/main.css" />
    <link rel="stylesheet" href="~/css/custom/header.css" />
    <link rel="stylesheet" href="~/css/custom/index.css" />
    <link rel="stylesheet" href="~/css/custom/customer.css" />
    
    <style type="text/css">

        /* width */
        ::-webkit-scrollbar {
            width: 10px;
        }

            ::-webkit-scrollbar:horizontal {
                width: 8px;
            }
        /* Track */
        ::-webkit-scrollbar-track {
            box-shadow: inset 0 0 5px grey;
            border-radius: 5px;
        }

        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: #555;
            border-radius: 5px;
        }

            /* Handle on hover */
            ::-webkit-scrollbar-thumb:hover {
                background: #555;
            }
    </style>

</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>
    <script src="_framework/blazor.server.js"></script>
    <script src="~/js/jquery/jquery-3.6.0.min.js"></script>
    <script src="~/js/popper/popper.min.js"></script>
    <script src="~/js/bootstrap/bootstrap.min.js"></script>
    <script src="~/js/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="~/js/jquery-resizable/dist/jquery.resizableColumns.min.js"></script>
    <script src="~/js/bootstrap-table/extensions/resizable/bootstrap-table-resizable.js"></script>

    <script>
        $(function () {
            $(".search").append('<span><i class="fa fa-search fa-search-custom" aria-hidden="true"></i></span>');
            /* add the span inside search div with append box*/
        })
        function detailFormatter(index, row) {
            //debugger;
            var html = [];
            $.each(row, function (key, value) {
                if (key == 'Id' || key == 'Name' || key == 'AccNo' || key == 'Active') {
                    html.push('<p class="row" style="width:50%;float:right"><b col="col-md-2">' + key + '</b><span class="col-md-10">: ' + value + '</span></p>');
                }
            });
            return html.join('');
        }
       
    </script>
</body>
</html>

我遗漏了什么？任何帮助都将不胜感激。

blazor

bootstrap-table

回答 1

Stack Overflow用户

发布于 2022-01-21 04:18:48

我在Blazor应用程序中的引导表也有同样的问题。我想我有办法了。

由于某些原因，Blazor在一开始就加载js脚本，而且引导表似乎正在正确加载。但是加载后，要应用引导程序的表将保持原始样式和状态。我真的不知道为什么，我想这是一种恶毒的行为。(我认为我们应该确切地了解blazor是如何工作的，以了解真正的原因)。

无论如何，几周前，我应用了一个pdf查看器工具，我遵循安装说明。就像其他工具一样，调用一些js和css文件..。但是，当我遵循Blazor安装步骤时，我注意到它们在呈现后执行一种JS运行函数，而不仅仅是导入文件。

因此，在这个解释之后，我可以让引导表完成以下工作。

像往常一样将css和js文件导入_Host.cshtml文件(或作为主文件使用的文件)。我在我的项目中安装了引导表文件，但我认为它可以与CDN一起工作。当然，JS文件就在关闭body标记之前。

    ///CSS FILES
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="bootstrap-icons/font/bootstrap-icons.css" />
    <link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css" />
    
    ///JS FILES
    <script src="jquery/jquery.min.js"></script>
    <script src="bootstrap-table/bootstrap-table.min.js"></script>

创建一个js自定义文件(一旦呈现页面，这将包含初始化引导表的代码)。并将其添加到引导-table.min.js引用之后。

    <script src="js/bootstrapTableScript.js"></script>

在该文件中编写下一段代码。(bootstrapTableScript.js文件)

    window.bootstrapTableFunction = {
        initBootstrapTable: function () {
             $('[data-toggle="table"]').bootstrapTable();
        }
    };

转到要插入表并注入IJSRuntime接口的文件，以便在运行时调用JS函数

    @inject IJSRuntime JSRuntime

在同一个剃刀文件中，插入html表代码。我使用了引导页示例表。

    <table data-toggle="table" data-search="true">
         <thead>
             <tr>
                  <th>Item ID</th>
                  <th>Item Name</th>
                  <th>Item Price</th>
             </tr>
        </thead>
        <tbody>
             <tr>
                  <td>1</td>
                  <td>Item 1</td>
                  <td>$1</td>
             </tr>
             <tr>
                  <td>2</td>
                  <td>Item 2</td>
                  <td>$2</td>
             </tr>
        </tbody>
    </table>

在相同的剃须刀文件(表所在的地方)中，但在代码部分中编写这段代码。

    protected override async void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeAsync<object>("bootstrapTableFunction.initBootstrapTable");
        }
    }

试试看！它应该可以工作，这就是你应该看到的

所以这就是它的工作原理..。当剃刀页面已经呈现时，将运行该OnAfterRender事件。那时，我们将调用一个名为bootstrapTableFunction的对象(在您的bootstrapTableScript文件中).步骤2和3)。该对象有一个名为initBootstrapTable的函数，它将初始化将简单表转换为引导表的代码。就这样！你有你的鞋带桌子。

此表示例应用了搜索函数。因此，如果您想要排序之类的其他函数，就必须在html表中添加数据排序和类似的分离，如果您希望通过javascript实现，则在bootstrapTableScript.js中添加数据排序。正如官方的引导表文档所说的那样。

希望这是有用的！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69685869

复制

相似问题

问引导表中的分页/全局搜索在Blazor中不能正常工作。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导表中的分页/全局搜索在Blazor中不能正常工作。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导表中的分页/全局搜索在Blazor中不能正常工作。
EN