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="width: 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.οnmοusedοwn=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=" "; 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.οnmοuseοver=function (){if (this.className!='TableRowSelected') this.className='TableRowOverSpeed'}; 429 row.οnmοuseοut=function (){if (this.className!='TableRowSelected') this.className='TableRow'}; 430 row.οnmοusedοwn=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:"+width+"px;height:100%'>"+(value?value:" ")+"</div>"; 463 } 464 } 465 }
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
