您的位置：首页 > 数据库 > Oracle

Oracle：查看自己当前在RAC的哪个节点上

2012-04-07 13:36 330 查看

项目中，通常会有输入框联想输入的需求，下面是根据jquery-autocomplete组件封装的一个自动补全插件
依赖：1.0 jquery.js

2.0 jquery.autocomplete.js

3.0 jquery.autocomplete.css

ajax请求后台数据，并为输入框绑定 autocomplete事件（封装好的js，在页面可以直接引用）：

/*
* author:changp
* ajax请求后台，初始化数据
*/

/*定义对象*/
var Command = function(inputId,url) {
this.inputId = inputId;
this.url = url;
};
/*向后端获取数据*/
Command.prototype.execute = function() {
var cmdObj = this;
/*申明ajax对象*/
var xhr = null;
var url = this.url;
var arr = [];
for ( var pro in cmdObj) {
var obj = cmdObj[pro];
var value = obj;
if ($.isArray(obj)) {
value = obj.join(",");
}
if (obj && obj.type == "date") {
value = obj.toString();
}
if ($.isPlainObject(obj) || $.isFunction(obj) || pro == "inputId" || pro == "url") {
continue;
}
arr.push(pro + "=" + encodeURIComponent(value));
}
var param = arr.join('&');
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP.1.0");
}
xhr.open("POST", url, false);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var txt = xhr.responseText;
cmdObj.data = eval('('+txt+')');
}
};
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(param);
};
/*自动补全*/
Command.prototype.autocomplete = function(){
var cmdObj = this;
$('#'+cmdObj.inputId).autocomplete(cmdObj.data, {
max: 100,                //列表里的条目数
minChars: 0,            //自动完成激活之前填入的最小字符
width: 200,             //提示的宽度，溢出隐藏
scrollHeight: 400,      //提示的高度，溢出显示滚动条
matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
delay: 10,				//Default: 远程为400 本地10
autoFill: false,        //自动填充
formatItem: function(row, i, max) {  //列表显示
return cmdObj.formatItem(row, i, max);
},
formatMatch: function(row, i, max) { //匹配对比内容
return cmdObj.formatMatch(row, i, max);
},
formatResult: function(row) { //匹配选择结构
return cmdObj.formatResult(row);
}
}).result(function(event, row, formatted) { //选择完成之后回调函数
cmdObj.result(event, row, formatted);
});
};

页面调用实例：

<!DOCTYPE HTML >
<html>
<head>
<title>jquery.autocomplete.js 实例</title>
<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<script type='text/javascript' src='ajax.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
</head>
<body>
<form id="form1">
<div>
用户名称:<input id="name" style="width:200px"/>
购买记录 :<input id="shipcode" style="width:200px"/>
</div>
</form>
<script type="text/javascript">
var cmd = new Command("name","./jsonAction");
cmd.name="changpan";
cmd.pwd = "123456";
cmd.execute();		//加载数据后台数据
cmd.autocomplete(); //自动补全
cmd.formatItem = function(row, i, max){//为每个要显示的项目使用高级标签
if("undefined" != typeof row.name || "undefined" != typeof row.to ){
return "<table width='150px'><tr><td align='left'>" + row.name + "</td><td align='right'><font style='color: #009933; font-family: 黑体; font-style: italic'>约【<font color='red'>" + row.to + "</font>】条记录</font></td></tr></table>";
}
};
cmd.formatMatch = function(row, i, max){//对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的
return row.name;
};
cmd.formatResult = function(row){//和formatItem类似,但可以将将要输入到input文本框内的值进行格式化
//return row.name;
};
cmd.result = function(event, row, formatted){ //选择完毕之后执行的动作
$("#shipcode").val(row.to);
};
</script>
</body>
</html>

后台servlet 代码，返回联想输入列表：

package  com.cheese.framework.web;
import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

public class JsonAction extends HttpServlet {

private static final long serialVersionUID = 1L;

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
JSONArray array = new JSONArray();
array.add("{name: \"pingg\", to: \"1\" }");
array.add("{name: \"pingg\", to: \"2\" }");
array.add("{name: \"pingg\", to: \"3\" }");
array.add("{name: \"pingg\", to: \"4\" }");
array.add("{name: \"wang tao\", to: \"2\" }");
array.add("{name: \"changpan\", to: \"3\" }");
array.add("{name: \"yang tingting\", to: \"4\"}");
array.add("{name: \"li an\", to: \"5\" }");
array.add("{name: \"lin la\", to: \"6\" }");
array.add("{name: \"simon\", to: \"7\" }");
array.add("{name: \"xu mei\", to: \"8\" }");
response.getWriter().write(array.toString());
}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航