如何將數據表Jquery文件應用於ASP Grid視圖控件？

Question

我有一個Data Table .Js文件用於表的正常工作。現在我想將該Js文件應用到我的ASP Grid中，但是它不起作用。請幫助我。 提前致謝。

js文件：

    <script src="lib/datatables/jquery.dataTables.js"></script>
     <script src="lib/datatables/DT_bootstrap.js"></script>
   <script src="js/main.min.js"></script>
<script>
    $(function () {

        metisTable();
        metisSortable();
    });
</script>

HTML代碼：

     <table id="dataTable" class="table table-bordered table-condensed table-hover table-striped">
                  <thead>
                    <tr>
                      <th>Rendering engine</th>
                      <th>Browser</th>
                      <th>Platform(s)</th>
                      <th>Engine version</th>
                      <th>CSS grade</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>Trident</td>
                      <td>Internet Explorer 4.0</td>
                      <td>Win 95+</td>
                      <td>4</td>
                      <td>X</td>
                    </tr>
                    <tr>
                      <td>Trident</td>
                      <td>Internet Explorer 5.0</td>
                      <td>Win 95+</td>
                      <td>5</td>
                      <td>C</td>
                    </tr>

                  </tbody>
                </table>

我想將此HTML代碼轉換為ASP Grid。請幫助我。

Answer 1

如果我沒看錯，您正在嘗試獲取GridView控件來呈現上述HTML？ 如果是這樣，請嘗試一下...

Example.aspx.cs：

using System;
using System.Collections.Generic;
using System.Web.UI.WebControls;

namespace WebApplication3
{
    public partial class Example : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            var data = new List<Browser>
            {
                new Browser {
                    RenderingEngine = "Trident",
                    Name = "Internet Explorer 4.0",
                    Platforms = "Win 95+",
                    EngineVersion = "4",
                    CssGrade = "X"
                },
                new Browser {
                    RenderingEngine = "Trident",
                    Name = "Internet Explorer 5.0",
                    Platforms = "Win 95+",
                    EngineVersion = "5",
                    CssGrade = "C"
                }
            };


            dataTable.DataSource = data;
            dataTable.DataBind();

            // tell gridview to wrap header row in a THEAD
            dataTable.HeaderRow.TableSection = TableRowSection.TableHeader;
        }
    }

    class Browser
    {
        public string RenderingEngine { get; set; }
        public string Name { get; set; }
        public string Platforms { get; set; }
        public string EngineVersion { get; set; }
        public string CssGrade { get; set; }
    }
}

Example.aspx：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example.aspx.cs" EnableViewState="false" Inherits="WebApplication3.Example" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="dataTable" AutoGenerateColumns="false" CssClass="table table-bordered table-condensed table-hover table-striped" runat="server">
            <Columns>
                <asp:BoundField HeaderText="Rendering engine" DataField="RenderingEngine" />
                <asp:BoundField HeaderText="Browser" DataField="Name" />
                <asp:BoundField HeaderText="Platform(s)" DataField="Platforms" />
                <asp:BoundField HeaderText="Engine version" DataField="EngineVersion" />
                <asp:BoundField HeaderText="CSS grade" DataField="CssGrade" />
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

生成的HTML應該具有您要查找的結構。 您可能需要使用一些CSS進行調整...

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>

    </title>
</head>
<body>
    <form method="post" action="Example" id="form1">
        <div class="aspNetHidden">
            <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="7dkQ7oSHomhL10KJ/ok2e80Vvp9y2YD39bh5p/Adhqkq0dVg1ZTchTib8qBNWZHWJJGmLATzADBKv9sLEXo4fhGXQTPTW66PXWGMd8YJLSeX18oHaCRD34u6tpEivBBJ" />
        </div>

        <div>
            <div>
                <table class="table table-bordered table-condensed table-hover table-striped" cellspacing="0" rules="all" border="1" id="dataTable" style="border-collapse:collapse;">
                    <thead>
                        <tr>
                            <th scope="col">Rendering engine</th>
                            <th scope="col">Browser</th>
                            <th scope="col">Platform(s)</th>
                            <th scope="col">Engine version</th>
                            <th scope="col">CSS grade</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Trident</td>
                            <td>Internet Explorer 4.0</td>
                            <td>Win 95+</td>
                            <td>4</td>
                            <td>X</td>
                        </tr>
                        <tr>
                            <td>Trident</td>
                            <td>Internet Explorer 5.0</td>
                            <td>Win 95+</td>
                            <td>5</td>
                            <td>C</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </form>

    <!-- Visual Studio Browser Link -->
    <script type="application/json" id="__browserLink_initializationData">
        {"appName":"Chrome","requestId":"7975235c58f0487da9dfd4fc5eec6dad"}
    </script>
    <script type="text/javascript" src="http://localhost:50342/8ac48e89e4e94137abf12bc60954c99f/browserLink" async="async"></script>
    <!-- End Browser Link -->

</body>
</html>

如何將數據表Jquery文件應用於ASP Grid視圖控件？

問題描述

1 個解決方案

解決方案1
0 2014-02-01 04:57:53

如何將數據表Jquery文件應用於ASP Grid視圖控件？

問題描述

1 個解決方案

解決方案1 0 2014-02-01 04:57:53

解決方案1
0 2014-02-01 04:57:53