行式报表实现插入追加及删除行后报表序号自增

需求背景:

行式报表与普通报表相比就有插入,追加,删除行的功能,能够轻松的完成对数据库表的增删改操作。行式报表的流水号可以给新增记录的赋值,自动生成流水号。

行式报表的流水号是按照一定的递增或者递减规则,在当前值的基础上进行递增或者递减后算出来的值。因此若定义流水号为递增,对插入和追加行的流水号都是递增的,对删除行流水号的当前值也不会减少。

客户提出这样一种需求,对行式报表保留一个序号字段,该序号根据目前行式报表记录的排列顺序由1开始递增排列。该序号字段需要保留至数据库,报表展现的时候需要根据该序号字段进行排序。默认的流水号只会影响插入或追加行的流水号单元格值,不会改变已有行的单元格的值。

比如原本有11条记录,如需在第5行记录前插入一条记录,那么当前报表的序号就变成了1,2,3,4,12,5,6,7,8,9,10,11,这和客户要求的递增排列需求不符。

实现思路:

1. 报表序号自增的单元格需要设置流水号,根据当前增加行的行号计算返回的流水号值。并且在返回流水号之前,需要重新遍历扩展的序号单元格,保证已存在的记录的序号是由1开始递增的。故需要自定义一个流水号js函数,并在序号自增的单元格调用该流水号函数。

2. 重新删除行js函数,在删除行后,重新遍历序号单元格,更新删除行到扩展区的最后一行的序号单元格值,保证剩余的记录的序号由1开始递增。

实现代码:

1. 自定义流水号函数部分代码:

function flowGenerate( ) {

var currRow = li_currCell.parentElement;

var currCell1 = li_currCell;

var prow = currRow;

if( !prow.ndr ) prow = document.getElementById( prow.pid );

var first = _groupFirstRow( prow );

var table=li_currTbl;

var last = _groupLastRow( prow );

var delRows=0;// 用于记录共删除了行数

var delRowsBefore=0;//用于记录插入行之前删除行数

//遍历所有记录,修改序号单元格的值

for( var i = first+2; i <= last; i++ ) {

var row = li_currTbl.rows[i];

//若当前遍历行已经被删除,需要修改delRowsdelRowsBefore

if( row.deleted ) {

alert(‘del’);

delRows=delRows+1;

if(row.rowIndex<currRow.rowIndex){delRowsBefore=delRowsBefore+1}

continue;

}

var cell = row.cells[0];

li_currCell=cell;

cell.innerText=i-delRows-1;

cell.value=i-delRows-1;

}

//根据当前行行号和当前行前删除的行数计算流水号并返回

return currRow.rowIndex-delRowsBefore-1;

}

需要在报表模板中调用该流水号js

2. 重新删除行js函数,部分代码如下:

function _deleteRow_N( table ) {

if(confirm(“确定删除吗?“)==true){

if( table.currCell == null ) {

alert( __AAA );

return;

}

var row = table.currCell.parentElement;

if( !row.isDetail ) {

alert( __BBB );

return;

}

var oldCellIndex = table.currCell.colNo;

var index = row.rowIndex;

var currCellRowIndex = index;

……

tmpIndex = index;

//从当前行开始到扩展区的最后一行,修改序号所在单元格的值为当前值减1

while( tmpIndex<lastIndex ) {

tmpIndex++;

var r = table.rows[ tmpIndex ];

if( r == null || !r.isDetail ) break;

if( r.isFirst ) {

if( r.cells[0].sc == srcCell ) {

r.cells[0].innerHTML=r.cells[0].innerHTML-1;

}

else break;

}

}

……

}

3. 报表发布页面中需要在自定义按钮中,通过onClick事件调用自定义的删除行js函数来达到功能控制的目的。

<a href=”#” onClick=”_insertRow_N(report1);return false;”>自写插入行</a>

<a href=”#” onClick=”_appendRow_N(report1);return false;”>自写追加行</a>

<a href=”#” onClick=”_deleteRow_N(report1);return false;”>自写删除行</a>

实现效果:

demo通过修改插入,追加,删除行js函数和流水号配合使用,实现行式报表在插入追加删除行后仍保持序号自增的效果。

插入行:

在第六行前插入行:

插入后效果:

添加行效果:

删除行效果:

删除第七行:

删除后效果:

从上面的实现效果可以看出,在行式报表中插入,删除,追加行后仍然保持了序号字段(雇员ID)的由1开始自增效果,保证用户在行式报表中页面填入的记录顺序能够在数据库中按序号保存,报表查询展现时能按序号升序排列展现。

热门文章