最近在学EXT 我是.net + ext ,在做grid 分页时出了问题,不知问题出哪了。就是不显示数据
报了个“ {"PrettyPrint":false,"Depth":0,"Index":-1,"Bracket":4} ”的错
我把代码贴出来高手帮忙看看,十分感谢!
页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="myGridList.aspx.cs" Inherits="Frame_myGridList" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function (){
var sm=new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex',renderer:changeSex},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
//根据性别改变当列颜色
function changeSex(value){
if(value=="male"){
return "<span style='color:red;'>男</span>";
}else if(value=="female"){
return "<span style='color:green;'>女</span>";
}
}
// var data ={"totalCount":"200","root":[{"id":"0","sex":"male","name":"小飞","descn":"详细说明"},{"id":"1","sex":"male","name":"小飞","descn":"详细说明"},{"id":"2","sex":"male","name":"小飞","descn":"详细说明"},{"id":"3","sex":"male","name":"小飞","descn":"详细说明"},{"id":"4","sex":"male","name":"小飞","descn":"详细说明"},{"id":"5","sex":"male","name":"小飞","descn":"详细说明"},{"id":"6","sex":"male","name":"小飞","descn":"详细说明"},{"id":"7","sex":"male","name":"小飞","descn":"详细说明"},{"id":"8","sex":"male","name":"小飞","descn":"详细说明"},{"id":"9","sex":"male","name":"小飞","descn":"详细说明"},{"id":"10","sex":"male","name":"小飞","descn":"详细说明"},{"id":"11","sex":"male","name":"小飞","descn":"详细说明"},{"id":"12","sex":"male","name":"小飞","descn":"详细说明"},{"id":"13","sex":"male","name":"小飞","descn":"详细说明"},{"id":"14","sex":"male","name":"小飞","descn":"详细说明"},{"id":"15","sex":"male","name":"小飞","descn":"详细说明"},{"id":"16","sex":"male","name":"小飞","descn":"详细说明"},{"id":"17","sex":"male","name":"小飞","descn":"详细说明"},{"id":"18","sex":"male","name":"小飞","descn":"详细说明"},{"id":"19","sex":"male","name":"小飞","descn":"详细说明"}]} ;
var fds=new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'myGridList.aspx'}),
// proxy: new Ext.data.MemoryProxy(data),
reader:new Ext.data.JsonReader({
totalProperty:'totalCount',
root:"root"
},
[{name:'id'},{name:'sex'},{name:'name'},{name:'descn'}]
)
});
var grid=new Ext.grid.EditorGridPanel({
el:"table",
store :fds,
ds:fds,
cm:cm,
sm:sm,
frame:true,
width:600,
height:400,
loadMask: {msg:'正在加载数据,请稍侯……'},
title:'测试例子',
bbar: new Ext.PagingToolbar({
pageSize:10,
store:fds,
displayInfo:true,
displayMsg:'显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg:'没有数据'
})
});
//加载数据
fds.load({
params: { start: 1, limit:10 },
callback: function(r, options, success) {
if (!success) {
alert("加载数据失败,无对应数据或者系统出现异常!");
}
}
});
grid.render();
//初始化函数结束符
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="table" style="margin-left:15%;">
</div>
<div id="rightMenu_div"></div>
<div id="north-div"></div>
</form>
</body>
</html>后台代码:
protected void Page_Load(object sender, EventArgs e)
{
string start = Request["start"];
string limit = Request["limit"]; JsonTextWriter writer = new JsonTextWriter();
writer.WriteStartObject();
writer.WriteMember("totalCount");
writer.WriteString("20");
writer.WriteMember("root");
writer.WriteStartArray();
for (int i = 0; i < 20; i++)
{
writer.WriteStartObject();
writer.WriteMember("id");
writer.WriteString(i.ToString());
writer.WriteMember("sex");
writer.WriteString("male");
writer.WriteMember("name");
writer.WriteString("小飞");
writer.WriteMember("descn");
writer.WriteString("详细说明");
writer.WriteEndObject();
}
writer.WriteEndArray();
writer.WriteEndObject();
JavaScriptSerializer js = new JavaScriptSerializer();
Response.Write(js.Serialize(writer));
}输出的json
{"totalCount":"20","root":[{"id":"0","sex":"male","name":"小飞","descn":"详细说明"},{"id":"1","sex":"male","name":"小飞","descn":"详细说明"},{"id":"2","sex":"male","name":"小飞","descn":"详细说明"},{"id":"3","sex":"male","name":"小飞","descn":"详细说明"},{"id":"4","sex":"male","name":"小飞","descn":"详细说明"},{"id":"5","sex":"male","name":"小飞","descn":"详细说明"},{"id":"6","sex":"male","name":"小飞","descn":"详细说明"},{"id":"7","sex":"male","name":"小飞","descn":"详细说明"},{"id":"8","sex":"male","name":"小飞","descn":"详细说明"},{"id":"9","sex":"male","name":"小飞","descn":"详细说明"},{"id":"10","sex":"male","name":"小飞","descn":"详细说明"},{"id":"11","sex":"male","name":"小飞","descn":"详细说明"},{"id":"12","sex":"male","name":"小飞","descn":"详细说明"},{"id":"13","sex":"male","name":"小飞","descn":"详细说明"},{"id":"14","sex":"male","name":"小飞","descn":"详细说明"},{"id":"15","sex":"male","name":"小飞","descn":"详细说明"},{"id":"16","sex":"male","name":"小飞","descn":"详细说明"},{"id":"17","sex":"male","name":"小飞","descn":"详细说明"},{"id":"18","sex":"male","name":"小飞","descn":"详细说明"},{"id":"19","sex":"male","name":"小飞","descn":"详细说明"}]}
报了个“ {"PrettyPrint":false,"Depth":0,"Index":-1,"Bracket":4} ”的错
我把代码贴出来高手帮忙看看,十分感谢!
页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="myGridList.aspx.cs" Inherits="Frame_myGridList" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function (){
var sm=new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex',renderer:changeSex},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
//根据性别改变当列颜色
function changeSex(value){
if(value=="male"){
return "<span style='color:red;'>男</span>";
}else if(value=="female"){
return "<span style='color:green;'>女</span>";
}
}
// var data ={"totalCount":"200","root":[{"id":"0","sex":"male","name":"小飞","descn":"详细说明"},{"id":"1","sex":"male","name":"小飞","descn":"详细说明"},{"id":"2","sex":"male","name":"小飞","descn":"详细说明"},{"id":"3","sex":"male","name":"小飞","descn":"详细说明"},{"id":"4","sex":"male","name":"小飞","descn":"详细说明"},{"id":"5","sex":"male","name":"小飞","descn":"详细说明"},{"id":"6","sex":"male","name":"小飞","descn":"详细说明"},{"id":"7","sex":"male","name":"小飞","descn":"详细说明"},{"id":"8","sex":"male","name":"小飞","descn":"详细说明"},{"id":"9","sex":"male","name":"小飞","descn":"详细说明"},{"id":"10","sex":"male","name":"小飞","descn":"详细说明"},{"id":"11","sex":"male","name":"小飞","descn":"详细说明"},{"id":"12","sex":"male","name":"小飞","descn":"详细说明"},{"id":"13","sex":"male","name":"小飞","descn":"详细说明"},{"id":"14","sex":"male","name":"小飞","descn":"详细说明"},{"id":"15","sex":"male","name":"小飞","descn":"详细说明"},{"id":"16","sex":"male","name":"小飞","descn":"详细说明"},{"id":"17","sex":"male","name":"小飞","descn":"详细说明"},{"id":"18","sex":"male","name":"小飞","descn":"详细说明"},{"id":"19","sex":"male","name":"小飞","descn":"详细说明"}]} ;
var fds=new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'myGridList.aspx'}),
// proxy: new Ext.data.MemoryProxy(data),
reader:new Ext.data.JsonReader({
totalProperty:'totalCount',
root:"root"
},
[{name:'id'},{name:'sex'},{name:'name'},{name:'descn'}]
)
});
var grid=new Ext.grid.EditorGridPanel({
el:"table",
store :fds,
ds:fds,
cm:cm,
sm:sm,
frame:true,
width:600,
height:400,
loadMask: {msg:'正在加载数据,请稍侯……'},
title:'测试例子',
bbar: new Ext.PagingToolbar({
pageSize:10,
store:fds,
displayInfo:true,
displayMsg:'显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg:'没有数据'
})
});
//加载数据
fds.load({
params: { start: 1, limit:10 },
callback: function(r, options, success) {
if (!success) {
alert("加载数据失败,无对应数据或者系统出现异常!");
}
}
});
grid.render();
//初始化函数结束符
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="table" style="margin-left:15%;">
</div>
<div id="rightMenu_div"></div>
<div id="north-div"></div>
</form>
</body>
</html>后台代码:
protected void Page_Load(object sender, EventArgs e)
{
string start = Request["start"];
string limit = Request["limit"]; JsonTextWriter writer = new JsonTextWriter();
writer.WriteStartObject();
writer.WriteMember("totalCount");
writer.WriteString("20");
writer.WriteMember("root");
writer.WriteStartArray();
for (int i = 0; i < 20; i++)
{
writer.WriteStartObject();
writer.WriteMember("id");
writer.WriteString(i.ToString());
writer.WriteMember("sex");
writer.WriteString("male");
writer.WriteMember("name");
writer.WriteString("小飞");
writer.WriteMember("descn");
writer.WriteString("详细说明");
writer.WriteEndObject();
}
writer.WriteEndArray();
writer.WriteEndObject();
JavaScriptSerializer js = new JavaScriptSerializer();
Response.Write(js.Serialize(writer));
}输出的json
{"totalCount":"20","root":[{"id":"0","sex":"male","name":"小飞","descn":"详细说明"},{"id":"1","sex":"male","name":"小飞","descn":"详细说明"},{"id":"2","sex":"male","name":"小飞","descn":"详细说明"},{"id":"3","sex":"male","name":"小飞","descn":"详细说明"},{"id":"4","sex":"male","name":"小飞","descn":"详细说明"},{"id":"5","sex":"male","name":"小飞","descn":"详细说明"},{"id":"6","sex":"male","name":"小飞","descn":"详细说明"},{"id":"7","sex":"male","name":"小飞","descn":"详细说明"},{"id":"8","sex":"male","name":"小飞","descn":"详细说明"},{"id":"9","sex":"male","name":"小飞","descn":"详细说明"},{"id":"10","sex":"male","name":"小飞","descn":"详细说明"},{"id":"11","sex":"male","name":"小飞","descn":"详细说明"},{"id":"12","sex":"male","name":"小飞","descn":"详细说明"},{"id":"13","sex":"male","name":"小飞","descn":"详细说明"},{"id":"14","sex":"male","name":"小飞","descn":"详细说明"},{"id":"15","sex":"male","name":"小飞","descn":"详细说明"},{"id":"16","sex":"male","name":"小飞","descn":"详细说明"},{"id":"17","sex":"male","name":"小飞","descn":"详细说明"},{"id":"18","sex":"male","name":"小飞","descn":"详细说明"},{"id":"19","sex":"male","name":"小飞","descn":"详细说明"}]}
这种方式,就能显示数据,这样能确定我输出的 json 没错吗?
我邮箱 [email protected]