- 浏览: 692031 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (239)
- 系统架构设计 (16)
- java collection framework (2)
- java分布式 (4)
- java多线程 (0)
- 故障处理及调优 (16)
- 软件开发过程及管理 (28)
- OS (5)
- 常用算法 (3)
- design pattern (8)
- transaction (7)
- java apps (48)
- corejava (7)
- java and DB (10)
- cache (0)
- webservice (14)
- web前端 (25)
- 报表 (4)
- 日志系统设计 (3)
- Oracle (4)
- mysql (11)
- xml (11)
- 数据源配置管理 (3)
- 企业数据存储 (4)
- php (2)
- 测试 (1)
最新评论
-
orangebook:
对于初学者来说,这样编写可能会误导,理解更烦锁。
观察者模式(发布-订阅) -
liudajiang:
呵呵 startThreads(rand ...
实践缩小Java synchronized 粒度 -
zengwenbo5566:
谢谢博主,学习了
解决getOutputStream() has already been called for this response -
u011335423:
大神厉害啊 可以了
解决getOutputStream() has already been called for this response -
xiang37:
...
解决getOutputStream() has already been called for this response
html页面联动菜单比较常见,一般情况下,点击一个radio或者change一个select,根据业务逻辑的需要,页面动态显示一些不同的选择项。
下面是最近项目中一个常用的场景,处理方式比较简单,但很实用。程序处理逻辑:选择不同的radio,通过java程序到DB中进行查询,得到不同的结果,替换原来的选择项,显示到页面上。
<script type="text/javascript"> function levelClick(levelvalue){ var checkedInfoStr = ""; var id = "Level Type"; var forcastNode = document.getElementById(id); var inputnode = forcastNode.getElementsByTagName("input"); if(levelvalue=="pl"){ document.getElementById("leveltypeId_pl").checked=true; }else if(levelvalue=="qt"){ document.getElementById("leveltypeId_qt").checked=true; } for (var i = 0; i < inputnode.length; i++) { if ( inputnode[i].checked == true ){ checkedInfoStr = inputnode[i].value; break; } } ltypeValue1 = checkedInfoStr; var centerid ="Original Center"; var centerNode = document.getElementById(centerid); var inputnode = centerNode.getElementsByTagName("input"); for (var i = 0; i < inputnode.length; i++) { if ( inputnode[i].checked == true ){ checkedInfoStr += "#"; checkedInfoStr += inputnode[i].value; break; } } //这里发出去的信息的格式是ltype#centername的形式 creatXMLHttpRequest(); //alert(checkedInfoStr); var url="tiggeCon_LtypeAndCenter2.dhcc"; xmlHttp.open("POST",url,true); //xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.onreadystatechange=handleStateChangeLevel; //alert(checkedInfoStr); xmlHttp.send(checkedInfoStr); } function handleStateChangeLevel(){ if(xmlHttp.readyState==4){ levelChange(); } } function levelChange(){// 从服务器提取数据 var msg = xmlHttp.responseText; //得到返回的信息 //alert(msg); var id = "pressid"; var pressNode = document.getElementById(id); pressNode.innerHTML = ""; pressNode.innerHTML=msg; if(ltypeValue1 == "sl"){ document.getElementById("pressureid").checked=true; document.all["Pressure Level"].style.display='none'; } else{ document.all["Pressure Level"].style.display=''; } } </script> <tr> <td align="left" nowrap="nowrap"> <input id="leveltypeId_qt" name="leveltypeId" value="var1" onclick="levelClick('qt')" type="radio">single level products </td> <td align="left" nowrap="nowrap"> <input id="leveltypeId_pl" name="leveltypeId" value="var2" onclick="levelClick('pl')" checked="checked" type="radio">pressure level products </td> </tr>
服务端处理:
//根据DB查询结果构造页面div private String test(String ltype,String cccc){ StringBuffer sb=new StringBuffer(); sb.append("<div id=\"Pressure Level\" style=\"width:605px;text-align:center;\" height=\"auto\">"); sb.append("<fieldset style=\"font-size: 14px;\"><legend>Pressure Level</legend>"); sb.append("<table class=\"u_fie_table\"><tbody>"); String[][] pressurelevel = getPlevelByLtypeAndCCCC(ltype,cccc);//数据库查询 if(pressurelevel!=null){ int ys = pressurelevel.length % 6; int rowcount = 0; int colcount = 6; if(ys == 0){ rowcount = (pressurelevel.length)/colcount; }else{ rowcount = ((pressurelevel.length)/colcount)+1; } for(int i = 0; i < rowcount; i++){ sb.append("<tr>"); if(i == rowcount-1 && ys != 0){ colcount = ys; } for(int j = 0; j < colcount; j++){ int z = i * 6 + j; sb.append("<td align=\"left\" nowrap=\"nowrap\">"); sb.append("<input id=\"pressureid\" name=\"pressureid\" value="); sb.append(pressurelevel[z][0]); sb.append(" type=\"checkbox\">"); sb.append(Integer.parseInt(pressurelevel[z][0])+"hPa"); sb.append("</td>"); } sb.append("</tr>"); } } sb.append("<tr><td width=\"100%\" colspan=\"6\" align=\"center\">"); sb.append("<style type=\"text/css\">"); sb.append(".u_fie_tabent{ width:100%;text-align:center;border-top:dotted 1px #d9e4ee;padding-top:5px;margin-top:10px;}"); sb.append(".u_fie_tabent a{text-decoration: none;text-decoration:none;display:inline-table;padding:2px 5px;margin:2px 5px;border:solid 1px #d9e4ee;height:20px;line-height:18px;color:#666;background:#eef6fc;}"); sb.append(".u_fie_tabent a:hover{background:#0066FF;color:#fff;}"); sb.append("</style>"); sb.append("<div class=\"u_fie_tabent\" >"); sb.append("<a href=\"javascript:checkAll(document.forms[0].pressureid);\">Select All</a>"); sb.append("<a href=\"javascript:uncheckAll(document.forms[0].pressureid);\">Clear All</a>"); sb.append("</div>"); sb.append("</td></tr>"); sb.append("</tbody></table>"); sb.append("</fieldset></div>"); .... return sb.toString(); }
发表评论
-
div的显示与隐藏
2013-06-19 16:49 1006今天做个小功能(2009-3-6):将取得的数据显示在一js ... -
学习网页标准的5个步骤
2013-06-18 18:57 901我想每一个刚刚接触web标准的人都会问这样的问题,我就 ... -
request.getContextPath()详解
2013-06-18 18:56 906<%=request.getContextPath( ... -
MIMIE类型大全
2013-06-18 18:55 994获取MIME:HttpContext.Current.Re ... -
js操作Dom生成动态表格
2010-07-15 17:19 1427项目中有个js的功能需求: 数据库表中有两个字段记录数据的两 ... -
eclipse+ext+spket安装
2010-07-07 16:25 1902参考网上相关文章,经过多次尝试才搞定这几个组合的安装,比较繁琐 ... -
Ajax简介
2010-06-30 15:14 8791、ajax技术的背景 ... -
js取服务器端时间,并提供动态下载链接
2010-06-30 14:57 2831最近项目中有这样一个需求: 页面动态刷新获取数据库中符合条件 ... -
用js进行正负小数及范围判断
2010-06-30 14:56 2146最近项目中遇到一个js判断:允许输入正负数、小数,并且输入值有 ... -
js时间比较(yyyymmdd)
2010-06-30 14:54 2884yyyymmdd格式时间比较实例,参考如下代码: & ... -
ajax的两种常用调用方式
2010-06-30 14:51 954方式1: //请求js <script langua ... -
XMLHttpRequest参数提交方式
2010-06-30 14:49 3658一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接 ... -
js获取HTML DOM节点元素方法总结
2010-06-30 14:42 1407在Web应用程序特别是Web2 ... -
extJS-itemselector的使用
2009-11-24 16:38 8303上图是富客户端界面中常用的选择方式,下面是项目中的一段示 ... -
extJS-动态改变baseParams
2009-10-12 22:18 9797项目中遇到一个问题:双击导航栏树节点,根据该树节点的属性ID在 ... -
ExtJS布局之border实例
2009-09-18 14:59 8862border布局是常见的布局样式,下面是一个实际项目的示例,比 ... -
客户端显示Store-Ext.data-Store
2009-09-04 20:38 2160store是一个为Ext器件提供record对象的存储容器,行 ... -
客户端记录显示缓存的刷新-ExtJS
2009-09-04 20:31 2052其实这是个非常简单的问题,仅供ExtJS初学者参考。 ... -
ExtJS分页条件参数传递
2009-08-19 10:30 5501这两天还在忙活那个可恨的ext的项目,说它可恨,通过解决这个小 ... -
EXTJS 查询数据,分页显示时传送自定义参数,添加控件的任何事件模板
2009-08-19 10:08 3188var querytext = new Ext.form.Te ...
相关推荐
网页上常用到一种Select联动菜单。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-ld-menu-codes/ 具体代码如下: <html> <head> <title>简单的Select联动...
本文实例讲述了JS简单实现...JS联动菜单,简单代码实现JS多级Select联动菜单,也就是大家常用的一款菜单,Select联动状态的菜单,网页上经常见到的效果,希望大家能用得上。 运行效果截图如下: 在线演示地址如下: ...
4. 两级下拉列表框联动菜单? 5. java中如何把一个目录下的文件移到另一个指定的目录? 6. 制作表格线? 7. jsp如判别一个字符在A到Z之间? 8. 得到一浮点数小数点后4位,如何写以函数截取为两位 9. 整型转字符? 10. ...
1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页...
1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页...
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
两级下拉列表框联动菜单? 5. java中如何把一个目录下的文件移到另一个指定的目录? 6. 制作表格线? 7. jsp如判别一个字符在A到Z之间? 8. 得到一浮点数小数点后4位,如何写以函数截取为两位 9. 整型...
实例163 省市县级联动菜单 194 实例164 应用下拉列表选择所要联机的网站 196 实例165 可输入字符的下拉菜单 197 实例166 设置下拉列表的默认值 198 实例167 设置下拉列表的样式 199 实例168 下拉列表打开窗口 200 ...
实例163 省市县级联动菜单 194 实例164 应用下拉列表选择所要联机的网站 196 实例165 可输入字符的下拉菜单 197 实例166 设置下拉列表的默认值 198 实例167 设置下拉列表的样式 199 实例168 下拉列表打开窗口 200 ...
02 什么是异常处理及异常处理的两种方式对比 03 多分支与万能异常 04 异常处理的其他内容 05 什么时候用异常处理 06 什么是socket 07 套接字发展及分类 08 基于tcp协议的套接字编程 09 socket底层工作原理解释 10 ...
修正:插件和模块管理页面简介无法识别html的问题 修正:表单中有name为action的表单项时,url获取不正确的问题 修正:某些情况下,无法读取模块配置文件信息的问题 修正:在PHP7.3下long2ip方法报错的问题 修正...
在ASP.NET页面中推荐使用覆写(Override)而不是事件处理(Event Handler) 常用编码工具类,支持base64,md5,des,crc32 也谈谈技术面试 在C#里把ArrayList转换为Array 或 把Array转换为ArrayList C# 2.0 在.NET 2.0中...
9.8.2 在单页面应用中使用卡片布局实现“页面”切换 / 496 9.9 本章小结 / 498 第10章 重构后的grid / 500 10.1 grid的基类及其构成 / 500 10.1.1 概述 / 500 10.1.2 表格面板的运行流程:ext.panel.table / ...
导入结果会丢失精度问题优化更多操作按钮左侧移入内容闪现消失情况修复主子表提交中列隐藏后出现列偏移问题单据打印网页时通过hidden-print隐藏元素表格销毁清除记住选择数据增加表格动态列示例代码生成选择主子表...