- 浏览: 171372 次
- 性别:
- 来自: 福州
文章分类
最新评论
-
mncc:
太好了!!!Mark一下!不过貌似那个冒泡的还少个右下角吧? ...
Google Maps 图标地址收藏 -
ivorytower:
去年5月捡了命回来,现在不评论那些豆腐渣工程……
汶川地震留给我们什么?单单建什么地震纪念馆是没有用的 -
lgx2351:
wtusmchen 写道blog写的不错啊,以后多过来学习:) ...
js学习笔记2-函数 -
wtusmchen:
blog写的不错啊,以后多过来学习:)
js学习笔记2-函数
在自定义grid中,如果一个grid的列很多,窗口无法显示这么长的内容,且我们一般把grid每一行按操作按钮(如编辑删除按钮)放在每一行的最后一列。这时候用户要要操作某一行的数据,如要做“删除”操作时,就要用鼠标拉动水平滚动条,拉动到能看到最后一列的时候再进行点击操作。这就显得比较麻烦了。这时候,右键某一行,把这行最后的按钮内容构造成右键的显示内容,就可以方便地进行操作了。
整体的思路:create一个div,把grid行最后的按钮内容构造成右键的内容,执行最后一行的按钮的onclick事件即可。
主要的代码如下:
/** * 构造grid的右键菜单 * author:liugx */ //orgCellColor存放点击行的原始颜色值 ConRightMenu.orgCellColor = ""; ConRightMenu.clickRow = ""; function ConRightMenu(){ } ConRightMenu.prototype ={ cancelRight:function(){ event.returnValue=false; event.cancelBubble=true; }, getEventElement:function(clickObject){ var evt = Event.getEvent(); return (evt)?(event.target || event.srcElement):clickObject; }, getTrObj:function(){ var oCh = ""; try { if(DOMModel.type()==1){ oCh = conRightMenu.getEventElement().parentElement; }else if(DOMModel.type()==2){ oCh = Event.findElement(evt,"tr"); } }catch(e){ _alert(e.message); return ""; } return oCh; }, changeClassForTD:function(trObj){ //先清空其它的td底色 if(trObj.parentElement){ var allTDObj = trObj.parentElement.getElementsByTagName("TD"); for(var j=0;j<allTDObj.length;j++){ if(allTDObj[j].style.backgroundColor.toUpperCase()=='#DCDCDC'.toUpperCase()){ allTDObj[j].style.backgroundColor = ConRightMenu.orgCellColor; } } } var trChildNodes = trObj.childNodes; //设置tr的底色 for(var i=0;i<trChildNodes.length;i++){ if(i==0){ ConRightMenu.orgCellColor = trChildNodes[i].style.backgroundColor; } trChildNodes[i].style.backgroundColor = '#DCDCDC'; } }, buttonClickFun:function(itemId){ var trObj = $(ConRightMenu.clickRow); if(trObj){ var childNodes = trObj.lastChild.childNodes; for(var i=0;i<childNodes.length;i++){ if(childNodes[i].id == itemId){ childNodes[i].fireEvent("onclick"); } } } }, consButtonHtml:function(trObj){ var result = ""; result += "<table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"; var childNodes = trObj.lastChild.childNodes; var childNodesLen = childNodes.length; for(var i=0;i<childNodesLen;i++){ var outerHtml = childNodes[i].outerHTML; var onclickHtml = outerHtml.substring(outerHtml.indexOf("onclick"),outerHtml.length-1); var itemId = childNodes[i].id; result += "<tr onmouseover='this.className=\"mouseOverGrid\";' onmouseout='this.className=\"mouseOutGrid\";'"; result += " onclick='conRightMenu.buttonClickFun(\""+itemId+"\");"; result += "$(\"right_reslut_div\").style.display=\"none\"'><td>"; var tdImg = document.createElement('img'); var tdImgUrl = childNodes(i).currentStyle.backgroundImage.replace("url(\"",""); tdImgUrl = tdImgUrl.replace("\")",""); tdImg.src = tdImgUrl; result += tdImg.outerHTML; result += "</td><td>"+childNodes[i].title+"</td></tr>"; if(i<childNodesLen-1){ result += "<tr><td colspan='2'><div class='rowSplit'></div></td></tr>"; } } result += "</table>"; return result; }, buildRightMenu:function(){ conRightMenu.cancelRight(); var trObj = conRightMenu.getTrObj(); if(trObj){ ConRightMenu.clickRow = trObj.id; var buttonHtml = conRightMenu.consButtonHtml(trObj); if(!$("right_reslut_div")){ var right_res_div = document.createElement('div'); right_res_div.id = "right_reslut_div"; }else{ right_res_div = $("right_reslut_div"); } right_res_div.innerHTML = buttonHtml; right_res_div.style.background = '#DCDCDC'; right_res_div.style.padding = "1 1 1 1"; right_res_div.style.border = "solid #C0C0C0 1px"; right_res_div.style.position = 'absolute'; right_res_div.style.left = event.clientX + geometry.getHorizontalScroll() + 'px'; right_res_div.style.top = event.clientY + geometry.getVerticalScroll() + 'px'; right_res_div.style.width = 100 +'px'; right_res_div.style.height = trObj.lastChild.childNodes.length*18 +'px'; if(!$("right_reslut_div")){ document.body.appendChild(right_res_div); } right_res_div.style.display = ''; conRightMenu.changeClassForTD(trObj); } }, display_right_div:function(){ if($("right_reslut_div")){ if($("right_reslut_div").style.display==''){ $("right_reslut_div").innerHTML = ''; $("right_reslut_div").style.display = 'none'; } } } } var conRightMenu = new ConRightMenu();
分析以上代码如下:
1、
//orgCellColor存放点击行的原始颜色值 ConRightMenu.orgCellColor = ""; ConRightMenu.clickRow = "";
orgCellColor和clickRow分别存储的是点击行的原始背景颜色值和点击行的id,前者的作用是右键点击某一行设置了这行的背景值后再右键点击另一行时,把之前的那行的原始背景值再赋值给它;后者是得到点击某行的id值,这在设置右键按钮的事件中有很重要的作用。因为右键后显示的div的按钮与grid的按钮是不一样的,如果前者的onclick事件也和后者一样执行一个函数的话,那么是不行的。因为grid的按钮执行的函数里用到的event.srcElement等有关event事件的元素都与右键div的按钮的event事件的元素不一样,如果右键div的按钮执行grid的按钮的函数,就会出错。所以,我们解决方法是执行grid按钮的fireEvent("onclick")方法。这就要求能够取得到右键点击grid那行的按钮元素。通过clickRow得到tr的id,就可以定位到点击grid的那行的每个按钮元素了。可能有些抽象,大家认真看下代码就会明白了。
2、getTrObj()函数得到点击事件的那行tr这个obj。得到它后就可以定位到我们关心的任何东西了。注意这里的:Event.findElement(evt,"tr");和getEventElement()都很好重用。
3、changeClassForTD()用于设置右键某行后的背景颜色,因为右键的行要与其它行区分开来,所以用上背景颜色会比较直观。这里要注意的,右键某行时要把之前右键某行的保存的原始背景色赋值上去,这在前面的第一点的orgCellColor也讨论过了。这里通过trObj.parentElement.得到tr外面的table元素,再通过table元素的getElementsByTagName("TD")得到所有的td元素,如果td的背景色是#DCDCDC时则说明它是之前右键的那行,把它赋值为原始的值。这里要注意用了比较的两方都用了toUpperCase来得到颜色值,还要注意用backgroundColor,而不是background。
4、buttonClickFun()方法指定了右键按钮点击时执行的事件函数。写这个实现时发了挺多时间,走了弯路。本来想通过grid的每个按钮的id来得到每个按钮,但构造每个grid按钮的id名发了好多时间。后来想到,用如之前第一点说的用clickRow得到右键的那行,保存下来后。就可以得到这行下面的每个grid按钮了。
5、consButtonHtml()主要是通过自定义grid的按钮解析它们的html来得到右键内容。为什么要那样解析,其中前台jsp的自定义的写法如下:
<self:tag_grid tag_name='VOU_RECORD_GRID' is_right_menu = "true" custom_button=" <button title='编辑' class='gridBtnEdit' id='grid_custom_button_edit' onclick='vouRecordJsMgr.preEditVouRec();'> <button title='删除' class='gridBtnDel' id='grid_custom_button_del' onclick='vouRecordJsMgr.delVouRec(1);'> "></self:tag_grid>
上面的custom_button=""的内容就是我们要解析和构造的。
同时,用到的css如下:
.mouseOverGrid{ background-color:#C0C0C0; } .mouseOutGrid{ background-color:#DCDCDC; } .rowSplit { height: 3px; background: url(Image/m_splitLine.gif) repeat-x; font-size: 0px; margin: 0 2px; }
6、buildRightMenu()是构建右键菜单的主要生成代码。它主要做了三件事:一是取得右键的行的id即ConRightMenu.clickRow;第二件事是通过consButtonHtml()取得构造右键div的html,并设置这个div的属性,如style属性等;第三件事是设置右键行的背景色。其中设置style属性是为了美观和正确的定位。要注意的是left和top值要加上滚动条的值,因为鼠标的位置取的是文档坐标。代码如下:
function Geometry(){} Geometry.prototype = { getHorizontalScroll:function(){ var result = 0; // All browsers but IE if (window.innerWidth) { result = window.pageXOffset; } // for IE 6 when there is a DOCTYPE if (document.documentElement && document.documentElement.clientWidth) { result = document.documentElement.scrollLeft; } // for IE4, IE5, and IE6 without a DOCTYPE if (document.body.clientWidth) { result = document.body.scrollLeft; } return result; }, getVerticalScroll:function(){ var result = 0; // All browsers but IE if (window.innerWidth) { result = window.pageYOffset; } // for IE 6 when there is a DOCTYPE if (document.documentElement && document.documentElement.clientWidth) { result = document.documentElement.scrollTop; } // for IE4, IE5, and IE6 without a DOCTYPE if (document.body.clientWidth) { result = document.body.scrollTop; } return result; } } var geometry = new Geometry();
7、display_right_div()方法是当右键点击body时把右键隐藏掉。
以上大致介绍了自定义grid里用右键来实现功能菜单的操作过程,总体的过程就是那样了,希望对大家会有帮助。
最终的效果如下:
发表评论
-
在一个定时器里频繁发ajax请求
2011-04-11 10:07 1731在一个定时器里频繁发ajax请求,最好设置一个全局变量,当请求 ... -
前台开发总结
2011-01-12 10:35 7691、如果在频繁地发送ajax请求,最好在前面的请求发送完成返回 ... -
TD中长串英文字母不能自动换行而汉字却可以自动换行
2010-12-23 10:06 1911例如:aaaaaaaaaaaaaaaaaaaaaaaaaaaa ... -
Google Maps 图标地址收藏
2010-11-27 10:46 2777Google Maps 图标 - ... -
js乱码
2010-05-30 16:08 01)在同一个工程下没有问题,可是如果跨工程的话,且引入的js有 ... -
ajax请求提供接口的讨论
2009-12-26 15:33 1027要提供一个查询某点周边的最近设施的功能给同事,在gis端的实现 ... -
ie8与ie6取form的讨论
2009-12-16 10:49 1368多frames下,在ie6下通过frames[i]为取得某个f ... -
把一个jsp分为两个div布局记录
2009-12-15 16:41 5584一个jsp页面想分成左右两块分开显示两块内容。这种效果很不错, ... -
js取整数四舍五入
2009-11-21 22:08 3383http://blog.csdn.net/Feiin/arch ... -
读“javascript权威指南”笔记(更新中。。。)
2009-11-14 13:00 0第一章: 第二章: 第三章: 第四章: 第五章: 第 ... -
grid拖动列头改变列宽
2009-10-21 17:19 1562grid中,当某一单元格的内容很多时,要能够拖动grid标题行 ... -
js常用功能-drag功能总结
2009-09-18 13:50 1192在做web开发中,拖动一个元素是很常见的功能,特别是对于浮动层 ... -
常用功能-tip相关知识总结
2009-09-18 08:48 1198在应用开中很常用的功能是tip,比如鼠标放在某个需要说明的元素 ... -
js学习笔记4-事件和事件处理
2009-09-16 22:18 9841. 总述: 本章将讲三种完全不同的不兼容的事件处理模型 ... -
构造结果集实现类似grid显示
2009-09-16 20:24 866在做应用开发中,最经常的操作是到后台数据库去获取数据,在前台用 ... -
js学习笔记3-构造函数、类和原型
2009-09-06 16:18 26543. 构造函数、类和原型总述:对象是我们很熟悉的,常在程序中用 ... -
gird分页时form与url参数的探讨
2009-09-05 22:35 1139大家可能很常用一个查 ... -
js学习笔记2-函数
2009-09-02 23:01 13762. 函数 2.1函数直接量函数直接量是用作表达式,而不是用作 ... -
下拉提示文本框
2009-08-24 18:46 1676文本框在当用户输入时,常常需要把相近的信息提示给用户,以方便用 ... -
js学习笔记1-对象和数组
2009-08-19 23:03 8411. 对象和数组 总述对象 ...
相关推荐
5G通信行业、网络优化、通信工程建设资料。
299-煤炭大数据智能分析解决方案.pptx
使用说明: 1、各月工资表,已用公式设置完毕,请在AI1单元格填入月份本表自动显示数据,您再按实际情况稍加修正,工资就完成了! 2、使用时,请把一月份工资表中公式的数据,按你的实际情况修改,之后把一月份工资表复制到2至12月就行了。以后再用时参阅第一条说明。 3、养老保险、失业保险、医疗保险、住房公积金 自动生成,但各单位的比例不同,请自行修改公式中的参数。 4、AK 列至 BD 列是报税资料,自动生成。 5、“四联工资单”只须输入员工编号与选择月份,便可自动取数;请根据需要任选。 6、“工资条”全部自动生成;有单行与双行两种,请任选使用。使用工资条时,请在《个税报告》表的V9单元格选择月份。 7、《扣缴个人所得税报告表》自动生成,请在V9单元格选择月份。请不要随意改动。 8、加班工资、考勤应扣,按每月30天计算;养、失、医、房 项目提取基数与比例亦应按单位规定进行修改。 9、各表均设了保护,但未设密码,您尽可撤消,做您想作的事。 10、打印工资表时,可将不需用的列
5G通信行业、网络优化、通信工程建设资料
5G通信、网络优化与通信建设
网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信息的宣传和管理就很关键。系统化是必要的,设计网上系统不仅会节约人力和管理成本,还会安全保存庞大的数据量,对于信息的维护和检索也不需要花费很多时间,非常的便利。 网上系统是在MySQL中建立数据表保存信息,运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时,也能及时通过数据输入的有效性规则检测出错误数据,让数据的录入达到准确性的目的,进而提升数据的可靠性,让系统数据的错误率降至最低。 关键词:vue;MySQL;SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
199-袁骏毅:新形势下医院数据安全治理应对实践.pdf
毕业设计:基于SSM的mysql_信息类课程教学知识管理系统(源码 + 数据库) ssm信息类课程教学知识管理系统开发 采用 ssm框架技术,java语言,mysql数据库 前台+后台的模式开发 前台界面:W1 后台界面:CC 内容页面:P4 前台: 用户注册(手机号,用户名,姓名,登录用户名,密码,备注) 用户登录,找回密码,设置新密码 网站公告查看 课程查看(注册用户登录后,可以查看非公开课,用户不登录,可以查看公开课),点击查看课程详情,课程名称,授课专业,课程简介等,可以下载课程,以word或者PDF形式 知识卡片查看:点击课程后,可以查看该课程里的知识卡片,知识卡片分为文本,图片,视频3种类型的知识卡片。登录后可以收藏知识卡片 后台: 管理员 管理员管理 教师信息管理(姓名,学校,职级,绑定邮箱,电话,用户名,密码等) 注册用户审核 网站公告管理 课程信息管理(可以上传课程,word或者pdf形式) 知识卡片管理 系统管理 教师 个人资料修改 创建课程 创建知识卡片 注册用户 个人资料修改 我收藏的知识卡片
网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信息的宣传和管理就很关键。系统化是必要的,设计网上系统不仅会节约人力和管理成本,还会安全保存庞大的数据量,对于信息的维护和检索也不需要花费很多时间,非常的便利。 网上系统是在MySQL中建立数据表保存信息,运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时,也能及时通过数据输入的有效性规则检测出错误数据,让数据的录入达到准确性的目的,进而提升数据的可靠性,让系统数据的错误率降至最低。 关键词:vue;MySQL;SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
计算机二级备考资源丰富多样,可通过权威机构官网、在线教育平台、专业培训机构网站等获取学习资料。结合多种资源学习,备考更高效。
夭月.zi删除p
基于c语言的ktv歌曲系统.zip
6.docx
网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信息的宣传和管理就很关键。系统化是必要的,设计网上系统不仅会节约人力和管理成本,还会安全保存庞大的数据量,对于信息的维护和检索也不需要花费很多时间,非常的便利。 网上系统是在MySQL中建立数据表保存信息,运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时,也能及时通过数据输入的有效性规则检测出错误数据,让数据的录入达到准确性的目的,进而提升数据的可靠性,让系统数据的错误率降至最低。 关键词:vue;MySQL;SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
基于提供的字段介绍,我们可以设计一个基础的工厂工资明细表Excel模板结构如下: | 序号 | 姓名 | 工种 | 工作天数 | 工时费/天 | 小计(正常工资) | 加班时间 | 加班费率/小时 | 小计(加班工资) | 预借 | 合计(实发工资) | 签字 | 备注 | | ---- | ---- | ---- | -------- | ---------- | -------------- | -------- | -------------- | --------------- | ---- | -------------- | ---- | ---- | | 1 | | | | | | | | | | | | | | 2 | | | | | =D2*C2
当前园区的主要工作是如何在资源 缺的背景下,创造更多的价值,实现园区经济转型、社会和谐。利用电子信息技术的深度应用与融合,提升园区政府的管理、服务、引导能力,提升企业的研发设计、生产制造、经营管理的效率,提升园区运行的智能、顺畅程度,提升园区居民生活的便利水平,是智慧园区建设的主要任务。 智慧园区由基础设施、信息资源、业务应用、运行保障四个层次组成 通过构建新一代信息基础设施,为园区内的组织和个人提供安全、高速、便捷的网络环境,实现园区内的部件、人员随时随地接入网络,奠定了泛在感知的网络基础。新一代的信息基础设主要包括两个层面,全面覆盖的感知层和泛在的传输网络层。 智慧应用体系是智慧园区建设重要的部分,也是可以直接提升园区管理服务能力、生产生活环境的重要构成,智慧应用体系分析、整合园区运行核心系统的各项关键信息,从而对于包括民生、环保、公共安全、城市服务、工商业活动在内的各种需求做出智能响应,使园区运行更加智慧顺畅,为人类创造更美好的城市生活。智慧应用体系包括一个支撑平台和四个应用体系。
5G通信行业、网络优化、通信工程建设资料
由ASAM组织提出的诊断数据交互格式,全称为Open Diagnostic Data Exchange。即ODX规范ISO-22901,主要用于描述整车以及ECU的诊断数据,方便供应商与OEM、产品开发与售后间的数据交互。ODX使用统一建模语言(UML)图描述,数据交互格式使用可扩展标记语言(XML)存储记录数据。便于承载从设计、开发、测试、生产及售后维护的全流程工作。
CSF405 EN 2001673 P0802183-01, Rev B CHAINSAW (TOP HANDLE) OPERATOR MANUAL
Gif动画录制软件是一款方便好用的小软件,使用此工具,您可以记录屏幕的选定区域,网络摄像头的实时提要或草图板上的实时图形。之后,您可以编辑动画并将其另存为gif,apng,视频,psd或png图像。