Ext 的分页数据无法显示，却仅是一个单引号没加上去，让我郁闷了两天

一，代码使用：Spring+struts+hibernate+ext实现

1，Action代码，后台处理数据：

//分页设置
	public ActionForward pageSet(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		PageModel pageModel = customerManager.allCustomers();
		int start;
		int limit;
		int total = pageModel.getTotal();
		String json =null;  //构造json形式 json = {id:"id",root:[{sn:'',name:''},{}]}数据
		try{
			start = Integer.parseInt(request.getParameter("start").toString());
			limit = Integer.parseInt(request.getParameter("limit").toString());
			List datas = pageModel.getDatas();
			
			json = "{totalProperty:"+total+",root:[";
			
			if (start + limit < total) { // start是从0开始的
				for (int i = start; i < start + limit; i++) {// 可能有IndexOutOfBoundsException，数据越界,需if条件处理。
					Customer customer = (Customer) datas.get(i);
					json += "{sn:'" + customer.getSn() + "',name:'"
							+ customer.getName() + "',evaluation:'"
							+ customer.getEvaluation() + "',source:'"
							+ customer.getSource() + "',createTime:'"
							+ customer.getCreateTime() + "'}";
					if (i != limit + start - 1) {
						json += ",";
					}
				}
			}
			else {
				for (int i = start; i < total; i++) {// 可能有IndexOutOfBoundsException，数据越界,需if条件处理。
					Customer customer = (Customer) datas.get(i);
					json += "{sn:'" + customer.getSn() + "',name:'"    // 必须符合json的格式，不然也无法显示数据
							+ customer.getName() + "',evaluation:'"
							+ customer.getEvaluation() + "',source:'"
							+ customer.getSource() + "',createTime:'"
							+ customer.getCreateTime() + "'}";
					if (i != total - 1) {
						json += ",";
					}
				}
			}
			json+="]}";
			response.setContentType("text/json;charset=GBK"); //json格式乱码处理 
			response.getWriter().write(json);
			response.getWriter().close();
			//关闭数据流，未关闭有些情况下会导致无法加载显示数据
		}catch(Exception e) {
			e.printStackTrace();
		}
		return null;

	}

 注意：

json += "{sn:'" + customer.getSn() + "',name:'"
       + customer.getName() + "',evaluation:'"
        + customer.getEvaluation() + "',source:'"
        + customer.getSource() + "',createTime:'"
       + customer.getCreateTime() + "'}";

就这里的单引号没加上去，让我郁闷了两天，才解决,汗

符合json格式：

   json={id:'id',totalProperty:'totalProperty',root:[{sn:'XX',name:'XX'},{}}

所以这里要注意别忘了单引号，而且不能在json两边多加了[]，中括号；

下列代码，注重

var store = new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:"../customer.do?method=pageSet"}),//回到跟目录下
    reader:new Ext.data.JsonReader({
          totalProperty:'totalProperty',
          root:'root',
          successProperty :'success'
          },fields),  //List数据
，其他没什么变化。

2，js代码

Ext.onReady(function(){	
	
	// 格式化日期显示
    function formatDate(value){
        return value ? value.dateFormat('Y, M d') : '';
    }
   
    //获得总记录数
//     var total;
//     JCustomerManager.allCustomers(function(data) {
//	    total = data.total;
//     });
//     alert(total);
    var fields = Ext.data.Record.create([
           {name: 'sn', type: 'string' },
           {name: 'name', type: 'string'},
           {name: 'evaluation', type: 'string'},
           {name: 'source', type: 'string'},     //客户来源
           {name:'createTime',type:'date', dateFormat: 'Y/m/d'}
          ]);
    // dataIndex 将特定的列映射到数据源(Data Store)中的数据列
    //定义勾选框,不需要可以不定义
    var sm = new Ext.grid.CheckboxSelectionModel();
    var cm = new Ext.grid.ColumnModel([
    	new Ext.grid.RowNumberer(),//增加自动编号，不需要可不定义
    	sm,                        //勾选框，不需要可不定义
    	{
    	   id:'sn',
           header: "编号",
           dataIndex: 'sn'
          // width:50
        },
		{
           id:'name',
           header: "客户名称",
           dataIndex:'name',
         //  width:50,
           editor: new Ext.form.TextField({
               allowBlank: false// 不能为空
           })
        },
        {
           id:'evaluation',
           header: "价值评估",
           dataIndex: 'evaluation',
           width:70,
           editor: new Ext.form.TextField({
               allowBlank: false// 不能为空
           })
        },
        {
           id:'source',
           header: "客户来源",
           dataIndex: 'source',
           width:70,
           editor: new Ext.form.ComboBox({
           		//transform:"sourceList",  //所对应的下拉菜单名称<select name="sourceList"><option></option></select>
           		triggerAction:"all",
           		lazyRender:true
           })
        },
        {
           header: "录入时间",
           dataIndex: 'createTime',
           width: 95,
           renderer: formatDate,   //格式化时间
           //rnderer:Ext.util.Format.dateRenderer("Y, M d"),
           editor: new Ext.form.DateField({
                format: 'y/m/d',
                minValue: '1970/01/01',//最小值
                disabledDays: [0, 6],// 禁止选择的日期
                disabledDaysText: '非上班时间不可录入' })
        }
    ]);		
    
    var store = new Ext.data.Store({
	proxy:new Ext.data.HttpProxy({url:"../customer.do?method=pageSet"}),//回到跟目录下
    	reader:new Ext.data.JsonReader({
    	      totalProperty:'totalProperty',
    	      root:'root',
    	      successProperty :'success'
    	      },fields),  //List数据
        sortInfo:{field:'name', direction:'ASC'},// 排序信息
        remoteSort:true
    });
       // 默认情况下列是可排序的  	
    cm.defaultSortable = true;
    // 创建编辑器表格
    var grid = new Ext.grid.EditorGridPanel({
        store:store,
        cm: cm,
        width:800,
        height:420,
        //autoExpandColumn:'name',  //根据用户自动填充表格
        title:'客户信息管理',// 标题
        frame:true,
        clicksToEdit:1,//设置点击几次才可编辑
        //设置勾选按钮://true单选，false多选
     	sm:sm, 
        //工具栏
        tools:[{id:"save"},
        	   {id:"help",
        	   	handler:function(){Ext.Msg.alert("help","please help me!");}
        	   },{id:"close"}],
        // 顶部工具栏按钮
        tbar: [{
            text: '添加用户',
			iconCls:'add',//按钮图标的CSS名称
            handler : function(){      
            }
        },{
            text: '查看所选',
			iconCls: 'details',
            handler : function(){
            }
        },{
            text: '删除所选',
			iconCls:'remove',
            handler : function(){
            }
        },{
            text: '删除所有',
			iconCls: 'user-delete',
            handler : function(){
            }
        },{
            text: '检索中心',
			//iconCls: 'user-delete',
            //viewConfig 属性来打开一个新的面板
            handler : function(){
            }
        },{
            text: '刷新',
			//iconCls: 'user-delete',
            pressed:true,
            handler : function(){
            }
        }],
        // 底部工具栏按钮
        bbar:new Ext.PagingToolbar({
        	pageSize:15,   //每页显示的长度
        	store:store,
        	displayInfo:true,
        	displayMsg:"当前{0}到{1}共{2}",
        	emptyMsg:"没有数据请返回",
        	items:null
        })
    });
    grid.render(mydiv);
    store.load({params:{start:0,limit:15}});
  
});

 
 3，jsp页面

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<script type="text/javascript" src="../dwr/engine.js"></script>
<script type="text/javascript" src="../dwr/util.js"></script>
<script type="text/javascript" src="../dwr/interface/JCustomerManager.js"></script>
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<!-- 手工添加dwrproxy.js -->
<script type="text/javascript" src="../ext/dwrproxy.js"></script>
<script type="text/javascript" src="../script/edit_grid_customer.js"></script>
<!--注意要从根目录看起，这里目录需要回退 -->
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../style/edit_grid_customer.css"/>

<title>Insert title here</title>
</head>
<body>
<div id="mydiv" style="width: 100%;height: 100%"></div>
</body>
</html>

 

评论

1 楼 ygswine 2009-08-23  

excellet article