JSp页面传值和Ext JS表单自动填充

赵小宾 发布于 2013/08/01 10:06
阅读 1K+
收藏 1

有一个JSP文件:Center_right.jsp 

<body>
	<table border ="1"> <tr>
	<td>题目编号</td>
	<td>题目内容</td>
	<td>题目类型</td>
	<td>选项个数</td>
	<td>选       项</td>
	<td>题目备注</td>
	<td>操作</td> </tr>
	<%
 	while  (it.hasNext()) {
          
 		Questions q=(Questions)it.next();
 %>
	<tr> 
	<td><%= q.getQ_id()%></td> 
	<td><%= q.getQ_head()%></td>
	<td><%= q.getQ_type().getQt_des()%></td>
	<td><%= q.getQ_number()%></td>
	<td><%= q.getQ_body()%></td>
	<td><%= q.getQ_remarks()%></td>
	<td><a href ="DesignQuestions/UpdateQuestion.jsp?q_id=<%=q.getQ_id()%>">修改 </a></td>
	<td><a href ="servlet/DeleteQueByIdServlet?q_id=<%=q.getQ_id()%>">删除</a></td>
	</tr>
	<%
 	}
         list.clear();
 %>
	<tr align="center"> 
	<td colspan ="6">
	<a href ="DesignQuestions/Center_right.jsp?page=1"> 首页</a>||
	<a href ="DesignQuestions/Center_right.jsp?page=<%=mypage-1%>"> 上一页 </a>||
	<a href ="DesignQuestions/Center_right.jsp?page=<%=mypage+1%>"> 下一页 </a>||
	<a href ="DesignQuestions/Center_right.jsp?page=<%=totalpage%>"> 末页 </a>
	</td>
	</tr> 
	</table >
修改命令跳转到UpdateQuestion.jsp 

<script type="text/javascript" src="JS/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.require([ '*' ]);
Ext.onReady(function() {//onReady()函数在页面注册多个函数,依次执行
 Ext.QuickTips.init();
 Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
				Ext.state.Manager.setProvider(Ext
						.create('Ext.state.CookieProvider'));
	
			//表单组合控件
			var form = new Ext.form.FormPanel({
					labelAlign : 'right',
					autoScroll : true,
					labelWidth : 50,
					width : 600,
					// title: 'form',
					frame : true,
					//reader:reader,
				//standardSubmit:true,
					//url:'servlet/AddQueServlet',
					items : [ {
						layout : 'form',
						items : [ {
							//columnWidth:.7,
							xtype : 'fieldset',
							layout : 'form',
							checkboxToggle : true,//折叠fieldset
							title : '文字输入',
							autoHeight : true,
							defaults : {
								width : 400
							},
							defaultType : 'textfield',
							items : [ {
								fieldLabel : '题目',
								name : 'head',
								
								allowBlank : false
							}, {

								xtype : 'htmleditor',
								fieldLabel : '题目备注及说明',
								id : 'editor',
								anchor : '98%',
							    name : 'remarks',
							    fontFamilies: ["宋体", "隶书", "黑体","Times New Roman"]
							   
							}, {
								xtype : 'hidden',
								name : 'hidden'
							} ]
						}, {
							//columnWidth:.3,

							xtype : 'fieldset',
							checkboxToggle : true,
							title : '数据验证',
							autoHeight : true,
							defaultType : 'checkbox',
							hideLabels : true,
							layout : 'column',
							name:'checkValue',
							//style: 'margin-left:10px;',
							//bodyStyle: 'margin-left:20px;',
							items : [ {
								boxLabel : '必填',
								columnWidth : .125,
								name : 'check',
								inputValue : '1',
								checked : true,
								width : 'auto'
							}, {
								boxLabel : '手机号码',
								columnWidth : .125,
								name : 'check',
								inputValue : '2',
								//checked: true,
								width : 'auto'
							}, {
								boxLabel : '邮编',
								columnWidth : .125,
								name : 'check',
								inputValue : '3',
								width : 'auto'
							}, {
								boxLabel : '身份证号',
								columnWidth : .125,
								name : 'check',
								inputValue : '4',
								width : 'auto'
							}, {
								boxLabel : '日期',
								columnWidth : .125,
								name : 'check',
								inputValue : '5',
								width : 'auto'
							}, {
								boxLabel : 'Email',
								columnWidth : .125,
								name : 'check',
								inputValue : '6',
								width : 'auto'
							}, {
								boxLabel : '必答题',
								columnWidth : .25,
								name : 'check',
								inputValue : '7',
								width : 'auto'
							} ]
						}, {
							xtype : 'fieldset',
							checkboxToggle : true,
							title : '选项(每行一个)',
							autoHeight : true,
							defaultType : 'textarea',
							hideLabels : true,
							layout:'form',
							//style: 'margin-left:10px;',
							//bodyStyle: 'margin-left:20px;',
							items : [ {
								xtype:'textfield',
								fieldLabel : '输入选项个数',
								name : 'number'
							},{
								width : 400,
								grow : true,
								name : 'options',
								//allowBlank : false,
								emptyText : '输入选项',
								maxLength : 10,
								minLength : 2
							} ]
						}, {
							xtype : 'fieldset',
							//checkboxToggle:true,
							title : '选项排列',
							autoHeight : true,
						    defaultType : 'radio',
							hideLabels : true,
							layout : 'column',
							//style: 'margin-left:10px;',
							//bodyStyle: 'margin-left:20px;',
							items : [ {

								boxLabel : '横向',
								name : 'rank',
								inputValue : '1',
								//checked: true,
								width : 'auto'
							}, {

								boxLabel : '竖向',
								name : 'rank',
								inputValue : '2',
								checked : true,
								width : 'auto'
							} ]
						} ]

					} ], buttons: [{  
			            text: '保存',  
			            handler: function(){  
			                //此处可以用myFormPanel.getForm()和myFormPanel.form两种方法获得表单对象.  
			                form.getForm().submit({//提交表单数据  
			                    url: 'servlet/AddQueServlet',//处理页面,注意返回内容格式的正确性  
			                    method: 'post',  
			                    success: function(form, action) {//保存成功  
			                        Ext.Msg.alert('保存成功', action.result.msg);  
			                    },  
			                    failure: function(form, action) {//保存失败  
			                        Ext.Msg.alert('保存失败', action.result.msg);  
			                    }  
			                }) ;  
			            }  
			        },{
			            text: '重置',
			            handler: function(){  
			                form.form.reset() ;//重置表单
			                }
			        }]
				});
			form.getForm().load({
			    url: 'DesignQuestions/ShowQueByIdJson.jsp',
			    params: {
			    	 id: 'load'  
			    },
			    failure: function(form, action) {
			        Ext.Msg.alert("Load failed", action.result.errorMessage);
			    },
			    success:function(form, action) {
			        Ext.Msg.alert("Load success", action.result.errorMessage);
			    }
			});
			var viewport = Ext.create('Ext.Viewport',
					{
				       id : 'Center_left',
					   layout : 'fit',
					   autoScroll : true,
					items : [form]
			});
			form.render("form");
			});
	

			</script>
  </head>
  
  <body>
  <%
  String qID=request.getParameter("q_id");
  session.setAttribute("q_id", qID);
  //System.out.print(qID);
  %>
以上表单我想要自动填充,从ShowQueByIdJson.jsp获取值:

<%
       
  int q_id = Integer.parseInt((String)session.getAttribute("q_id"));// 获得页面传递的参数
	Questions q = new Questions();
	QuestionsDao questionDao = new QuestionsDaoImpl();
	q = questionDao.findQuestionsById(q_id);// 调用实现类中根据id查询的方法 %>
  
   <%  
    String id = request.getParameter("id") ;  
    if(id!=null &&"load".equals(id)){  
%>  
{  
    success: true,  
    data: {  
       head: "${q.q_head }",  
       remarks: "${q.q_remarks }",  
       number:"${q.q_number }",  
       options: ${q.q_body }"
    }  
}  
<%  
    }else{  
%>  
{  
    success: false,  
    msg: "数据载入错误"  
}  
<%  
    }  
%>
问题来啦!session范围是一个会话,这个q_id传不到ShowQueByIdJson.jsp,所以查不到数据写进JSON字符串,怎样才能达到:点击修改,跳转到表单的页面能够把应该的信息都填充的效果? 

加载中
0
Solid
Solid

UpdateQuestion.jsp 里<body>后面的JAVA代码放到js代码前面,即代码片段里的209--213行的代码,移动到第1行,之后就好了。

0
赵小宾
赵小宾

引用来自“Solid”的答案

UpdateQuestion.jsp 里<body>后面的JAVA代码放到js代码前面,即代码片段里的209--213行的代码,移动到第1行,之后就好了。

这次q_id传过去啦,但还是没有自动填充,而且也没进入success和failure方法:

showQueByIdJson.jsp如下:


0
Solid
Solid

如果我没记错的话,Extjs的load和jQuery的load处理方式不一样。

你需要自己写response方法,在showQueByIdJson.jsp里写。

赵小宾
赵小宾
恩!您给说说详细点啊!你说的我都不会啊!还有我在showQueByIdJson.jsp里拼数据的方法是不是不对啊?获得的都是空
返回顶部
顶部