快速查询 jsp页面和 js方法

jsp：

 1 <td class="SearchControl" nowrap="nowrap">
 2     <script type="text/javascript" src="/xnh/commons/js/util/combobox1.js"  ></script>
 3     <input id="FORM1_JGDM" name="FORM1_JGMC" type="text" comboxWidth="400"
 4         comboxHeight="250" 
 5         command="dictItem.selectJGDM"
 6         url="/xnh/config/torganization/getExterHospOrg.do?ALLORG=ALL"
 7         paramName="keyword" pageSize="10" value="" oldValue=""
 8         columnName="机构代码,机构名称" fieldName="FORGCODE,FORGNAME" columnWidth=""
 9         class="TextBox" style=" 120px;"
10         onmousedown="javascript:ComboBox_ShowDownList(this,event)"
11         onkeydown=javascript:ComboBox_OnKeyDown(this,event)
12         onfocus=javascript:ComboBox_OnFocus(this,event)
13         onblur=javascript:ComboBox_OnBlur(this,event)
14         required="false" 
15         dataType=""
16         errMessage="" script="" skip="false" autocomplete="off" />
17 </td>

js：

  1 var comboBoxHandle=null;
  2 var selection=null;
  3 var lastValue=null;
  4 function ComboBox_ShowDownList(sender, e){
  5     var container = $get(sender.id + "Container");
  6     if (container)
  7     {
  8       if (container.style.display=="block") return;
  9     }
 10     selection=sender;
 11     e.cancelBubble = true;
 12     //设置isFocus为true
 13     sender.setAttribute("isFocus",true);
 14     ComboBox_Init(sender, e);    
 15     ComboBox_StartWebRequest(sender);
 16 }
 17 function ComboBox_OnFocus(sender,e)
 18 {    
 19     selection=sender;        
 20     sender.select();
 21     sender.setAttribute("isFocus",true);    
 22 }
 23 /**
 24  * 隐藏container页面
 25  * @param {Object} sender
 26  * @param {Object} e
 27  * @return {TypeName} 
 28  */
 29 function ComboBox_Hidden(sender,e)
 30 {    
 31     //获取container页面
 32     var container = $get(sender.id + "Container");
 33     //若不存在就return
 34     if (!container) return;
 35     var table = container.childNodes[1].childNodes[0];
 36     if (table)
 37     {
 38         table.parentNode.removeChild(table);        
 39     }
 40     window.setTimeout( function()
 41             {
 42                 container.style.display = "none";
 43             }, 100);
 44 
 45 }
 46 function ComboBox_OnBlur(sender,e)
 47 {
 48     alert("blur");
 49     sender.lastValue=null;
 50     var container = $get(sender.id + "Container");
 51     if (!container) return;
 52 //    var table = container.childNodes[1].childNodes[0];
 53 //    if (table)
 54 //    {
 55 //        table.parentNode.removeChild(table);        
 56 //    }    
 57     sender.setAttribute("isFocus",false);    
 58     ComboBox_Hidden(sender,e);
 59 }
 60 function ComboBox_Init(sender, e)
 61 {
 62     var container = $get(sender.id + "Container");
 63     if (!sender.getAttribute("init"))
 64     {
 65         if(!container)
 66         {
 67             //创建 div container appendChild在body下
 68             container = document.createElement("div");
 69             container.id = sender.id + "Container";
 70             container.style.display = "block";    
 71             container.className = "ComboBoxContainer";
 72             container.onmousedown=function(e){if (e){event=e};event.cancelBubble = true};
 73             if (sender.getAttribute("comboxWidth"))
 74             {
 75                container.style.width = sender.getAttribute("comboxWidth") + "px";
 76             }
 77             if (sender.getAttribute("comboxHeight"))
 78             {
 79                container.style.height = sender.getAttribute("comboxHeight") + "px";              
 80             }
 81             document.body.appendChild(container);
 82             //创建div containerHeader appendChild在container下，为第一个子节点
 83             var containerHeader = document.createElement("div");
 84             containerHeader.className = "Header";
 85             container.appendChild(containerHeader);    
 86             //创建div containerContent appendChild在container下，为第二个子节点
 87             var containerContent = document.createElement("div");            
 88             containerContent.className = "Content";
 89             containerContent.style.height=container.offsetHeight-containerHeader.offsetHeight-1+"px";
 90             container.appendChild(containerContent);
 91             //创建div iframe  appendChild在container下，为第三个子节点
 92             var iframe=document.createElement("iframe");
 93             iframe.className="MaskIframe";
 94             container.appendChild(iframe);    
 95             iframe.style.height=containerContent.offsetHeight+"px";
 96         }
 97         sender.setAttribute("init", true);
 98         //鼠标在页面其他地方点击，container页面会消失
 99         $addHandler(document, "mousedown", function()
100         {
101             ComboBox_Hidden(sender);
102         });
103     }
104     //显示出container页面
105     container.style.display = "block";
106     //定位container页面位置
107     var left=$GetLeft(sender);
108     var top=$GetTop(sender)+sender.offsetHeight;
109     
110     if ((left+container.offsetWidth)>$getDocument().offsetWidth)
111     {        
112        left=$getDocument().offsetWidth-container.offsetWidth;
113     }     
114     if ((top+container.offsetHeight)>$getDocument().offsetHeight)
115     {
116        top=top-container.offsetHeight-sender.offsetHeight;
117     }
118     container.style.left = left + "px";
119     container.style.top = top + "px";
120 }
121 /**
122  * 键盘
123  * @param {Object} sender
124  * @param {Object} e
125  */
126 function ComboBox_OnKeyDown(sender, e)
127 {
128     selection=sender;
129     var container = $get(sender.id + "Container");
130     if ((!container)&&(e.keyCode==13))
131     {
132         if ((sender.value!=sender.getAttribute("oldValue"))&&(sender.getAttribute("required") == "true"))
133         {
134            e.cancelBubble = true;
135         }
136         return false;
137     }
138     //创建container 和子节点 标题块、内容块、iframe
139     ComboBox_Init(sender,e);
140     //获取container
141     var container = $get(sender.id + "Container");
142     //获取 内容块 table
143     var table = container.childNodes[1].getElementsByTagName("table")[0];
144     if (table)
145     {
146         var rowIndex=0;
147         if (table.getAttribute("rowIndex"))
148         {
149             rowIndex = parseInt(table.getAttribute("rowIndex"));
150         }    
151         var pageSize=sender.getAttribute("pageSize")?parseInt(sender.getAttribute("pageSize")):20;    
152         var pageCount=sender.getAttribute("pageCount");
153         //通过 e.keyCode 判断点击的是哪个键
154         switch (e.keyCode)
155         {
156             //向上
157             case 38:
158                 e.cancelBubble = false;
159                 //先判断 下一个index是否存在
160                 if (table.rows[rowIndex - 1])
161                 {
162                     //改变现在class样式
163                     if (table.rows[rowIndex]) table.rows[rowIndex].className = "TableRow";
164                     table.rows[rowIndex - 1].className = "TableRowOverSpeed";
165                     //设置rowIndex
166                     table.setAttribute("rowIndex", rowIndex - 1);
167                     //判断 rowIndex-1 行到内容快的顶部的高度 小于 内容块的滚动条卷起的长度
168                     if (table.rows[rowIndex - 1].offsetTop<container.childNodes[1].scrollTop)
169                     {
170                         //内容块的滚动条卷起的长度 = rowIndex-1 行到内容快的顶部的高度
171                        container.childNodes[1].scrollTop=table.rows[rowIndex - 1].offsetTop;
172                     }
173                 }
174                 return;
175             //向下
176             case 40:
177                 e.cancelBubble = false;    
178                 //获取pageIndex 当前页号
179                 var pageIndex=sender.getAttribute("pageIndex")?parseInt(sender.getAttribute("pageIndex")):1;
180                 //判断 下一个行号是否存在
181                 if (table.rows[rowIndex + 1])
182                 {
183                     //改变当前行号 和下一个行号的数据行的class样式
184                     table.rows[rowIndex].className = "TableRow";
185                     table.rows[rowIndex + 1].className = "TableRowOverSpeed";
186                     //设置 rowINdex
187                     table.setAttribute("rowIndex", rowIndex + 1);
188                     //判断 下一个行号到内容块的顶部距离+数据行的高度 > 内容块滚动条卷起的长度+内容块的高度
189                     if ((table.rows[rowIndex + 1].offsetTop+table.rows[rowIndex + 1].offsetHeight)>(container.childNodes[1].scrollTop+container.childNodes[1].clientHeight))
190                     {
191                         //内容块滚动条的卷起的长度 = 下一个行号到内容块的顶部距离
192                        container.childNodes[1].scrollTop=table.rows[rowIndex + 1].offsetTop;
193                     }
194                     
195                 }
196                 //查询下一页数据
197                 else if (pageIndex<pageCount)
198                 {
199                     pageIndex++;
200                     sender.setAttribute("pageIndex",pageIndex);
201                     ComboBox_StartWebRequest(sender);
202                 }
203                 return;
204             //键enter
205             case 13:
206                 e.cancelBubble = false;                
207                 if (table.rows[rowIndex])
208                 {    
209                     //选择改行
210                     table.rows[rowIndex].select();
211                     //设置oldValue值
212                     sender.setAttribute("oldValue",sender.value);
213                 }        
214                 else
215                 {            
216                     //若没有值，并且新值和旧值不同，且为必填项
217                     if (sender.value!=sender.getAttribute("oldValue")&&(sender.getAttribute("required") == "true"))
218                     {
219                        e.cancelBubble = true;
220                     }                    
221                 }
222                 //container 页面隐藏
223                 container.style.display = "none";
224                 return;
225         }
226     }
227     else if (e.keyCode==13)
228     {    
229         container.style.display = "none";    
230         alert("code"+":"+sender.value+":"+sender.getAttribute("oldValue"));
231         if (sender.value!=sender.getAttribute("oldValue")&&(sender.getAttribute("required") == "true"))
232         {
233             
234            e.cancelBubble = true;
235         }
236         return false;
237     }
238     getData(sender);
239 }
240 var isLoad=false;
241 var _checkHandle;
242 function getData(sender)
243 {
244     //设置 timeout
245     window.setTimeout(function (){prepairData(sender)},3000)
246 }
247 //
248 function prepairData(sender)
249 {
250          //若存在setTimeout 就清理掉，若没有就定义一个  
251         if (_checkHandle)
252         {
253             window.status="_checkHandle";
254             window.clearTimeout(_checkHandle);
255         }
256         _checkHandle=window.setTimeout(function (){checkData(sender)},300);
257     
258 }
259 
260 function checkData(sender)
261 {    
262     //若这次输入的值和上次的不同
263     if (sender.value!=sender.lastValue)
264     {
265     //再次发送请求
266       LoadData(sender);
267     //新的value值替换旧的value
268       sender.lastValue=sender.value;
269     }
270 }
271 //再次请求数据
272 function  LoadData(sender)
273 {
274     sender.setAttribute("pageIndex",1);
275     var container = $get(sender.id + "Container");
276     var table = container.childNodes[1].childNodes[0];
277     if (table)
278     {
279         //内容块table存在就先剔除掉，也就是先剔除掉原先查询的值
280         table.parentNode.removeChild(table);
281     }
282     ComboBox_StartWebRequest(sender);
283     if ((sender.value!="")||(sender.getAttribute("EmptyIsLoad")))
284         {
285     }    
286 }
287 /**
288  * ajax请求
289  * @param {Object} sender
290  */
291 var comboxReqeust=null;
292 function ComboBox_StartWebRequest(sender)
293 {
294     if (comboxReqeust!=null)
295     {
296         comboxReqeust.Abort();
297     };
298     //获取pageIndex、pageSize值
299     var pageIndex=(sender.getAttribute("pageIndex")?sender.getAttribute("pageIndex"):1);
300     var pageSize=(sender.getAttribute("pageSize")?sender.getAttribute("pageSize"):8);
301     //发出请求
302     comboxReqeust = new $WebRequest(baseUrl+sender.getAttribute("url"), 
303         sender.getAttribute("paramName") + "=" 
304         + encodeURIComponent(sender.value)+"&CURPAGE="+pageIndex+"&pageIndex="
305         +pageIndex+"&pageSize="+pageSize+"&PAGESIZE="+pageSize,
306     function(result)
307     {
308         ComboBox_EndWebRequest(sender, result);
309     },null,false);
310     comboxReqeust.Start();
311 }
312 /**
313  * 显示值
314  * @param {Object} sender
315  * @param {Object} result
316  */
317 function ComboBox_EndWebRequest(sender, result)
318 {
319     //
320     if (!sender.getAttribute("isFocus")) return;
321     var container = $get(sender.id + "Container");    
322     //创建标题行
323     var headerTable = container.childNodes[0].childNodes[0];
324     if (!headerTable)
325     {
326         //创建标题行table
327         headerTable=document.createElement("table");
328         headerTable.setAttribute("border", "0px");
329         headerTable.cellPadding = "0px";
330         headerTable.cellSpacing = "0px";        
331         headerTable.style.width="100%";            
332         container.childNodes[0].appendChild(headerTable);
333         //添加行   insertRow(-1) -1表示追加最后一行
334         var header=headerTable.insertRow(-1);
335         header.className="TableHeader";    
336         //给标题行header添加表格cell
337         var headerCell=header.insertCell(-1);
338         headerCell.className="TableHeaderCell";                
339         headerCell.noWrap=true;
340         headerCell.style.width="25px";
341         headerCell.innerHTML="&nbsp;&nbsp;";
342         //给表格填充值、设置相关属性
343         var columnNames=sender.getAttribute("columnName").split(",");
344         var columnWidths=sender.getAttribute("columnWidth").split(",");
345         for(var i=0;i<columnNames.length;i++)
346         {            
347             var headerCell=header.insertCell(-1);
348             headerCell.className="TableHeaderCell";                
349             headerCell.noWrap=true;
350             headerCell.align="center";
351             if (columnWidths[i])
352             {
353                headerCell.style.width=columnWidths[i];
354             }
355             headerCell.innerHTML=columnNames[i];            
356         }    
357     }
358     //创建内容行
359     var table = container.childNodes[1].childNodes[0];
360     if (!table)
361     {
362         var pageSize=sender.getAttribute("pageSize")?parseInt(sender.getAttribute("pageSize")):20;
363         var rowCount=result.totalCount?result.totalCount:result.totalCount;
364         var pageCount=Math.ceil(rowCount/pageSize)+1;    
365         sender.setAttribute("pageCount",pageCount);
366         sender.setAttribute("rowCount",rowCount);
367         //创建内容table
368         table=document.createElement("table");
369         table.setAttribute("border", "0px");
370         table.cellPadding = "0px";
371         table.cellSpacing = "0px";        
372         table.style.width="100%";        
373         table.style.display="none";
374         container.childNodes[1].appendChild(table);    
375     }
376     //获取lastIndex
377     var lastIndex=table.rows.length-1;
378     //在遍历result
379     if (sender.getAttribute("OnDataBind"))
380     {    
381         eval(sender.getAttribute("OnDataBind"))(sender,result);
382     }
383     else
384     {
385        ComboBox_DataBind(sender,result);
386     }
387     
388     table.style.display="block";
389     var rows=result.data;
390     if (!rows) return;
391     if (rows.length>0)
392     {
393         table.setAttribute("rowIndex", lastIndex+1);
394         container.childNodes[1].scrollTop=table.rows[lastIndex+1].offsetTop;    
395     }
396 }
397 function ComboBox_ItemSelected(item,e)
398 {
399     eval(selection.getAttribute("command"))(selection,item.object);
400     ComboBox_Hidden(selection);
401 }
402 function ComboBox_DataBind(sender,result)
403 {
404     if (!result) return;
405     var container = $get(sender.id + "Container");    
406     var headerTable = container.childNodes[0].childNodes[0];
407     var table = container.childNodes[1].childNodes[0];
408     
409     var lastIndex=table.rows.length-1;
410     var rows=result.data;
411     if (!rows) return;
412     var fieldNames=sender.getAttribute("fieldName").split(",");
413     var aligns=new Array();
414     if (sender.getAttribute("align"))
415     {
416         aligns=sender.getAttribute("align").split(",");
417     }
418     var dataTypes=new Array();
419     if (sender.getAttribute("dataTypes"))
420     {
421         dataTypes=sender.getAttribute("dataTypes").split(",");
422     }
423     for (var i=0;i<rows.length;i++)
424     {
425         //table下创建row
426         var row=table.insertRow(-1);
427         row.className=(i==0?"TableRowOverSpeed":"TableRow");    
428         row.onmouseover=function (){if (this.className!='TableRowSelected') this.className='TableRowOverSpeed'};
429         row.onmouseout=function (){if (this.className!='TableRowSelected') this.className='TableRow'};
430         row.onmousedown=function (e){if (e){event=e};event.cancelBubble=true;ComboBox_ItemSelected(this,event);};
431         //rwo select 单击方法
432         row.select=function (){ComboBox_ItemSelected(this,event);};
433         row.object=rows[i];
434         //创建 ”序列“ 列
435         var cell=row.insertCell(-1);
436         cell.className="TableCellIndex";
437         cell.innerHTML=i+lastIndex+2;
438         cell.style.width="30px";
439         cell.align="center";
440         
441         for (var j=0;j<fieldNames.length;j++) 
442         {
443             //创建表格cell
444             var cell=row.insertCell(-1);
445             cell.className="TableCell";    
446             //创建表格cell宽
447             var width=headerTable.rows[0].cells[j+1].clientWidth;
448             cell.style.width=width+"px";
449             //设置align
450             if (aligns[j])
451             {
452                 cell.align=aligns[j];
453             }
454             //获取值
455             var value=rows[i][fieldNames[j]];
456             cell.title = rows[i][fieldNames[j]];
457             if (value)
458             {
459                if (dataTypes[j]=="float") value=parseFloat(value).toFixed(4);
460             }
461             //填充值
462             cell.innerHTML="<div style='overflow:hidden;"+width+"px;height:100%'>"+(value?value:"&nbsp;")+"</div>";
463         }
464     }
465 }

相关阅读:
node.js的安装与第一个hello world、node.js的初始化
 微信小程序组件学习中
 jq 滚轮监听事件
 数据库的优化（转）
jquery zTree的基本用法
 Linux常用命令大全
 软件架构与设计百度网盘的pdf电子书籍
 项目：IT资源共享资源（登录后端）<2>
项目：IT资源共享资源（登录前端）<1>
Node简单服务器开发
原文地址：https://www.cnblogs.com/liujie-e2/p/7204738.html

快速查询 jsp页面 和 js方法

快速查询 jsp页面和 js方法