我Asp.Net/C#在我的应用程序中使用，我有一个要求，我需要在其中显示数据jqGrid。数据应该来自Users表格。这是我第一次使用jqGrid，任何人都可以帮助我开始使用jqGrid。Web Forms任何示例或链接都会不胜感激。谢谢。
问问题
12963 次
3 回答
3
请点击以下链接。
http://blog.prabir.me/post/Using-jqGrid-with-ASPNET-Web-Forms-e28093-Part-I.aspx
http://forums.asp.net/t/1638413.aspx/1
http://wiki.asp.net/page.aspx/1774/jqgrid-and-aspnet-web-forms/
http://praveen1305.blogspot.co.uk/2009/05/jqgrid-with-asp-net-web-forms.html
希望能帮助到你
于 2012-04-27T08:38:07.687 回答
1
您可以在任何应用程序中只包含一个空的表格元素和网格底部的寻呼机的空 div
<table id="grid" ></table>
<div id="pager"></div>
然后你包括
<script type="text/javascript">
$(function () {
$("#grid").jqGrid({
url: 'someURLfromYourProject', // 'xxx.svc', 'xxx.asmx', 'xxx.ashx' ...
datatype: 'json',
pager: '#pager',
gridview: true,
height: 'auto',
//... other parameters
});
});
</script>
这将在运行时修改网格中的空表和 div。网格中的数据将从url选项指定的 URL 中获取。
重要的是要了解，您可以非常轻松地将 WFC、ASMX Web 服务或 ASHX 处理程序集成到任何现有应用程序中。您只需将新页面（在 ASP.NET 项目的解决方案资源管理器中选择“添加新项目”上下文菜单）添加到现有项目。这样，您将创建更独立于主要在 ASP.NET 应用程序中使用的技术的代码。如果您稍后决定将应用程序迁移到 ASP.NET MVC，您甚至可以不更改应用程序的 WFC ASMX Web 服务或 ASHX 处理程序部分。
在答案中，您会找到一些带有演示项目的 URL，您可以下载并玩一下。您可以将大部分代码从 ASP.NET MVC 示例（请参阅此处和此处）移动到您的 WCF/ASMX/ASHX 代码中。
于 2012-04-27T09:07:01.620 回答
0
JQGRID 示例：-
从链接http://www.trirand.com/blog/?page_id=6下载所需的所有脚本文件
Design.aspx 我已经在 aspx 页面的正文部分定义了脚本。
我将此网格仅用于搜索功能，因此我禁用了编辑和删除功能
<script src="../JQGridReq/jquery-1.9.0.min.js"></script>
<script src="../JQGridReq/grid.locale-en.js"></script>
<link href="../JQGridReq/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
<script src="../JQGridReq/jquery.jqGrid.js"></script>
<link href="../JQGridReq/ui.jqgrid.css" rel="stylesheet" />
<link href="../JQGridReq/themes/start/theme.css" rel="stylesheet" />
<script type="text/javascript">
jQuery("#jQGridDemo").jqGrid({
url: '../Handlers/JQGridHandler.ashx',
datatype: "json",
colNames: ['TableID', 'Region_ID', 'Region_Name', 'ActionDate', 'Field', 'OldValue', 'NewValue', 'TableName', 'Who','Comment'],
colModel: [
{ name: 'TableID', index: 'TableID', width: 50, stype: 'text' },
{ name: 'Region_ID', index: 'Region_ID', width: 50, stype: 'text', sortable: true, editable: false },
{ name: 'Region_Name', index: 'Region_Name', width: 100, editable: false },
{ name: 'ActionDate', index: 'ActionDate', width: 80, editable: false, formatter: "date" },
{ name: 'Field', index: 'Field', width: 100, align: "right", editable: false },
{ name: 'OldValue', index: 'OldValue', width: 100, align: "right", editable: false },
{ name: 'NewValue', index: 'NewValue', width: 100, align: "right", editable: false },
{ name: 'TableName', index: 'TableName', width: 100, sortable: true, editable: false },
{ name: 'Who', index: 'Who', width: 110, sortable: true, editable: false },
{ name: 'Comment', index: 'Comment', width: 110, sortable: true, editable: false }
],
rowNum: 20,
mtype: 'GET',
loadonce: true,
rowList: [10, 20, 30,40,50],
pager: '#jQGridDemoPager',
sortname: 'TableID',
viewrecords: true,
sortorder: 'desc',
caption: "",
editurl: '../Handlers/JQGridHandler.ashx'
});
$('#jQGridDemo').jqGrid('navGrid', '#jQGridDemoPager',
{
//edit: true,
//add: true,
//del: true,
search: true,
searchtext: "Search"
//addtext: "Add",
//edittext: "Edit",
//deltext:"Delete"
},
{ //EDIT
// height: 300,
// width: 400,
// top: 50,
// left: 100,
// dataheight: 280,
closeOnEscape: true,//Closes the popup on pressing escape key
reloadAfterSubmit: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');//Reloads the grid after edit
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [false, response.responseText]//Captures and displays the response text on th Edit window
}
},
//editData: {
// EmpId: function () {
// var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
// var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
// return value;
// }
//}
},
{
closeAfterAdd: true,//Closes the add window after add
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [false, response.responseText]
}
}
},
{ //DELETE
closeOnEscape: true,
closeAfterDelete: true,
reloadAfterSubmit: true,
closeOnEscape: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$("#jQGridDemo").trigger("reloadGrid", [{ current: true}]);
return [false, response.responseText]
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')
return [true, response.responseText]
}
},
//delData: {
// EmpId: function () {
// var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
// var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
// return value;
// }
//}
},
{//SEARCH
closeOnEscape: true
}
);
</script>
我通过右键单击项目创建了一个通用处理程序，并将新项目添加为通用处理程序并将其命名为 JQGridHandler.ashx，然后将其放在名为 Handlers 的文件夹中以进行 ajax 调用。
JqGridHandler.ashx.cs:-
public class JQGridHandler : IHttpHandler
{
History myHistory = new History();
public void ProcessRequest(HttpContext context)
{
try {
List<HistoryDetails> myHistoryDetails = new List<HistoryDetails>();
myHistoryDetails = myHistory.GetAllHistoryDetails();
var jsonSerializer = new JavaScriptSerializer();
context.Response.Write(jsonSerializer.Serialize(myHistoryDetails));
}
catch(Exception ex)
{
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
History.aspx.cs:- 我正在创建一个名为 HistoryDetails 的通用类，它具有所有必需的属性。然后我调用业务 logic.GetallHistoryDetails()，它使用存储过程从数据库中获取记录
public List<HistoryDetails> GetAllHistoryDetails()
{
List<HistoryDetails> myHistoryDetails = new List<HistoryDetails>();
try
{
myHistoryDetails = BusinessLogic.GetAllHistoryDetails(IdVal);
}
catch(Exception ex)
{
}
return myHistoryDetails;
}
参考资料：- https://www.codeproject.com/Articles/609442/Using-JqGrid-in-ASP-NET
于 2017-02-26T21:39:35.257 回答