报表js学习笔记

2023-08-24 05:28| 来源: 网络整理| 查看: 265

文章目录 1 改变单元格样式1.1 setTimeout1.2 css1.3 mouseenter、mouseleave、mouseover和mouseout 2 自动滚动与隐藏滚动条2.1 find2.2 style.overflow2.3 var2.4 setInterval2.5 scrollTop 3 自动查询3.1 this 4 清空控件4.1 $.each 5 多数据集实现层式报表5.1 原理5.2 实例5.3 href 6 大数据量查询6.1 splice6.2 inArray6.3 弹出窗口6.3.1 showDialog与show sql

1 改变单元格样式 //鼠标悬停改变单元格样式 setTimeout(function() { $(".REPORT0table td").mousemove(function() { //鼠标经过时，改变当前单元格背景为红色 $(this).css("color", "red"); //鼠标经过时，当前单元格字体加粗 $(this).css("font-weight", "bold"); //鼠标经过时，当前单元格添加下划线 $(this).css("text-decoration", "underline"); }); $(".REPORT0table td").mouseout(function() { //鼠标离开后，恢复当前单元格黑色 $(this).css("color", "black"); $(this).css("font-weight", "normal"); //鼠标离开后，当前单元格取消下划线 $(this).css("text-decoration", "none"); }); $(".REPORT1table td").mousemove(function() { //鼠标经过时，改变当前单元格背景为褐色 $(this).css("color", "#BB9544"); //鼠标经过时，当前单元格字体加粗 $(this).css("font-weight", "bold"); //鼠标经过时，当前单元格添加下划线 $(this).css("text-decoration", "underline"); }); $(".REPORT1table td").mouseout(function() { //鼠标离开后，恢复当前单元格黑色 $(this).css("color", "black"); $(this).css("font-weight", "normal"); //鼠标离开后，当前单元格取消下划线 $(this).css("text-decoration", "none"); }); }, 1000); 1.1 setTimeout setTimeout(code,millisec)//等待多少毫秒后，执行code //setTimeout在for中异步，待学习！ 1.2 css css("propertyname");//返回首个匹配的元素值 css("propertyname","value");//设定该元素的值 css({"propertyname":"value","propertyname":"value",...});//设定多个元素的值 $(this).css//将this转换为jQuery对象，并使用css方法 1.3 mouseenter、mouseleave、mouseover和mouseout

mouseover/mouseout事件支持冒泡，绑定的事件会冒泡到子标签上。 mouseenter/mouseleave事件则只针对所绑定的标签，不会冒泡到子标签上。

摘自爱jQuery：http://www.aijquery.cn/Html/jqueryrumen/129.html 通过实例来演示mouseouver(mouseout)与mouseenter(mouseleave)的区别

2 自动滚动与隐藏滚动条 //滚动 setTimeout(function(){ $("div[widgetname=REPORT2]").find("#frozen-north")[0].style.overflow="hidden"; $("div[widgetname=REPORT2]").find("#frozen-center")[0].style.overflow="hidden"; },100); //隐藏报表块report2的滚动条 window.flag=true; setTimeout(function(){ $("#frozen-center").mouseover(function() { window.flag=false; }) //鼠标悬停，滚动停止 $("#frozen-center").mouseleave(function() { window.flag=true; }) //鼠标离开，继续滚动 var old=-1; var interval=setInterval(function() { if(window.flag){ currentpos=$("#frozen-center")[0].scrollTop;//获取当前滚动条所在位置 if (currentpos==old){ $("#frozen-center")[0].scrollTop=0;//滚动条到底部时返回顶部 } else { old=currentpos; $("#frozen-center")[0].scrollTop=currentpos+1.5; } } },25); //以25ms的速度每次滚动1.5PX },1000) 2.1 find

find("#frozen-north")找到后代frozen-north的元素，即为北边的冻结，在页面上方。 find("#frozen-center")可以找到冻结之外的内容

百度知道：find("#frozen-north")[0] jquery通过ID获取对象加数组下标0表示什么？ goods_obj=$(’#goods_number_’+result.rec_id)[0]; 因为jq选择器返回的是一个类数组对象，而[0] 表示这个对象的第一个元素，其实就是获取到的js dom对象，在你这条代码里面就是id=‘goods_number_’+result.rec_id的html元素

$("#uname").blur(function(){ if($(this)[0].value ==""){ alert(2) } }) //jquery方法 $("#uname").blur(function(){ if($(this).val()==""){ alert(2) } }) //jquery 方法 $("#uname").blur(function(){ if(this.value==""){ alert(2) } }) //上面的三种方法都可以达到你想要的效果。因为 .value 是js的方法，$(this)是jquery的方法， //如果想转换，用js的 .value方法的话，就要用【0】来转化。 //$(this)[0]，这种“jQuery对象”加下标的方式可以将“jQuery对象”转换为“js对象”，这样我们就可以使用“js对象”的属性和方法了； //$(this)，使用$()包装“js对象”，是一种将“js对象”转换为“jQuery对象”的方式，这样我们就可以使用“jQuery对象”的方法了。 //更进一步： //$($(this)[0])，可以再次包装“js对象”为“jQuery对象”，当然可以$($(this)[0])[0]，将“jQuery对象”转换为“js对象 2.2 style.overflow Object.style.overflow="visible|hidden|scroll|auto|inherit" 值描述visible默认。内容不会被修剪，会显示在元素框之外。hidden内容会被修剪，元素框外面的内容不会被显示，浏览器不会显示滚动条。scroll浏览器会显示滚动条，如果需要内容会被修剪。auto内容会被修剪，如果需要则显示滚动条。inheritoverflow 属性的值从父元素继承。 2.3 var

设定window.flag使其初始等于true，后判断鼠标是否在frozen-center上，若在等于true反之等于false 设定old=-1

var是js的一个关键字，它是用来声明变量的。声明一个变量有两种方式：第一种：var num=1。如果在方法中声明，则为局部变量；如果在全局中声明，则为全局变量第二种：num=1。事实上这是对属性进行赋值操作。首先，它会尝试在当前作用域链（如果在方法中声明，则当前作用域代表全局作用域和方法局部作用域）中解析num，如果在任何当前作用域链中找到num，则会对num属性进行赋值，如果没有找到num，他会在全局对象（即当前作用域链的最顶层对象，如window对象）中创造num属性并赋值注意！它并不是声明了一个全局变量，而是创建了一个全局对象的属性由于变量声明自带不可删除属性，比较var num=1跟num=1，前者是变量声明，带不可删除属性，因此无法被删除；后者为全局变量的一个属性，因此可以从全局变量中删除。原文：https://blog.csdn.net/xhf852963/article/details/79416440

2.4 setInterval setInterval(code, milliseconds); setInterval(function, milliseconds, param1, param2, ...) 参数描述code必需。要调用的函数或要执行的代码串。millisec必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。param1, param2,… 可选。传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。 2.5 scrollTop

滚动条位置

3 自动查询 var state = this.options.form.getWidgetByName("state").getValue(); var formSubmit0= this.options.form.getWidgetByName("formSubmit0"); if (state==1){ formSubmit0.setVisible(true) } else { formSubmit0.setVisible(false) } 3.1 this

情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题，你想了解可以自行上网查找。情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象，例子3可以证明，如果不相信，那么接下来我们继续看几个例子。彻底理解js中this的指向，不必硬背

4 清空控件 //清空（重置）全部控件 $.each(this.options.form.name_widgets,function(i,item){ if (item.options.type !=='label') { item.setValue(); } }); //清空（重置）指定控件 //获取supplierID控件 var supplierID = this.options.form.getWidgetByName("supplierID"); //将supplierID控件内容清空 supplierID.setValue(""); supplierID.setText(""); supplierID.reset(); 4.1 $.each

$.each( object, callback ) 参数：object Object类型指定需要遍历的对象或数组。参数：callback Function类型指定的用于循环执行的函数。

var arr2=[['aaa','bbb'],['ccc','ddd'],['eee','fff']]; $.each(arr2,function(i,item){ //两个参数，第一个参数表示下标，第二个参数表示一维数组中的每一个数组 console.log(i+'````'+item);

jQuery中$.each()方法的使用 each() 方法规定为每个匹配元素规定运行的函数。提示：返回 false 可用于及早停止循环。语法 $(selector).each(function(index,element))

参数描述function(index,element)必需。为每个匹配元素规定运行的函数。index选择器的 index 位置element当前的元素（也可使用 “this” 选择器） 5 多数据集实现层式报表 //上一页 var page= $("tr[tridx=0]","div.content-container").children().eq(0).html(); if(page==0) this.setEnable(false); else window.location.href="${servletURL}?reportlet=多数据集层式报表.cpt&page="+page; //设置所在目录 //下一页 var page= $("tr[tridx=0]","div.content-container").children().eq(1).html(); var total=$("tr[tridx=0]","div.content-container").children().eq(2).html(); if(parseInt(page) > parseInt(total)) { this.setEnable(false); } else window.location.href="${servletURL}?reportlet=多数据集层式报表.cpt&page="+page; //设置所在目录 5.1 原理

方法一 BS访问某个cpt模板，报表servlet将会将cpt文件解析成对应的html，报表内容最终转换为一个table，位于id=content-container的div中。由于分页预览只是展现，在这种查看方式下FR没有现成单元格获取方法，可以用jquery语法获取指定单元格，如： $(“tr[tridx=行号]”,“div.content-container”).children().eq(列号) 例如我们要获取某行某列的值，代码是： $(“tr[tridx=行号]”,“div.content-container”).children().eq(列号).html(); 如果我们要修改某行某列的值，代码是： $(“tr[tridx=行号]”,“div.content-container”).children().eq(列号).html(新值); 方法二页面加载结束后的主报表体是一个table对象，每个单元格对应对应 td 对象，里面包含控制该单元格所在位置的id 属性，格式如A1-0-102其中A1即表格单元格代码，只需要用 jQuery 对象属性前匹配符号^=获取单元格td对象，即可获取指定的单元格，同时利用 jQuery 提供的 text()方法来获取和设置单元格的值，即可达到目的。 $(“td[id^=单元格号-”)

5.2 实例 //方法一 var a = $("tr[tridx=2]","div.content-container").children().eq(1).html(); alert("第3行第2列值为："+a); $("tr[tridx=2]","div.content-container").children().eq(1).html(1001); alert("第3行第2列值被修改为1001"); //方法二 var a=$("td[id^=B3-]").text(); alert("B3单元格值为："+a); $("td[id^=B3-]").text(1001); alert("第B3单元格的值被修改为1001"); 5.3 href

javascript中的location.href有很多种用法，主要如下。 self.location.href="/url" 当前页面打开URL页面 location.href="/url" 当前页面打开URL页面 windows.location.href="/url" 当前页面打开URL页面，前面三个用法相同。 this.location.href="/url" 当前页面打开URL页面 parent.location.href="/url" 在父页面打开新页面 top.location.href="/url" 在顶层页面打开新页面如果页面中自定义了frame，那么可将parent self top换为自定义frame的名称,效果是在frame窗口打开url地址此外，window.location.href=window.location.href;和window.location.Reload()和都是刷新当前页面。区别在于是否有提交数据。当有提交数据时，window.location.Reload()会提示是否提交，window.location.href=window.location.href;则是向指定的url提交数据

6 大数据量查询 var value = this.getValue(); //获取当前参数的值 if (value == true) { ceshi.push(a); //将选中的参数a放入窗口 } else if (value == false) { ceshi.splice($.inArray(a, ceshi), 1);//查找出ceshi中的a的位置，并删除 } 6.1 splice arrayObject.splice(index,howmany,item1,.....,itemX) 参数描述index必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。howmany必需。要删除的项目数量。如果设置为 0，则不会删除项目。item1, …, itemX可选。向数组添加的新项目。

返回值

类型描述Array包含被删除项目的新数组，如果有的话 6.2 inArray

$.inArray( value, array [, fromIndex ] )

参数描述value任意类型用于查找的值。arrayArray类型指定被查找的数组。fromIndex可选。Number类型指定从数组的指定索引位置开始查找，默认为 0 6.3 弹出窗口 window.form = this.options.form; var $iframe = $(""); $iframe.attr("src", "${servletURL}?reportlet=14%25E6%2589%25B9%25E9%2587%258F%25E5%25A4%2584%25E7%2590%2586%25E6%2595%25B0%25E6%258D%25AE.cpt&op=write&__showtoolbar__=false"); var o = { title : "客户信息选择", width : 800, height: 300 }; FR.showDialog(o.title, o.width, o.height, $iframe,o); 6.3.1 showDialog与show

最简单的区别为：以form1和form2为例；form1实例化后通过按钮弹出form2实例，如果用show()方法，则弹出的窗体和form1为同一级窗体，即多次点击按钮都可以弹出窗体；如果采用ShowDialog()方法，则弹出来的窗体form2为form1的子窗体，如果form2打开后无法聚焦到form1窗体上；深层里的理解为： ShowDialog()弹出的窗体为模式化窗体； show()弹出的窗体为非模式化窗体；什么是模式化窗体与非模式化窗体的区别： 1.模式化窗体会使程序中断，直到关闭窗体； 2.打开窗体后不能替换到其他窗体； 3.子窗体和父窗体互斥； 4.返回值不同分别为dialogresult和void; 作者：GiveMeFiveYu 原文：https://blog.csdn.net/GiveMeFiveYu/article/details/80602827

sql sql("FRDemo", "select 姓氏||名字 from s雇员 where 雇员ID=" + $$$, 1, 1) //在FRDemo数据库执行语句，其中调用参数，使雇员ID=获取到的ID，获取查询出的第一行第一列元素

SQL(connectionName,sql,columnIndex,rowIndex)：返回的数据是从 connectionName 数据库中获取的 SQL 语句的表中的第 columnIndex 列第 rowIndex 行所对应的元素。 connectionName：数据库名，字符串形式，需要用引号如"FRDemo"； sql：SQL 语句或者数据库存储过程，字符串形式，传参数、条件等可以在此拼接实现； columnIndex：列序号，整型； rowIndex：行序号，整型。

注：行序号可以不写，这样返回值为数据列。

【本文地址】

报表js学习笔记

报表js学习笔记

今日新闻

推荐新闻