使用 JSOn 和 asp.net 实现 jqgrid
上次我也问过类似的问题。现在我尝试将 jqgrid 放在一起工作。但是，我尝试引入网格，但数据未加载。
这是两个文件 GetData.aspx
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Web.Script.Serialization"%>
<%@ Import Namespace="System.Collections.ObjectModel"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Response.Write(GetData());
Response.End();
//Response.Write ("Data is being loaded");
}
protected string GetData()
{
var list = new Collection<People>
{
new People {Id = 1, Name = "John", Gender = 1, IsClosed = false},
new People {Id = 2, Name = "Abel", Gender = 1, IsClosed = false},
new People {Id = 3, Name = "Aaron", Gender = 1, IsClosed = true},
new People {Id = 4, Name = "Tsion", Gender = 2, IsClosed = true},
new People {Id = 5, Name = "Mussie", Gender = 2, IsClosed = true}
};
return GridData(1, 1, list.Count, list);
}
public string GridData(int noOfPages, int startPage, int noOfRecords, Collection<People> list)
{
var gridData = new
{
total = noOfPages,
page = startPage,
records = noOfRecords,
rows = list,
};
var jsonSerializer = new JavaScriptSerializer();
return jsonSerializer.Serialize(gridData);
}
public class People
{
public People()
{
Name = string.Empty;
Id = 0;
Gender = 0;
IsClosed = false;
}
public string Name { get; set; }
public int Id { get; set; }
public int Gender { get; set; }
public bool IsClosed { get; set; }
}
public enum Oper
{
edit=1,
del=2,
add=3
}
</script>
</html>
JQExample.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head id="Head1" runat="server">
<title>JqGrid</title>
<link href="themes/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<link href="themes/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.jqGrid.js" type="text/javascript"></script>
</head>
<body>
<%-- <form id="form1">--%>
<table id="jsonmap">
</table>
<div id="pjmap">
</div>
<script type="text/javascript">
jQuery("#jsonmap").jqGrid({
url: 'GetData.aspx',
datatype: 'json',
colNames: ['ID', 'Name','Active','Gender'],
colModel: [{
name: 'id',
index: 'id',
width: 35,
editable: false,
editoptions: {
readonly: true,
size: 10
}},
{
name: 'name',
index: 'name',
width: 150,
align: "left",
editable: true,
size: 100
},
{
name: 'isClosed',
index: 'isClosed',
width: 100,
align: 'left',
editable: true,
edittype: "checkbox",
editoptions: {
value: "true:false",
formatter: "checkbox"
}},
{
name: 'gender',
index: 'gender',
width: 100,
formatter:'select',
editable: true,
edittype: "select",
editoptions: {value: "0:select;1:male;2:female"}
}],
rowNum: 10,
rowList: [2, 5, 10, 15],
pager: '#pjmap',
sortname: 'id',
sortorder: "desc",
viewrecords: true,
jsonReader: {
repeatitems: false
},
width: 600,
caption: 'First jqGrid',
height: '100%',
editurl: 'GetData.aspx'
});
jQuery("#jsonmap").navGrid("#pjmap", {
edit: true,
add: true,
del: true
},
{
closeAfterEdit: true,
reloadAfterSubmit: false
},
{
closeAfterAdd: true,
reloadAfterSubmit: false
},
{
reloadAfterSubmit: false
});
</script>
<table id="Jqgrid" width="100%">
</table>
<div id="pager"></div>
</form>
</body>
</html>
现在我想使用 ADO.net 更改要动态显示的数据。
谢谢先生。现在它起作用了。
我想更改为动态获取数据，即更改 GetData.aspx 中的数据源并格式化 JQExample.aspx 文件中的 colNames 和 ColModel：
$(document).ready(function () {
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
//url: "GetData.aspx",
datatype: 'json',
success: function (result) {
// colD = result.colData;
// colN = result.colNames;
var colM = result.colModel;
//alert(result.colModel);
jQuery("#jsonmap").jqGrid
(
{
jsonReader: { repeatitems: false, cell: "",id: "0" },
//url: "GetData.aspx",
datatype: 'json',
mtype: 'POST',
colModel: colM,
data: colD.rootVar,
ColNames: colN,
ColModel: ColM,
height: "auto",
gridview: true,
pager: '#pager',
rowNum: 5,
rowList: [5, 10, 20, 50],
viewrecords: true,
loadComplete: function (data) {
alert('loaded completely');
},
loadError: function () {
alert('error');
}
});
},
error: function (x, e) {
alert(x.readyState + ' ' + x.status + e.msg);
}
});
以下代码应替换为 GetData.aspx 中的 ADO.Net 连接
var list = new Collection<People>
{
new People {Id = 1, Name = "John", Gender = 1, IsClosed = false},
new People {Id = 2, Name = "Abel", Gender = 1, IsClosed = false},
new People {Id = 3, Name = "Aaron", Gender = 1, IsClosed = true},
new People {Id = 4, Name = "Tsion", Gender = 2, IsClosed = true},
new People {Id = 5, Name = "Mussie", Gender = 2, IsClosed = true}
};
请您告诉我下一步该做什么？ 我确实有服务器端数据源（SQL 服务器）。那么我应该编写一条 select 语句来获取要在网格中显示的记录总数、页数和顺序（排序）选项吗？如果是这样，请提供包含 top、limit 和 order by 的示例代码吗？
上面的代码是否缺少动态获取数据的内容？
Last time, I asked similar question. Now I tried to put the jqgrid together to work. However, I tried to bring the grid but the data is not loading.
here are the two files
GetData.aspx
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Web.Script.Serialization"%>
<%@ Import Namespace="System.Collections.ObjectModel"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Response.Write(GetData());
Response.End();
//Response.Write ("Data is being loaded");
}
protected string GetData()
{
var list = new Collection<People>
{
new People {Id = 1, Name = "John", Gender = 1, IsClosed = false},
new People {Id = 2, Name = "Abel", Gender = 1, IsClosed = false},
new People {Id = 3, Name = "Aaron", Gender = 1, IsClosed = true},
new People {Id = 4, Name = "Tsion", Gender = 2, IsClosed = true},
new People {Id = 5, Name = "Mussie", Gender = 2, IsClosed = true}
};
return GridData(1, 1, list.Count, list);
}
public string GridData(int noOfPages, int startPage, int noOfRecords, Collection<People> list)
{
var gridData = new
{
total = noOfPages,
page = startPage,
records = noOfRecords,
rows = list,
};
var jsonSerializer = new JavaScriptSerializer();
return jsonSerializer.Serialize(gridData);
}
public class People
{
public People()
{
Name = string.Empty;
Id = 0;
Gender = 0;
IsClosed = false;
}
public string Name { get; set; }
public int Id { get; set; }
public int Gender { get; set; }
public bool IsClosed { get; set; }
}
public enum Oper
{
edit=1,
del=2,
add=3
}
</script>
</html>
JQExample.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head id="Head1" runat="server">
<title>JqGrid</title>
<link href="themes/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<link href="themes/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.jqGrid.js" type="text/javascript"></script>
</head>
<body>
<%-- <form id="form1">--%>
<table id="jsonmap">
</table>
<div id="pjmap">
</div>
<script type="text/javascript">
jQuery("#jsonmap").jqGrid({
url: 'GetData.aspx',
datatype: 'json',
colNames: ['ID', 'Name','Active','Gender'],
colModel: [{
name: 'id',
index: 'id',
width: 35,
editable: false,
editoptions: {
readonly: true,
size: 10
}},
{
name: 'name',
index: 'name',
width: 150,
align: "left",
editable: true,
size: 100
},
{
name: 'isClosed',
index: 'isClosed',
width: 100,
align: 'left',
editable: true,
edittype: "checkbox",
editoptions: {
value: "true:false",
formatter: "checkbox"
}},
{
name: 'gender',
index: 'gender',
width: 100,
formatter:'select',
editable: true,
edittype: "select",
editoptions: {value: "0:select;1:male;2:female"}
}],
rowNum: 10,
rowList: [2, 5, 10, 15],
pager: '#pjmap',
sortname: 'id',
sortorder: "desc",
viewrecords: true,
jsonReader: {
repeatitems: false
},
width: 600,
caption: 'First jqGrid',
height: '100%',
editurl: 'GetData.aspx'
});
jQuery("#jsonmap").navGrid("#pjmap", {
edit: true,
add: true,
del: true
},
{
closeAfterEdit: true,
reloadAfterSubmit: false
},
{
closeAfterAdd: true,
reloadAfterSubmit: false
},
{
reloadAfterSubmit: false
});
</script>
<table id="Jqgrid" width="100%">
</table>
<div id="pager"></div>
</form>
</body>
</html>
Now I would like to change data to be displayed dynamically using ADO.net.
Thank you sir. It worked now.
I want to change to get data dynamically which is change the data source in GetData.aspx and format the colNames and ColModel in JQExample.aspx file:
$(document).ready(function () {
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
//url: "GetData.aspx",
datatype: 'json',
success: function (result) {
// colD = result.colData;
// colN = result.colNames;
var colM = result.colModel;
//alert(result.colModel);
jQuery("#jsonmap").jqGrid
(
{
jsonReader: { repeatitems: false, cell: "",id: "0" },
//url: "GetData.aspx",
datatype: 'json',
mtype: 'POST',
colModel: colM,
data: colD.rootVar,
ColNames: colN,
ColModel: ColM,
height: "auto",
gridview: true,
pager: '#pager',
rowNum: 5,
rowList: [5, 10, 20, 50],
viewrecords: true,
loadComplete: function (data) {
alert('loaded completely');
},
loadError: function () {
alert('error');
}
});
},
error: function (x, e) {
alert(x.readyState + ' ' + x.status + e.msg);
}
});
The following code should be replaced by ADO.Net connection in GetData.aspx
var list = new Collection<People>
{
new People {Id = 1, Name = "John", Gender = 1, IsClosed = false},
new People {Id = 2, Name = "Abel", Gender = 1, IsClosed = false},
new People {Id = 3, Name = "Aaron", Gender = 1, IsClosed = true},
new People {Id = 4, Name = "Tsion", Gender = 2, IsClosed = true},
new People {Id = 5, Name = "Mussie", Gender = 2, IsClosed = true}
};
Would you please tell me what to do in the next step?
I do have server end data source (SQL server). so should I write a select statement to get the total number of records, pages and order by (sorting) fearures to display in the grid? If so would you please give sample code which has top, limit and order by?
Is there anything missing in the above codes to get the data dynamically?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您的实现存在一些问题，特别是如果您希望它可编辑但只是加载修复列映射所需的数据。它们不匹配。另外，我相信它区分大小写，因此您需要将 colNames 更改为下面并更新 colModel 以匹配这些名称/大小写：
There are several things wrong with your implementation especially if you want it to be editable but just to load the data you need to fix your column mappings. They do not match. Also, I believe it's case sensitive so you need to change the colNames to below and update colModel to match those names/case: