共通ダブルクリックテキストフィールド
17710 ワード
開発時にテキストドメインをダブルクリックし、バックグラウンドでデータベースをクエリーして必要な値を得ることがよくあります.次は共通のダブルクリックテキストドメインのコードを書きます.参考にして、意見をあげてください.
私が書いたこのダブルクリックテキストドメインはsshフレームワークに基づいて書かれています.みんなは私の考えを試験できれば十分です.まず、私たちのダブルクリックはjsイベントのサポートに違いありません.また、通常、イベントをダブルクリックすると、2つのテキストボックスの値が変更されます.まず簡単なjspページを書きます
上のjspページを見るとqueryAllというjs関数を書くことがわかります.この関数は4つのパラメータを渡します.
selfId-->は、選択点の値をダブルクリックして変更する必要があるメインテキストボックスを表し、上記の例で変更するのがユーザIdである
relationId-->は、変更する必要があるテキストボックスの値を表し、上記の例で変更したユーザの名前を表す
methodType-->バックグラウンドでどのメソッドを実行するかは、かなりのフラグですが、汎用的に書くので、ニーズに応じて異なるメソッドが実行されるに違いありませんので、ここにフラグビットを書きます.
params->バックグラウンドでメソッドを実行するときに伝えたいパラメータは自分で約束できます.
パラメータを理解してから,この方法の具体的な実現を見てみよう.
上のshowModalDialogでダイアログボックスQueryAll.jspを開きます.このページのロードが完了したら、すぐにMethodType対応のバックグラウンドメソッドを実行できます.次はQueryAll.jspページの例です.
上のQueryAll.jspがあれば、基本的にこの汎用ダブルクリックテキストドメインの大半が完成しました.残りは自分のmethodTypeを書くことです.各テキストドメインがqueryAll.doを呼び出しているので、queryAllでmethodTypeでその方法を実行すると判断します.私はこのような方法を2つ簡単に書きます.
これでテキストドメインをダブルクリックすると成功します.上のqueryAll.jspのページングは複雑すぎて、後期には良いページング機能モジュールを書いてあげます.
私が書いたこのダブルクリックテキストドメインはsshフレームワークに基づいて書かれています.みんなは私の考えを試験できれば十分です.まず、私たちのダブルクリックはjsイベントのサポートに違いありません.また、通常、イベントをダブルクリックすると、2つのテキストボックスの値が変更されます.まず簡単なjspページを書きます
Id：<input type="text" id="selfId" name="selfId" ondblclick = "queryAll('selfId','relaionId','methodType','userCode:selfId')"/></br>
：<input type="text" id="relationId" name="relationId"/>
上のjspページを見るとqueryAllというjs関数を書くことがわかります.この関数は4つのパラメータを渡します.
selfId-->は、選択点の値をダブルクリックして変更する必要があるメインテキストボックスを表し、上記の例で変更するのがユーザIdである
relationId-->は、変更する必要があるテキストボックスの値を表し、上記の例で変更したユーザの名前を表す
methodType-->バックグラウンドでどのメソッドを実行するかは、かなりのフラグですが、汎用的に書くので、ニーズに応じて異なるメソッドが実行されるに違いありませんので、ここにフラグビットを書きます.
params->バックグラウンドでメソッドを実行するときに伝えたいパラメータは自分で約束できます.
パラメータを理解してから,この方法の具体的な実現を見てみよう.
function queryCode(selfId,relationId,methodType,paramsByJSON){
var obj = new Object();
obj.selfId = selfId;
obj.relationId = relationId;
obj.methodType = methodType;
// ：A:a|B:b|C:c...... A ，a value ， 。
if(paramsByJSON != null && paramsByJSON != ""){
var temp = paramsByJSON.substring(1,paramsByJSON.length);
var params = "";
var arrayStr = paramsByJSON.split("|");
for(var i = 0 ; i < arrayStr.length ; i++){
var tempArray = arrayStr[i].split(":");
var value = $("#"+tempArray[1]).val();
params += tempArray[0]+":"+value+"|";
}
obj.paramsByJSON = params.substring(0,params.length-1);
}else{
obj.paramsByJSON = null;
}
// window.obj
window.obj = obj;
var url= "webapps/common/QueryAll.jsp";
var w=(screen.availWidth-300)/2;
var h=(screen.availHeight-460)/2;
// window.showModalDialog
window.showModalDialog(url,window,"dialogHide:yes;help:no;status:no;scroll:yes;dialogWidth:300px;dialogHeight:380px,dialogLeft:"+w+",dialogTop:"+h);
}
上のshowModalDialogでダイアログボックスQueryAll.jspを開きます.このページのロードが完了したら、すぐにMethodType対応のバックグラウンドメソッドを実行できます.次はQueryAll.jspページの例です.
<%@ page contentType="text/html; charset=GBK"%>
<%@ include file="/common/taglibs.jsp" %>
<%@ page import="java.util.*"%>
<html>
<head>
<base target="_self">
<title> </title>
<link href="${ctx}/common/css/Standard.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${ctx}/common/js/jquery-1.7.1.js"></script>
<script language='javascript'>
// ，
function loadPage(){
var url = "queryAll.do";
var parentWindow = window.dialogArguments;
//
var obj = parentWindow.obj;
//
$("#selfId").val(obj.selfId);
$("#relationId").val(obj.relationId);
$("#methodType").val(obj.methodType);
$("#paramsByJSON").val(obj.paramsByJSON);
// ， select
function callback(obj){
$("#codeselect").html("");
var optionStr = "";
for(var i = 0 ; i < obj.data.length ; i++){
optionStr += "<option value = '"+obj.data[i].codeValue+"'>"+obj.data[i].codeValue+"--"+obj.data[i].codeLabel+"</option>";
}
$("#codeselect").html(optionStr);
$("#count").val(obj.totalRecords);
$("#pageSize").val(obj.recordsReturned);
$("#pageNo").val(1);
$("#resultCount").val(obj.recordsReturned);
lastPageNum = Math.ceil(Number($("#count").val())/Number($("#resultCount").val()));
}
var params = {
selfId : obj.selfId,
relationId : obj.relationId,
methodType : obj.methodType,
params : obj.paramsByJSON
};
jQuery.post(url,params,callback,'json');
}
//
function setFieldValue(){
var value = $("#codeselect option:selected").val();
var label = $("#codeselect option:selected").text();
var str = new String(label);
var array = str.split('--');
var selfId = $("#selfId").val();
var relationId = $("#relationId").val();
var parentWindow = window.dialogArguments;
parentWindow.document.getElementById(selfId).value = value;
parentWindow.document.getElementById(relationId).value = array[1];
// callback
window.close();
try {
if(typeof(eval(parentWindow.sonCallbackFather))=="function"){
parentWindow.sonCallbackFather(selfId,relationId);
}
}catch(e){
}
}
//
function cancelFieldValue(){
var selfId = $("#selfId").val();
var relationId = $("#relationId").val();
var parentWindow = window.dialogArguments;
parentWindow.document.getElementById(selfId).value = '';
parentWindow.document.getElementById(relationId).value = '';
window.close();
}
//
function fistPage(){
var url = "queryAll.do";
var params = {
selfId :$("#selfId").val(),
relationId : $("#relationId").val(),
methodType : $("#methodType").val(),
params : $("#paramsByJSON").val(),
pageNo : 1,
pageSize : $("#resultCount").val()
};
function callback(obj){
$("#codeselect").html("");
var optionStr = "";
for(var i = 0 ; i < obj.data.length ; i++){
optionStr += "<option value = '"+obj.data[i].codeValue+"'>"+obj.data[i].codeValue+"--"+obj.data[i].codeLabel+"</option>";
}
$("#codeselect").html(optionStr);
$("#count").val(obj.totalRecords);
$("#pageNo").val(1);
$("#pageSize").val($("#resultCount").val());
}
jQuery.post(url,params,callback,'json');
}
//
function upPage(){
var url = "queryAll.do";
var params = {
selfId :$("#selfId").val(),
relationId : $("#relationId").val(),
methodType : $("#methodType").val(),
params : $("#paramsByJSON").val(),
pageNo : (Number($("#pageNo").val()) == 1) ? 1 : Number($("#pageNo").val())-1,
pageSize : $("#resultCount").val()
};
function callback(obj){
$("#codeselect").html("");
var optionStr = "";
for(var i = 0 ; i < obj.data.length ; i++){
optionStr += "<option value = '"+obj.data[i].codeValue+"'>"+obj.data[i].codeValue+"--"+obj.data[i].codeLabel+"</option>";
}
$("#codeselect").html(optionStr);
$("#count").val(obj.totalRecords);
$("#pageNo").val((Number($("#pageNo").val()) == 1) ? 1 : Number($("#pageNo").val())-1);
$("#pageSize").val($("#resultCount").val());
}
jQuery.post(url,params,callback,'json');
}
//
function nextPage(){
var url = "queryAll.do";
var params = {
selfId :$("#selfId").val(),
relationId : $("#relationId").val(),
methodType : $("#methodType").val(),
params : $("#paramsByJSON").val(),
pageNo : (Number($("#pageNo").val()) == lastPageNum ) ? lastPageNum : Number($("#pageNo").val())+1,
pageSize : $("#resultCount").val()
};
function callback(obj){
$("#codeselect").html("");
var optionStr = "";
for(var i = 0 ; i < obj.data.length ; i++){
optionStr += "<option value = '"+obj.data[i].codeValue+"'>"+obj.data[i].codeValue+"--"+obj.data[i].codeLabel+"</option>";
}
$("#codeselect").html(optionStr);
$("#count").val(obj.totalRecords);
$("#pageNo").val((Number($("#pageNo").val()) == lastPageNum ) ? lastPageNum : Number($("#pageNo").val())+1);
$("#pageSize").val($("#resultCount").val());
}
if(Number($("#pageNo").val()) != Math.ceil(Number($("#count").val())/Number($("#resultCount").val())) ){
jQuery.post(url,params,callback,'json');
}
}
//
function lastPage(){
var url = "queryAll.do";
var params = {
selfId :$("#selfId").val(),
relationId : $("#relationId").val(),
methodType : $("#methodType").val(),
params : $("#paramsByJSON").val(),
pageNo : Math.ceil(Number($("#count").val())/Number($("#resultCount").val())),
pageSize : $("#resultCount").val()
};
function callback(obj){
$("#codeselect").html("");
var optionStr = "";
for(var i = 0 ; i < obj.data.length ; i++){
optionStr += "<option value = '"+obj.data[i].codeValue+"'>"+obj.data[i].codeValue+"--"+obj.data[i].codeLabel+"</option>";
}
$("#codeselect").html(optionStr);
$("#count").val(obj.totalRecords);
$("#pageNo").val(Math.ceil(Number($("#count").val())/Number($("#resultCount").val())));
$("#pageSize").val($("#resultCount").val());
}
jQuery.post(url,params,callback,'json');
}
//
function changePage(){
var url = "queryAll.do";
var params = {
selfId :$("#selfId").val(),
relationId : $("#relationId").val(),
methodType : $("#methodType").val(),
params : $("#paramsByJSON").val(),
pageNo : $("#somePage").val(),
pageSize : $("#resultCount").val()
};
function callback(obj){
$("#codeselect").html("");
var optionStr = "";
for(var i = 0 ; i < obj.data.length ; i++){
optionStr += "<option value = '"+obj.data[i].codeValue+"'>"+obj.data[i].codeValue+"--"+obj.data[i].codeLabel+"</option>";
}
$("#codeselect").html(optionStr);
$("#count").val(obj.totalRecords);
$("#pageNo").val($("#somePage").val());
$("#pageSize").val($("#resultCount").val());
}
if($("#somePage").val() <= 0 || $("#somePage").val() > lastPageNum){
alert(" ， 。");
}else{
jQuery.post(url,params,callback,'json');
}
}
</script>
</head>
<body class="interface" onload="loadPage();" style="BORDER: #3D72D7 1px solid">
<input type="hidden" id="selfId"/>
<input type="hidden" id="relationId"/>
<input type="hidden" id="methodType"/>
<input type="hidden" id="paramsByJSON"/>
<input type="hidden" id="pageNo"/>
<input type="hidden" id="pageSize"/>
<table class="common" cellpadding="2" cellspacing="0" align="center" style="display:" id="resultTab" >
<tr>
<td width=50% align="center"><input class="button" type="button" name="SelectIt" value=" "
onclick='setFieldValue()'></td>
<td width=50% align="center"><input name="CancelIt" class="button" type="button" value=" "
onclick='cancelFieldValue()'></td>
</tr>
<tr>
<td colspan=2 align="center">
<select id="codeselect" name=codeselect class="one" size=20 style="width:100%" ondblclick="setFieldValue()">
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="text" style="width:20px;backgroundColor:#E8E8E8" id='count' readonly="readonly"/> <input type="text" id='resultCount' style="width:20px"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<a onclick="fistPage();"> </a> <a onclick="upPage();"> </a> <a onclick="nextPage();"> </a> <a onclick="lastPage()"> </a> <input type="text" id='somePage' style="width:20px"/>
<input type="button" value="go" onclick="changePage();">
</td>
</tr>
</table>
</body>
</html>
上のQueryAll.jspがあれば、基本的にこの汎用ダブルクリックテキストドメインの大半が完成しました.残りは自分のmethodTypeを書くことです.各テキストドメインがqueryAll.doを呼び出しているので、queryAllでmethodTypeでその方法を実行すると判断します.私はこのような方法を2つ簡単に書きます.
package com.test.action;
import com.test.UserPowerService;
import java.sql.Timestamp;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.apache.commons.beanutils.PropertyUtils;
import org.apache.commons.lang.StringUtils;
/**
*
* @author Administrator
*
*/
public class QueryCodeAllAction {
private static final long serialVersionUID = 1L;
//
private String methodType;
//
private String params;
// service
private UserPowerService userPowerService;
public String getMethodType() {
return methodType;
}
public void setMethodType(String methodType) {
this.methodType = methodType;
}
public UserPowerService getUserPowerService() {
return userPowerService;
}
public void setUserPowerService(UserPowerService userPowerService) {
this.userPowerService = userPowerService;
}
public String getParams() {
return params;
}
public void setParams(String params) {
this.params = params;
} //
public String queryCode(){
if(methodType == null){
}
else {
//params ：{codeType:bussinessFlag|codeType:bussinessFlag}
// map
Map<String,Object> paramsMap = new HashMap<String, Object>();
// params， | ， ： ，
if(null != params && !"".equals(params.trim())){
String paramsTemp = params.replaceAll("_", ".");
String[] fieldArray = StringUtils.split(paramsTemp, "|");
for(int i = 0 ; i < fieldArray.length ; i++){
String[] fieldArrayTemp = StringUtils.split(fieldArray[i],":");
String key = fieldArrayTemp[0].trim();
String value = fieldArrayTemp.length==1 ? "" : fieldArrayTemp[1].trim();
paramsMap.put(key, value);
}
}
if (pageNo == 0) {
pageNo = 1;
}
if (pageSize == 0) {
pageSize = 20;
}
//
else if("methodType".equals(methodType)){
Page page = userPowerService.findByPage(pageNo,pageSize);
// json ， ... } }
return NONE;
}
}
これでテキストドメインをダブルクリックすると成功します.上のqueryAll.jspのページングは複雑すぎて、後期には良いページング機能モジュールを書いてあげます.