╋艺 镇╋╋网站网络|程序语言|Flash╋┣◇网站建设&Web语言 → cognos设计器 利用JavaScript实现任意行、列的锁定


  共有15932人关注过本帖树形打印复制链接

主题:cognos设计器 利用JavaScript实现任意行、列的锁定

美女呀,离线,留言给我吧!
admin
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 司令 亲民勋章
等级:管理员 帖子:3027 积分:27515 威望:0 精华:7 注册:2003/12/30 16:34:32
cognos设计器 利用JavaScript实现任意行、列的锁定  发帖心情 Post By:2011/10/20 11:13:20 [只看该作者]

行、列锁定是客户经常会对报表提的需求,确实,对于一张记录比较多的报表是非常有必要做行、列锁定的。下面的方法实现了任意行、列(排除数据列)的锁定。

接下来说一下,我的实现思路。首先是要通过HTML项目增加一个DIV,包住列表或交叉表,然后通过js控制锁定行、列。基本布局如下图所示

 

其中“DIV开始”HTML项目内容如下

<DIV style="OVERFLOW: auto; WIDTH: 400px;HEIGHT: 350px">

DIV结束内容如下

</DIV>

利用两个HTML项目拼成一个指定大小而且产生滚动条的DIV包住列表,当列表的款或者高超过DIV中设置的高度或宽度时,将产生滚动条。

建议:将HTML项目的说明属性填写清楚,这样很容易看出那个HTML项目是干啥的,当用的HTML项目较多时填写其说明属性还是非常有必要的。

注意:上图是将DIV结束和锁定脚本两个HTML项目放到列表下了,若列表没有分页则脚本能正常执行,若列表存在分页则脚本不会被执行,只有到末页时才能执行。因为默认情况下列表下的内容是在列表的最后一行结束后才调用的(可以在产生分页的列表后加一个图表看看效果)。若处理的列表存在分页,则需要把DIV结束和锁定脚本移动到页脚处,因为页脚不管有没有分页都回生成。如下图

 

接下来找到列表的名称属性,为其设置一个值,这里我们设置为locktable,如下图所示

 

锁定脚本HTML项目内容如下

<style type="text/css">
    .lockRow {
        POSITION: relative;
        border-width: 1px;
        top: expression( this . offsetParent . offsetParent . scrollTop );
        Z-INDEX: 5;
    }

    .lockRow td {
        POSITION: relative;
    }

    .lockColumn {
        Z-INDEX: 4;
        POSITION: relative;
        left: expression( this . parentElement . offsetParent . parentElement . scrollLeft );
    }
    .crossHeader
    {
        Z-INDEX: 6;
        POSITION: relative;
        left: expression( this . parentElement . offsetParent . parentElement . scrollLeft );
    }
</style>
<script>
    function getTable(sortTableId, rvContent)
    {
        var sortTable;
        var tables = rvContent.getElementsByTagName("table");
        for (var i = 0; i < tables.length; i++)
        {
            if (tables[i].getAttribute("LID") == sortTableId)
            {
                sortTable = tables[i];
                break;
            }
        }
        return sortTable;
    }
    function getRVContent()
    {
        var objName = getObjectName();
        return  eval("document.getElementById('RVContent" + objName + "');");
    }
    function getObjectName()
    {
        return document.getElementById("cv.id").value;
    }
    function initLockTable(table_id, lockRows, lockColumns)
    {
        var lockRows = lockRows;
        var lockColumns = lockColumns;
        var table = getTable(table_id, getRVContent());
        table.style.position = "relative";
        var tabRows = table.rows.length;
        table.style.display = "inline";
        //处理表头锁定
        for (var i = 0; i < lockRows; i++)
        {
            table.rows[i].className = "lockRow";
        }
        dealLockCell(table, 0, tabRows, lockColumns, 0)
    }
    function dealLockCell(table, beginRow, rowsLength, lockColumns, spans)
    {
        var lastRowNum = beginRow + rowsLength;
        var rowSpanCount = 0;
        for (var i = beginRow; i < lastRowNum; i++)
        {
            for (var j = 0; j < lockColumns; j++)
            {
                if (table.rows[i].cells[j].type == "datavalue")
                {
                    if (j > 0)
                    {
                        continue;
                    }
                }
                if (i == 0 && j == 0)
                {
                    var crossHeader = table.rows[0].cells[0];
                    crossHeader.className = "ml crossHeader";
                    crossHeader.style.borderWidth = 1;
                    crossHeader.style.borderBottomWidth = 0;
                    for (var k = 1; k < crossHeader.rowSpan; k++)
                    {
                        var nod = crossHeader.cloneNode(true);
                        nod.rowSpan = 1;
                        nod.style.borderTopWidth = 0;
                        nod.style.borderBottomWidth = 0;
                        nod.innerText = " ";
                        table.rows[k].insertBefore(nod, table.rows[k].cells[0]);
                    }
                    j = j + crossHeader.colSpan;
                    i = i + crossHeader.rowSpan - 1;
                    table.rows[i].cells[0].style.borderBottomWidth = 1;
                    crossHeader.rowSpan = 1;
                } else
                {
                    if (table.rows[i].cells[j].rowSpan > 1)
                    {
                        table.rows[i].cells[j].className = "ml lockColumn";
                        rowSpanCount = rowSpanCount + 1;
                    } else
                    {
                        table.rows[i].cells[j].className = "ml lockColumn";
                    }
                }
            }
            if (rowSpanCount > 0)
            {
                i = dealLockCell(table, (i + 1), table.rows[i].cells[0].rowSpan - 1, lockColumns - 1, rowSpanCount);
                rowSpanCount = 0;
            }
        }
        return  beginRow + rowsLength - 1;
    }
    initLockTable("locktable", 2, 2);
</script>


该脚本前面利用CSS设置了行、列、和交叉表头所用到的样式,可以根据实际要求对此进行修改。

JS脚本用到了getTable、getRVContent、getObjectName、initLockTable、dealLockCell这几个函数。其中getTable、getRVContent、getObjectName这几个在一起的报表中就用到了,实际上新增的是initLockTable和dealLockCell

initLockTable是锁定的初始化函数,需要传递三个参数,第一个就是表的名称,即列表或交叉表的名称,第二个参数是锁定的行数,第三个是锁定的列数,若之锁定行,则此参数传0。

dealLockCell是用递归算法来处理列锁定,以此来实现任意数的列锁定,写这个函数还是费了不少劲呢,呵呵。

演示的视频可以在我发的3期参赛报表中下载到http://www.cognoschina.net/club/thread-6943-1-1.html

 

 http://www.cognoschina.net/home/space.php?uid=652&do=blog&id=1092



  
平面设计、网站建设、三维动画、视频制作 联系QQ:114103945  回到顶部