我正在尝试在使用razor填充来自sql server的数据的html5页面中加入一个网格/表格。我是一个完整而绝对的新手。我的页面工作,SQL查询工作。我需要的最后一件事是让表格看起来和行为类似于基本的bootgrid示例:http://www.jquery-bootgrid.com/Examples#basic
我做了以下事情:
现在我无法启动任何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>
我错过了什么?
非常感谢
答案 0 :(得分:2)
我认为你错过了这个
$("#grid-basic").bootgrid();
你有没有在js
档文件
答案 1 :(得分:0)
必须使用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>