关于EXT用json返回结果分页的问题

最新推荐文章于 2017-02-15 15:46:32 发布

philip_123456

最新推荐文章于 2017-02-15 15:46:32 发布

阅读量1.3k

点赞数

分类专栏： extjs 文章标签： json ext string stylesheet function header

extjs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

关于EXT用json返回结果分页的问题

最近在用ext，可遇到了一个很奇怪的问题
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href=" <%=basePath%>">
<title>My JSP 'index.jsp' starting page </title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css"
href="resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js">
        </script>
<script type="text/javascript" src="js/ext-all-debug.js">
        </script>
<script type="text/javascript" src="js/ext-lang-zh_CN.js">
        </script>
<script>
function renderSex(value) {
if (value == 'male') {
        return " <span style='color:red;font-weight:bold;'>红男 </span> <img src='user_male.png' />";
    } else {
        return " <span style='color:green;font-weight:bold;'>绿女 </span> <img src='user_female.png' />";
    }
}
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
    var str = " <input type='button' value='查看详细信息' οnclick='alert(/"" +
        "这个单元格的值是：" + value + "//n" +
        "这个单元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}//n" +
        "这个单元格对应行的record是：" + record + "，一行的数据都在里边//n" +
        "这是第" + rowIndex + "行//n" +
        "这是第" + columnIndex + "列//n" +
        "这个表格对应的Ext.data.Store在这里：" + store + "，随便用吧。" +
        "/")'>";
    return str;
}

        Ext.onReady(function(){
    var sm = new Ext.grid.CheckboxSelectionModel();
        var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
    {header:'编号',dataIndex:'id',sortable:true},
{header:'性别',dataIndex:'sex',sortable:true,renderer:renderSex},
    {header:'名称',dataIndex:'name',sortable:true},
    {header:'描述',dataIndex:'descn',sortable:true,renderer:renderDescn}
]);
var ds = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({url:'gird.jsp'}),
    reader: new Ext.data.JsonReader({
        totalProperty: 'totalProperty',
        root: 'root'
    },[
        {name: 'id',mapping:0},
{name: 'sex',mapping:1},
        {name: 'name',mapping:2},
        {name: 'descn',mapping:3}
    ])
});

var grid = new Ext.grid.GridPanel({
    renderTo: 'grid',
    height:500,
    ds: ds,
    cm: cm,
sm: sm,
bbar: new Ext.PagingToolbar({
        pageSize: 2,
        store: ds,
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
        emptyMsg: "没有记录"
    })
});
ds.load({params:{start:0,limit:2}});
grid.render();
});
        </script>
</head>
<body>
<div id="grid" style="height:265px;"> </div>
<br>
</body>
</html>

gird.jsp

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href=" <%=basePath%>">

    <title>My JSP 'gird.jsp' starting page </title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">


</head>

<body>
<%
String start = request.getParameter("start");
String limit = request.getParameter("limit");
System.out.println("start=" + start);
System.out.println("limit=" + limit);
try {
    int index = Integer.parseInt(start);
    int pageSize = Integer.parseInt(limit);

    String json = "{totalProperty:100,root:[";
    for (int i = index; i < pageSize + index; i++) {
        json += "{id:" + i + ",sex:'sex" + i + "',name:'name" + i + "',descn:'descn" + i + "'}";
        if (i != pageSize + index - 1) {
            json += ",";
        }
    }
    json += "]}";
    System.out.println("json===" + json);
    response.getWriter().write(json);
    response.getWriter().close();
} catch(Exception ex) {
}
%>

</body>
</html>

刷新index.jsp打印出来
start=0
limit=2
json==={totalProperty:100,root:[{id:0,sex:'sex0',name:'name0',descn:'descn0'},{id:1,sex:'sex1',name:'name1',descn:'descn1'}]}

点分页的下一页打印出
start=2
limit=2
json==={totalProperty:100,root:[{id:2,sex:'sex2',name:'name2',descn:'descn2'},{id:3,sex:'sex3',name:'name3',descn:'descn3'}]}

可页面gird里就是没有数据，分页有效 gird.jsp里的json是出来了，但index.jsp里的ext接收不到数据，表格里就是没数据显示，但表格也只显示2列，就是没实际的数据结果

采纳的答案

2009-09-14 swchentao (初级程序员)

把这两个函数放到Ext.onReady(){ }里面function

renderSex(value) {
if (value == 'male') {
        return " <span style='color:red;font-weight:bold;'>红男 </span> <img src='user_male.png' />";
    } else {
        return " <span style='color:green;font-weight:bold;'>绿女 </span> <img src='user_female.png' />";
    }
}
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
    var str = " <input type='button' value='查看详细信息' οnclick='alert(/"" +
        "这个单元格的值是：" + value + "//n" +
        "这个单元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}//n" +
        "这个单元格对应行的record是：" + record + "，一行的数据都在里边//n" +
        "这是第" + rowIndex + "行//n" +
        "这是第" + columnIndex + "列//n" +
        "这个表格对应的Ext.data.Store在这里：" + store + "，随便用吧。" +
        "/")'>";
    return str;
}

把

        {name: 'id',mapping:0},
        {name: 'sex',mapping:1},
        {name: 'name',mapping:2},
        {name: 'descn',mapping:3}

里面的mapping属性去掉，就可以了。但做好改成

{name: 'id',type: 'int'},
{name: 'sex', type: 'string'},
{name: 'name', type: 'string'},
{name: 'descn', type: 'string'}

var ds = new Ext.data.Store( {
url : 'gird.jsp',
reader : new Ext.data.JsonReader( {
totalProperty : 'totalProperty',
root : 'root'
}, [ {
name : 'id',
mapping : 'id'
}, {
name : 'sex',
mapping : 'sex'
}, {
name : 'name',
mapping : 'name'
}, {
name : 'descn',
mapping : 'descn'
} ])
});