87,992
社区成员
发帖
与我相关
我的任务
分享求JQ文本框控件，展示多列和模糊查询
下拉框有一个很大的缺点：只能显示一列，信息不全。如果我想弹出两列或多列供用户选则，那无法实现
所以，求一个JQ文本框控件，功能：
1.点一个文本框，弹出一个表格层，列出数据（多列）
2.选择表格里的一条数据，将数据反填入文本框
3.可对某列模糊查询
求大神们推荐控件
所以，求一个JQ文本框控件，功能：
1.点一个文本框，弹出一个表格层，列出数据（多列）
2.选择表格里的一条数据，将数据反填入文本框
3.可对某列模糊查询
求大神们推荐控件
...全文
请发表友善的回复…
发表回复
qingfengjss 2013-10-30
- 打赏
- 举报
不知道这个怎么样？这是两个页面的a1.html
另外的页面a2.html,
我只会这个，你那个不会
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<br><center>
<center> 用户id: <input type="text" id="cid"></input>
用户名称: <input type="text" id="cname"></input>
<button id="update" align="center" onclick="openwin();">请选择用户</button>
</center><hr>
</body>
<script>
function openwin(){
window.showModalDialog("a2.html",window,"dialogWidth=200px;dialogHeight=110px");
}
function setvalue(cid,cname){
document.getElementById("cid").value=cid;
document.getElementById("cname").value=cname;
}
</script>
</html>另外的页面a2.html,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<table border="1">
<tr>
<td> 选择</td>
<td>用户id</td>
<td>用户名称</td>
</tr>
<tr>
<td> <button id="update" align="center" onclick="viewData('001','深圳华为');">选择</button></td>
<td>001</td>
<td>深圳华为</td>
</tr>
<tr>
<td><button id="update" align="center" onclick="viewData('002','用友软件');">选择</button></td>
<td>002</td>
<td>用友软件</td>
</tr>
</table>
</body>
<script>
function viewData(cid,cname){
var sdata=window.parent.dialogArguments;
//方法一
//sdata.document.getElementById("cid").value=cid;
//sdata.document.getElementById("cname").value=cname;
//方法二
sdata.setvalue(cid ,cname);
window.close();
}
</script>
</html>
我只会这个，你那个不会
江溪浣君 2013-10-26
- 打赏
- 举报
写了，见楼上，有个问题解决不了。
况且，我是用的Asp.net，不用Java
江溪浣君 2013-10-26
- 打赏
- 举报
我是自己写了一个的，但同页面使用多个，选中后的函数会冲突
function MyTable(){
var tab=$("<table>");
this.divO;
this.hasData=false; var dd;
var arrC;
//绑定
this.Bind=function(arrCol,data){
tab.empty();
//设置表头
var trh=$("<tr>").attr("t","h");
$.each(arrCol, function (index, value) {
var th=$("<th>").text(value).appendTo(trh);
});
trh.appendTo(tab);
//绑定数据行
$.each(data,function(index,value){
var tr=$("<tr>");
$.each(value,function(idx,v){
var td=$("<td>").text(v).appendTo(tr);
});
tr.mouseover(function(){
$(this).css("background-color","yellow");
});
tr.click(function(){
var retData=new Array();
$(this).children().each(function(idx,v){
retData.push(v.innerHTML);
});
SelectTableRow(retData);
});
tr.mouseout(function(){
$(this).css("background-color","#E9E9E4");
});
tr.css("cursor","pointer").appendTo(tab);
});
this.hasData=true;
};
this.Show=function(os){
this.divO.css({"position":"absolute","display":"block","border":"thin black double","left":os.left,"top":os.top+20}).append(tab);
};
this.Hide=function(){
this.divO.css("display","none");
};
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>无标题 1</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="mytable.js" type="text/javascript"></script>
<script type="text/javascript">
var t=new MyTable();
var dd=[["zhangsan","24"],["wangwu","21"],["maliu","21"],["bingqi","21"],["hangba","21"]];//ajax获取
$(document).ready(function(){
t.divO=$("#divTest");
$("#txtWuliao").focus(function(){
if(!t.hasData){
var col=["姓名","性别"];
t.Bind(col,dd);
}
t.Show($(this).offset());
});
});
function SelectTableRow(v){
$("#txtWuliao").val(v[0]);
t.Hide();
}
</script>
</head>
<body>
<input type="text" id="txtWuliao" />
<div id="divTest" style="display:none;background-color:white;">
</div>
</body>
</html>
qingfengjss 2013-10-24
- 打赏
- 举报
自己写吧，兄弟。代码应该也不多。但是问什么要用js呢。java不是很好做。
似梦飞花 2013-10-24
- 打赏
- 举报
点文本框弹出div 在div里放置你的table 查询的话遍历table里的所有元素 反填入文本框这个自不必说了吧
哪有那么多完全满足你要求的控件啊
你可以在已有的控件上组合实现你的功能
