Question

我想让我的桌子可以自定义。我正在寻找添加新列和删除现有列的功能。为了可视化我想要做的事，这是我的网站：https://www.coinmarketstreet.com/。我想添加一个允许用户更改表格布局的按钮。例如，如果用户想要删除Dominance列并显示Price BTC列，则只需单击按钮即可执行此操作。

这是我的HTML表格：

services.AddAuthentication();
services.ConfigureApplicationCookie(options =>
{
    // Cookie settings
    options.Cookie.SameSite = Microsoft.AspNetCore.Http.SameSiteMode.Lax;
    options.Cookie.Name = "CookieName";

    //options.Cookie.Domain = ".localhost";
    if (!CurrentEnvironment.IsDevelopment())
        options.Cookie.Domain = CommonConfig.CookieDomain; // ".mydomain.com"

    options.Cookie.HttpOnly = false;

    options.Cookie.Expiration = TimeSpan.FromDays(5 * 30);
    options.SlidingExpiration = true;
    options.Cookie.SecurePolicy = Microsoft.AspNetCore.Http.CookieSecurePolicy.Always;

    options.LoginPath = new PathString("/Account/Login"); 
    options.LogoutPath = new PathString("/Account/Logoff"); 
    options.AccessDeniedPath = new PathString("/Account/Login"); 


    var protectionProvider = DataProtectionProvider.Create(new DirectoryInfo(CommonConfig.PersistKeysStoreC));
    options.DataProtectionProvider = protectionProvider;

    // This adds claims data to the cookie...
    options.Events.OnSignedIn = async (context) =>
        {   
            System.Security.Claims.ClaimsIdentity identity = (System.Security.Claims.ClaimsIdentity)context.Principal.Identity;

            UserManager<AppUser> userManager = context.HttpContext.RequestServices.GetService<UserManager<AppUser>>();
            AppUser user = await userManager.GetUserAsync(context.Principal);
            identity.AddClaim(new System.Security.Claims.Claim(System.Security.Claims.ClaimTypes.NameIdentifier, user.Id.ToString()));
            //identity.AddClaim(new System.Security.Claims.Claim(System.Security.Claims.ClaimTypes.Email, user.Email.ToString()));
            //identity.AddClaim(new System.Security.Claims.Claim(System.Security.Claims.ClaimTypes.Name, user.LastName));
            //identity.AddClaim(new System.Security.Claims.Claim(System.Security.Claims.ClaimTypes.GivenName, user.FirstName));
        };
});

我无法找到一个简单的指南来做到这一点，所以如果我能指出正确的方向，我将不胜感激。此外，一个关于如何做到这一点的简单代码示例将更加受到赞赏！

Answer 1

如果您想要更全面的解决方案，我还建议jQuery DataTables see this for ideas

隐藏部分可以使用基本的html，css和jquery轻松完成。也许这足以让你知道如何做你想做的事情。对于这个例子，我只是使用一个非常简单的表。

<style>
  .hidden {
  display: none;
}
</style>

<table>
  <tr class="header_row">
    <td class="column1", id="column1">col1</td>
    <td class="column2", id="column2">col2</td>
    <td class="column3", id="column3">col3</td>
  </tr>
  <tr>
    <td class="column1">col 1 stuff</td>
    <td class="column2">col 2 stuff</td>
    <td class="column3">col 3 stuff</td>
  </tr>
</table>

<script>
  $('tr td').click(function(){
    var toggleId = this.id;
    $('.'+toggleId).toggleClass('hidden');
  });
</script>

参见工作简单示例：https://jsfiddle.net/a4rwgtdh/

Answer 2

我建议您使用DataTables jQuery插件进行调查。虽然它可能不会打赌最终的可扩展解决方案，但它可以更快地开始并弄清楚该功能是否是用户想要的。具体来说，有一个buttons DataTables扩展，允许最终用户在页面上修改表。如果您需要保留用户的偏好，您可能必须自己编写该部分。

Javascript自定义表列的能力。一个允许用户删除和添加新列的按钮

2 个答案: