Question

我正在尝试在使用razor填充来自sql server的数据的html5页面中加入一个网格/表格。我是一个完整而绝对的新手。我的页面工作，SQL查询工作。我需要的最后一件事是让表格看起来和行为类似于基本的bootgrid示例：http://www.jquery-bootgrid.com/Examples#basic

我做了以下事情：

使用Nuget包管理器创建了一个新的cshtml页面/站点并安装了Bootstrap，jquery和jquery bootgrid。
从html页面的head section添加了对这些js和css文件的引用。
创建了一个html表，并使用SQL Server
使用bootstrap格式化表格。到此为止，一切正常。

现在我无法启动任何bootgrid外观和感觉。我已经浏览了bootgrid网站上的“文档”页面，甚至将其中一个示例复制到了他们的网站上但没有任何作用。

在stackoverflow上，我做了一个搜索，发现以下三个帖子与我的问题有关，但没有引导我找到任何解决方案。

我必须缺少一些激活bootgrid功能的步骤。

这是我用来测试/学习bootgrid的基本CSHTML页面：

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Site's Title</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="~/Content/bootstrap.min.css">
        <link rel="stylesheet" href="~/Content/jquery.bootgrid.min.css">
        <script src="~/Scripts/jquery-1.11.2.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/Scripts/jquery.bootgrid.min.js"></script>
    </head>
    <body>

        <!--jQuery Bootgrid-->
        <div class="container">
            <h1>JQuery Bootgrid</h1>
            <table id="grid-basic" class="table table-bordered table-hover table-striped table-condensed" data-toggle="bootgrid">
            <thead>
                <tr class="active">
                    <th data-column-id="id" data-type="numeric" data-identifier="true">Group ID</th>
                    <th data-column-id="group_name" data-order="desc">Group Name</th>
                    <th data-column-id="group_desc">Group Description</th>
                </tr>
            </thead>        
            <tbody>
            @foreach(var xrow in selectedData){
                <tr>
                    <td>@xrow.GroupID</td>
                    <td>@xrow.GroupName</td>
                    <td>@xrow.GroupDesc</td>
                </tr>
            }
            </tbody>
        </table>
     </div>
</body>`
</html>

我错过了什么？

非常感谢

Answer 1

我认为你错过了这个

$("#grid-basic").bootgrid();

你有没有在js档文件

中的任何地方写这篇文章

Answer 2

必须使用HTML页面上调用的Javascript激活bootgrid功能。下面的完整页面代码：请注意我的HTML表格“tb1”和HEAD中调用bootgrid函数但传递值为“＃tb1”的javascript行。

@{
    var db = Database.OpenConnectionString("server=.\\SQLEXPRESS;database=BlueprintManager;trusted_connection=True", "System.Data.SqlClient");
    var selectedData = db.Query("SELECT * FROM tbBPGroups");
    var grid = new WebGrid(source: selectedData);
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Site's Title</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="~/Content/bootstrap.min.css">
        <link rel="stylesheet" href="~/Content/jquery.bootgrid.min.css">
        <script src="~/Scripts/jquery-1.11.2.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/Scripts/jquery.bootgrid.js"></script>

        <script>
            function testBtn() {
                alert("Start prettify");
                $("#tb1").bootgrid();
                alert("end prettify");
            }
        </script>
    </head>
    <body>

        <!--jQuery Bootgrid-->
        <div class="container">
            <h1>JQuery Bootgrid</h1>
            <table id="tb1" class="table table-bordered table-hover table-striped table-condensed">
            <thead>
                <tr class="active">
                    <th data-column-id="id" data-type="numeric" data-identifier="true">Group ID</th>
                    <th data-column-id="group_name" data-order="desc">Group Name</th>
                    <th data-column-id="group_desc">Group Description</th>
                </tr>
            </thead>        
            <tbody>
            @foreach(var xrow in selectedData){
                <tr>
                    <td>@xrow.GroupID</td>
                    <td>@xrow.GroupName</td>
                    <td>@xrow.GroupDesc</td>
                </tr>
            }
            </tbody>
        </table>

        <br>
        <br>

        <Button id="init-basic" type="button" class="btn btn-lg btn-primary" onclick="testBtn();">
            Activate Bootgrid Now >>>
        </button>
     </div>

    </body>
</html>

如何“启用”jquery bootgrid网格/表

2 个答案: