Question

我正在开发一个Sharepoint网络应用程序，我正在尝试将一个元素放在一个Web部件中。 Web部件中有一个jQuery Datatables网格，一个触发该网格的Excel下载的按钮，工作正常。我还需要包含一个链接，该链接触发对后面代码的调用以下载不同的报告。理想情况下，我想找到一种方法让这个链接和按钮相邻，但我不确定这是否可能。

这是截图：

<div ID="dFundingSummary" class="dashboardMainDiv">

<asp:ListView
    ID="lvFundingSummary"
    OnItemDataBound="lvFundingSummary_ItemDataBound" 
    runat="server" >
    <ItemTemplate>
        <tr style="padding-top: 5px; padding-bottom:5px;">
            <td>
                <asp:Label ID="lblResearchArea" Text='<%# DataBinder.Eval(Container.DataItem, "PlName")%>'  runat="server" />
            </td>
            <td style="text-align:right;">
                <asp:Label ID="lblFundingGross" Text='<%# DataBinder.Eval(Container.DataItem, "FundingGross", "{0:c}")%>'  runat="server" />
            </td>
            <td style="text-align:right;">
                <asp:Label ID="lblEpriGross" Text='<%# DataBinder.Eval(Container.DataItem, "AllEpriGross", "{0:c}")%>'  runat="server" />
            </td>
        </tr>
    </ItemTemplate>

    <LayoutTemplate>
        <table ID="itemPlaceholderContainer" style="width: 100%">

            <thead>
                <tr style="padding-bottom: 10px;">
                    <th style="width: 45%; padding-left: 0px; text-align:left; border: none">Research Area</th>
                    <th style="width: 15%; text-align:right; border: none">Gross</th>
                    <th style="text-align:right; border: none">All EPRI Gross</th>
                </tr>
            </thead>

            <tfoot>
                <tr style="padding-bottom: 10px;">
                    <td style="padding-left:0px; border: none"><b>Total(s)</b></td>
                    <td style="text-align:right; padding-right:10px; border: none"><b><asp:Label ID="lblTotalFunding" runat="server" /></b></td>
                    <td style="text-align:right; padding-right:10px; border: none"><b><asp:Label ID="lblTotalEpriGross" runat="server" /></b></td>
                </tr>          
            </tfoot>

            <tbody runat="server">
                <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
            </tbody>

        </table>                            
    </LayoutTemplate>          
</asp:ListView>

 <span id="ExportFullReport" runat="server">
     <a OnServerClick="ExportToExcel"  id="aFullExport" runat="server">Export Full Report</a>
     <img alt="" src="/_layouts/15/images/ICXLSX.PNG" />
</span>

</div>

   <script type="text/javascript">
       $(document).ready(function () {

           var table = $('#itemPlaceholderContainer').dataTable(
               {
                   "scrollY": "300px",
                   "scrollX": true,
                   "scrollCollapse": true,
                   "paging": false,
                   "autowidth": true,

                   dom: '<"toolbar"><"filterPad"f>rti<"floatRight"B><"clear">',
                   buttons: {
                       buttons: [
                           { extend: 'excel', text: 'Save as Excel', exportOption: { page: 'current' }, footer: true }
                       ]
                   }

               });

           $("div.toolbar").html('<h2>Funding Summary</h2>');

       });
 </script>

提前致谢！

Answer 1

您可以使用jQuery实现此目的。在启动数据表库之后，使用.prependTo命令在excel按钮之前移动链接。

$("#ExportFullReport").prependTo("#IdOfContainerContainingSaveAsExcelButton");

$("div.toolbar").html('<h2>Funding Summary</h2>');

Answer 2

将带有id“ExportFullReport”的范围换入宽度为100％的div中，并将样式设置为float：右边的跨度

JQuery Datatables和ascx标记

2 个答案: