dwz中的选择器选完数据鼠标放在输入框显示全部数据

dwz框架学习笔记之（六）

项目中的一些模块需要选择器功能，而选择的数据分为多选和单选，而我做的就是在两个输入框，一个是选择数据带回单个数据，另一个是选择带回多个数据，带回后都要显示在输入框。由于选择器已经做好了的，我只要复制代码就行，但是其中有些代码不懂，改的时候也遇到不少问题，比如别人是多选，带回多个数据，而我的是单选，带回一个数据（虽然自己也有一个是带回多个数据），就需要小幅度修改数据，但是后台除了修改SQL语句，其他都一样。还有不同的是，我一条数据要显示多个字段，这需要在往后面传数据代码，修改代码出：

οnclick="appendSel('${certificateInfo.name}| ${certificateInfo.certificateOwner}','${certificateInfo.id}')"

完成选择器还是很有难度，因为要考虑到翻页后数据还要保存不变，和翻页功能的实现，这需要吧刚开始选中的数据保存下来，第二开始选择，把之前的数据删除。如果让我做不知道要花多少时间。当数据带回输入框后，由于是多选，数据会很多，这样需要做个类似提示功能，鼠标放在输入框，数据就会按照表格显示在操作员面前。要实现这功能，需要使用：jQuery hover事件，和定位鼠标的位置，以及动态生成表格和里面的数据，除此之外还需要把数据格式为：a|b,c|d,,,,切割变成××××××：a   ×××××××××：b这种表格格式。一开始我思考的是先动态生成<tr><td></td></tr>标签，在往里面赋值，这样的方法是<td id="aa"></td>再通过$("#aa").text(填需要赋的值)；但是老师说没有这种比较，直接把值赋值在<td>标签上，代码如下：

//动态在<tbody id="cUl">添加数据
$("#cUl",navTab.getCurrentPanel()).append('<tr><td align="center">'+data[0]+'</td><td align="center">'+data[1]+'</td></tr>');

现在想起来当时自己怎么这么傻，怎么没想到直接赋值给<td>标签。为此还花了一天时间，不过觉得时间没有白费，感觉自己对于jQuery又有更懂了一点。下面给页面的代码。

显示数据列表的div：

<div class="panel" id="cPanel" defh="100" style="width:270px;display:none;position:absolute;top:120px;left:525px;">
<span style="white-space:pre">	</span><h1>证件信息列表</h1>
	<div>
	<span style="white-space:pre">	</span><table class="list" width="98%">
	<span style="white-space:pre">		</span><thead>
				<tr>
				<span style="white-space:pre">	</span><th align="center">证件名称</th>
					<th align="center">证件所属人</th>
				</tr>
			</thead>
			<tbody id="cUl">
						
			</tbody>
		</table>
	</div>
</div>

控制这些的jQuery代码：

<script>
<span style="white-space:pre">	</span>$(document).ready(function(){
	<span style="white-space:pre">	</span>$("#nextActorCnname2",navTab.getCurrentPanel()).hover(function(e){
			if($("#nextActorCnname2").val()!=""){
			<span style="white-space:pre">	</span>//得到鼠标位置
				var paX=$("#pDiv",navTab.getCurrentPanel()).offset().left;//父容器的位置
			<span style="white-space:pre">	</span>var paY=$("#pDiv",navTab.getCurrentPanel()).offset().top;
			<span style="white-space:pre">	</span>var x =  (e.pageX-paX)+"px";
			<span style="white-space:pre">	</span>var y=(e.pageY-paY+50)+"px";
						
<span style="white-space:pre">				</span>//每次鼠标放上去，清除原来的数据
				$("#cUl").empty();
				//将选择的数据带回赋给变量 iVal
				var iVal=$("#nextActorCnname2",navTab.getCurrentPanel()).val();
				//以“,”为间隔，将数据拆分成一组组，格式为：a|b,c|d...等等，赋值给变量 setOfData
				var setOfData=iVal.split(",");
				//判断换是否选择带回数据,不为空执行下面语句
				if(iVal!=""){    
					for(var k=0;k<setOfData.length;k++){
					<span style="white-space:pre">	</span>//以“|”为间隔，将数据拆分成一组组，格式为：a b,c d...等等，赋值给变量 data
					<span style="white-space:pre">	</span>var data=setOfData[k].split("|");
						//动态在<tbody id="cUl">添加数据
						$("#cUl",navTab.getCurrentPanel()).append('<tr><td align="center">'+data[0]+'</td><td align="center">'+data[1]+'</td></tr>');
					}
				}
			<span style="white-space:pre">	</span>$("#cPanel",navTab.getCurrentPanel()).css("left",x);
				$("#cPanel",navTab.getCurrentPanel()).css("top",y);
				$("#cPanel",navTab.getCurrentPanel()).show();
			}
		},
		function(){
		<span style="white-space:pre">	</span>//鼠标不放在输入框，不显示
			$("#cPanel",navTab.getCurrentPanel()).hide();
	<span style="white-space:pre">	</span>}); 	
<span style="white-space:pre">	</span>});
</script>

其实代码这些网上都能找到，但是思考的方式是找不到的，需要正确的思考问题，这是需要好好学习。页面效果图：