报表js学习笔记

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	内容会被修剪，如果需要则显示滚动条。
inherit	overflow 属性的值从父元素继承。

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.youkuaiyun.com/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	任意类型 用于查找的值。
array	Array类型 指定被查找的数组。
fromIndex	可选。Number类型 指定从数组的指定索引位置开始查找，默认为 0

6.3 弹出窗口

window.form = this.options.form;
var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>");
$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.youkuaiyun.com/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：行序号，整型。

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