C# 如何将数据表Jquery文件应用于ASP网格视图控件?
我有一个Data Table.Js文件,它可以正常工作。现在我想将该Js文件应用到我的ASP网格,但它不工作。请帮助我。 提前谢谢 Js文件:C# 如何将数据表Jquery文件应用于ASP网格视图控件?,c#,jquery,asp.net,C#,Jquery,Asp.net,我有一个Data Table.Js文件,它可以正常工作。现在我想将该Js文件应用到我的ASP网格,但它不工作。请帮助我。 提前谢谢 Js文件: <script src="lib/datatables/jquery.dataTables.js"></script> <script src="lib/datatables/DT_bootstrap.js"></script> <script src="js/main.min
<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>
$(函数(){
metisTable();
metisSortable();
});
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>
渲染引擎
浏览器
月台
引擎版本
CSS等级
三叉戟
Internet Explorer 4.0
赢得95分+
4.
X
三叉戟
Internet Explorer 5.0
赢得95分+
5.
C
我想将此HTML代码转换为ASP网格。请帮助我。如果我正确阅读此代码,您是否正在尝试获取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; }
}
}
使用系统;
使用System.Collections.Generic;
使用System.Web.UI.WebControl;
命名空间WebApplication3
{
公共部分类示例:System.Web.UI.Page
{
受保护的无效页面加载(对象发送方、事件参数e)
{
var数据=新列表
{
新浏览器{
RenderingEngine=“Trident”,
Name=“Internet Explorer 4.0”,
平台=“Win 95+”,
EngineVersion=“4”,
CssGrade=“X”
},
新浏览器{
RenderingEngine=“Trident”,
Name=“Internet Explorer 5.0”,
平台=“Win 95+”,
EngineVersion=“5”,
CssGrade=“C”
}
};
dataTable.DataSource=数据;
dataTable.DataBind();
//告诉gridview将标题行换行到THAD中
dataTable.HeaderRow.TableSection=TableRowSection.TableHeader;
}
}
类浏览器
{
公共字符串呈现引擎{get;set;}
公共字符串名称{get;set;}
公共字符串平台{get;set;}
公共字符串引擎版本{get;set;}
公共字符串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>
渲染引擎
浏览器
月台
引擎版本
CSS等级
三叉戟
Internet Explorer 4.0
赢得95分+
4.
X
三叉戟
Internet Explorer 5.0
赢得95分+
5.
C
{“appName”:“Chrome”,“requestId”:“7975235c58f0487da9dfd4fc5eec6dad”}
“它不起作用了。”你必须做得更好。也许还有一些代码?我想使用相同的DataTable。可能吗?谢谢回复。在gridview中,DataTable js工作正常。但在添加DataTable后,gridview大小扩展到了网格的原始大小。