primefaces-datatable 相关问题

如何使用 Java 17、Spring 6、Jakarta Server Faces 4.x 和 PrimeFaces 12 检索 FacesContext？

我正在尝试将我的 JSF + PrimeFaces (UI) + Spring 应用程序从 Java 8 迁移到 Java 17，同时还将 Spring 版本迁移到 6。为此，需要从 javax 库移出...

如何在饼图中显示数量，当我将光标悬停在饼图上时，我有此代码，但它不起作用。我是这个 c# 代码的新手 DataTable dt = new DataTable(); 合作...

在 Angular 中打开模态时出现ExpressionChangedAfterItHasBeenCheckedError

` `<ngx-datatable-column *ngIf="search_type ==='booking'" [width]="50" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false"> <ng-template ngx-datatable-cell-template let-row="row" let-value="value"> <span class="fa fa-user-plus font-medium-3 text-primary cursor-pointer pl-1" (click)="onUpdateBookingLinguist(row)"></span> </ng-template> </ngx-datatable-column>` 上面是我的html代码，下面是我的ts代码 ` onUpdateBookingLinguist(linguist: Linguist) { const modalRef = this.modalService.open(ScheduledBookingModalComponent, { size: 'lg' }); modalRef.componentInstance.linguist_other_bookings = linguist['scheduled_booking']; modalRef.result.then((result) => { if (!result) { return; } this.cdr.detectChanges(); }).catch((e) => { }); this.cdr.detectChanges(); }` 我试图从 ngx-datatable-column 打开模式，但收到此错误错误错误：NG0100：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。上一个值：“datatable-body-cell sort-active active”。当前值：'datatable-body-cell sort-active'.. 欲了解更多信息，请访问 https://angular.io/errors/NG0100 我尝试使用 ChangeDetectorRef.detectChanges() 手动触发更改检测，但仍然收到错误。当您修改 Angular 在其更改检测周期期间也尝试检查或更新的属性时，通常会出现此错误。因此您可以使用 ChangeDetectorRef 在特定情况下手动触发更改检测。通过从 ChangeDetectorRef 调用 detectorChanges()，您可以手动指示 Angular 对该组件及其子组件重新运行更改检测，从而可能解决问题这是如何在组件中使用ChangeDetectorRef 的示例构造函数（私有 cdr：ChangeDetectorRef）{} ngAfterContentChecked() { this.cdr.detectChanges(); }

Laravel 类“数据表”未找到错误？

我正在开发一个应用程序，从 Mysql 数据库检索数据并使用 Laravel 和 Datatable 显示它，我不断收到此错误： “未找到‘数据表’类” 我尝试了不同的版本...

在代码隐藏中绑定到 DataTable 时，DataGrid 会部分更新

我有一个 WPF 窗口，其中有一个 DataGrid 作为其子窗口之一。 DataGrid 中的列数仅在运行时确定。以下是我的 window.xaml 文件中 DataGrid 的代码： <

从Django检索数据通过Datatable选择Option

我有一个问题，在渲染数据表或触发后，我无法将 payrolled_list 中的 Django 数据调用到选择选项中。我只想将 Django 中的数据反映到选择选项，但我

有没有办法全局更改 PrimeVue 组件的默认设置？

我想为我们的应用程序中的 DataTable 组件自定义 paginatorTemplate。有没有办法在全局范围内而不是在组件的每个实例上执行此操作？

Alpine.js 和 jQuery DataTables，x-on：在表内触发时单击功能不全

我的 Laravel 和 Alpine.js 刀片页面中有此表。名字我的 Laravel 和 Alpine.js 刀片页面中有此表。 <table id="projects-table"> <thead> <tr> <th>name</th> <th>actions</th> </tr> </thead> <tbody> @foreach($projects as $project) <tr> <td>{{ $project->name }}</td> <td><button x-data="{}" x-on:click="$dispatch('open-modal', 'edit-project')">edit</button></td> </tr> @endforeach </tbody> </table> 有了它，我有了这个 JavaScript 代码，可以将其转换为 jQuery DataTable document.addEventListener('DOMContentLoaded', function () { new DataTable('#projects-table'); }); 现在发生的情况是，当我单击 button 内的 td 时，我的模式不会触发当表不是 DataTable 时，一切正常。基本上发生了什么（可能），当 jQuery 操作元素时，@click 事件不会触发。有任何已知的修复方法吗？感谢所有帮助。解决方案是将表包含在由 Alpine 控制的标签中，并在 Alpine 启动后初始化 DataTable： <div x-data> <table id="projects-table">  </table> </div> <script> document.addEventListener('alpine:init', () => { new DataTable('#projects-table') }); </script> 通过这种方式，Alpine 可以检测到 DOM 何时被 DataTables 更改，然后重建他的引用。否则，在您的具体情况下，您可以使用 vanilla JS 发送自定义事件并保持其他内容不变：  <td> <button onclick="window.dispatchEvent(new CustomEvent('open-modal', { detail: 'edit-project' }))"> Edit </button> </td>   <div x-data="{isOpen: false}" x-show="isOpen" @open-modal.window="isOpen = true"> I'm open! <div>

Primereact Datatable 服务器端带过滤器分页？

我正在使用 primereact，我想提高表的性能，所以我想将其设置为服务器端分页，但我遇到了一些问题，服务器端分页可以使用此代码，但是

ClosedXML 导出数据网格到 Excel 仅 10 行

我有一个包含 60 行数据的数据网格和一个将其导入 Excel 的按钮：我有一个包含 60 行数据的数据网格和一个将其导入 Excel 的按钮： <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Source}" CanUserAddRows="False" HeadersVisibility="All" Name="dgDisplay"> <DataGrid.Columns> <DataGridTextColumn Header="Day" Binding="{Binding Day}"/> <DataGridTextColumn Header="Data" Binding="{Binding Data}"/> </DataGrid.Columns> </DataGrid> <Button Command="{Binding SaveDataGridToExcelCommand}" CommandParameter="{Binding ElementName=dgDisplay}"/> 其中 Day 和 Data 只是一些随机生成的 int 数据。我的代码使用 ClosedXML 将数据从中导出到 Excel，它使用 MainWindowViewModel: ObservableObject 调用 MVVM.Toolkit。 [RelayCommand] public void SaveDataGridToExcel(DataGrid dataGrid) { DataTable dt = new DataTable(); foreach (DataGridColumn column in dataGrid.Columns) { dt.Columns.Add(column.Header.ToString()); } foreach (var item in dataGrid.Items) { DataRow dr = dt.NewRow(); bool rowHasData = false; for (int i = 0; i < dataGrid.Columns.Count; i++) { var cellContent = dataGrid.Columns[i].GetCellContent(item); if (cellContent is TextBlock textBlock) { //check if row empty, dont add this row.I add it on purpose to check //if the datagrid recognite the rest 50 rows not have data. It actually //dont save those data dr[i] = textBlock.Text; if (!string.IsNullOrEmpty(textBlock.Text)) { rowHasData = true; } } } if (rowHasData) { dt.Rows.Add(dr); } } SaveFileDialog saveFileDialog = new SaveFileDialog(); saveFileDialog.Filter = "Excel files (*.xlsx)|*.xlsx"; if (saveFileDialog.ShowDialog() == DialogResult.OK) { using (XLWorkbook wb = new XLWorkbook()) { wb.Worksheets.Add(dt, "Sheet1"); wb.SaveAs(saveFileDialog.FileName); } } } 但是保存的60行结果只显示了10行数据，其余50行都是空的。如果疑问为什么不使用Microsoft.Interop.Excel，那是因为该包不适合我的 Excel 版本。我没有在 ClosedXML 中看到任何对此有限制或许可的地方，所以我想知道为什么。如有任何帮助，我们将不胜感激。在浏览 github 几个小时后，我自己找到了答案。我没有访问单元格内容，而是直接从 DataGrid 的 ItemsSource 访问数据： public void SaveDataGridToExcel(DataGrid dataGrid) { DataTable dataTable = new DataTable(); foreach (DataGridColumn column in dataGrid.Columns) { dataTable.Columns.Add(column.Header.ToString()); } var itemsSource = dataGrid.ItemsSource as IEnumerable; if (itemsSource != null) { foreach (var item in itemsSource) { var properties = item.GetType().GetProperties(); var row = dataTable.NewRow(); foreach (var property in properties) { row[property.Name] = property.GetValue(item); } dataTable.Rows.Add(row); } } //show dialog... }

如何在React Prime DataTable中添加超链接？

我有一个数据表，我正在使用 React prime 库，我的要求是在一个特定列中添加一个链接。我有一个数据表，我正在使用 React prime 库，我的要求是在一个特定列中添加一个链接。 <DataTable paginator rows={tableRowPage} value={products} tableStyle={{ minWidth: "30rem" }} ><Column key={field} field={field} header={header} style={{ width: "25%" }} /> </DataTable> 我需要特定单元格中的超链接我在数据表中遇到了同样的问题，不幸的是，根据我的研究，他们似乎不提供对此的支持。但是，我已经设法通过这种方式解决了这个问题：数据表添加链接逻辑： <Column field="code" header="Code" body={(rowData) => { return ( <div sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", }} > <div style={{ color: "#3F00FF", textDecoration: "underline", cursor: "pointer", "&:hover": { color: "#23297A", }, }} onClick={() => window.open("www.google.com", "_blank").focus()} > {rowData.code} </div> </div> ); }} ></Column>; 我已经使用 Prime React Column 组件中的 body 渲染了数据。我应用 CSS 将其设置为链接样式，并添加了 onClick 事件以进行重定向。您可以根据您的要求修改逻辑。完整代码链接：https://codesandbox.io/s/primereact-demo-forked-kqtdvs?file=/src/App.jsx 如果您还有任何疑问，请告诉我。

ASP.NET MVC 项目模板在移动设备上无法调整为 100%

我不明白为什么 Web .Net MVC 项目上的默认模板没有在移动设备中调整为 100% 宽度。我在视图上使用数据表： @模型IEnumerable 我不明白为什么 Web .Net MVC 项目上的默认模板没有在移动设备中调整为 100% 宽度。我在视图上使用数据表： @model IEnumerable<iziConference.Models.EventAttendee> <h2>Participantes.</h2> <br /> <button><a style="text-decoration: none" href='@Url.Action("Create", new { eventId = ViewBag.EventId })'>Criar Participante</a></button> <button id="at-btn-refresh"> Actualizar</button> <input id="eventId" type="hidden" value="@ViewBag.EventId"> <table id="at-attendees-list" cellpadding="10" border="1" class="row-border stripe"> <thead> <tr> <th>ID</th> <th>Tipo</th> <th>Nome</th> <th>Email</th> <th>Estado </th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr id="[email protected]_Id"> <td style="padding: 5px"> @Html.DisplayFor(modelItem => item.Attendee.Id) </td> <td> @Html.DisplayFor(modelItem => item.AttendeeType) </td> <td> @Html.DisplayFor(modelItem => item.Attendee.Name) </td> <td> @Html.DisplayFor(modelItem => item.Attendee.Email) </td> <td> @if (item.IsActive) { <button id="[email protected]_Id" class="at-btn-active-state active" data-attendee-id="@item.Attendee_Id" data-attendee-name="@item.Attendee.Name" data-active-new-state="false" data-show-confirmation-alert="true">Desactivar</button> } else { <button id="[email protected]_Id" class="at-btn-active-state inactive" data-attendee-id="@item.Attendee_Id" data-attendee-name="@item.Attendee.Name" data-active-new-state="true" data-show-confirmation-alert="true">Activar</button> } </td> </tr> } </tbody> </table> 由脚本加载： var _atteendeesList = "at-attendees-list"; $("#" + _atteendeesList).DataTable({ "paging": false, "info": false, "language": { "search": "Pesquisar:", "info": "Participantes inscritos: _PAGES_" } }); 使用默认的_Layout.cshtml： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>izigo Conference - Gestor de Conteúdos</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <header> <div class="content-wrapper"> <section id="login"> @Html.Partial(MVC.Account.Views._LoginPartial) </section> <div style="padding: 10px;"> @if (Request.IsAuthenticated) { <nav> <ul id="menu"> <li>@Html.ActionLink("Home", MVC.Home.Index())</li> <li>@Html.ActionLink("Participantes", MVC.Attendee.Index())</li> <li>@Html.ActionLink("Check-in", MVC.Checkin.Index())</li> </ul> </nav> } </div> </div> </header> <div id="body"> @RenderSection("featured", required: false) <section class="content-wrapper main-content clear-fix"> @RenderBody() </section> </div> <footer style="padding-left: 25px;"> <div class="content-wrapper"> <div class="float-left"> <p>© @DateTime.Now.Year - <a href="https://www.izigo.pt/conference" target="_blank">izigo Conference</a> - <i>Powered by</i><a href="https://www.izigo.pt" target="_blank">izigo.pt</a></p> </div> </div> </footer> @Scripts.Render("~/bundles/jquery", "~/bundles/iziconference") @RenderSection("scripts", required: false) </body> </html> 研究了 dataTables 库的选项后，我找到了一个创建响应式解决方案的选项：我已经包含了响应表结构和columnDefs的选项，以选择哪些选项在移动设备中保持可见： $("#" + _atteendeesList).DataTable({ "responsive": true, "columnDefs": [ { responsivePriority: 1, targets: 0 }, { responsivePriority: 2, targets: -1 } ], "paging": false, "info": false, "language": { "search": "Pesquisar:", "info": "Participantes inscritos: _PAGES_" } }); 我还必须在捆绑包中包含数据表扩展的 js 和 css 响应式库（可在此处下载：https://datatables.net/download/）： bundles.Add(new ScriptBundle("~/bundles/iziconference").Include( "~/Content/Scripts/datatables.min.js", "~/Content/Scripts/dataTables.responsive.min.js")); // add-on bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/Styles/datatables.min.css", "~/Content/Styles/responsive.dataTables.min.css"));

primefaces-datatable 相关问题

最新问题