JS实现报表隐藏选定行数据（删除行数据）

在报表中，我们一般可以通过删除行按钮，删除某一行的数据，将这一行数据在前端界面上删除，这个是系统自带的；

 

当然我们也可以通过其他多种方式，删除/隐藏界面上的行数据，同时也将对应的数据主键传到后台，在后台数据库也删除对应的记录。通过自定义JS事件，实现动态隐藏行或删除行，使得前端界面的使用体验感非常圆滑，后台数据处理也可以正常进行，将前端和后台的数据记录保持一致，前后台相互打通，保证系统数据的精确度，系统的使用圆滑性，保证系统的运算逻辑准确无误。如此一来，报表开发时，就可以不受系统本身按钮的限制，可以自行定义删除内容，自定义删除事件的触发位置，从而自行设计报表样式

（一）控件-点击删除界面动态行数据

1、报表界面设计：（上面是数据录入模块，下面是删除模块，有效果图，有兴趣可以私聊博主了解开发明细）

2、javascript事件编辑

在控件上设置点击事件，写入JavaScript事件，代码如下：

var $td=$(this.$btn).parents("td")[0];
var rownum =contentPane.curLGP.getTDRow($td)-1;

var xqid=contentPane.getCellValue(1,rownum);
MR.$mmd_dps("gzmian_xmkfxq_delete_kfxq_data",{xqid:xqid});

3、效果图：（博主用在实际项目开发过程中的需求和工作记录，增删改查，一应俱全）

（二）文本-点击删除界面动态行数据

1、报表界面设计：

2、javascript事件编辑

在文本上添加超级链接，添加javascript事件。

代码如下（删除行和数据库对应数据）：

var that=this;
layer.confirm('是否删除确认删除？',function(index){
    setTimeout(function(){
    MR.$mmd_dps("gczj_nijian_delete_njgc_data",{fid:fid,nj_fid:nj_fid,nj_structCode:nj_structCode,nj_id:nj_id},true);
    $($(that.contentPane.curLGP.currentTDCell).closest("tr")).hide();
    alert("删除成功！");
    },0)
})

3、效果图：

 

 

如上，通过在文本或控件中，写入对应的JavaScript事件，就可以实现动态删除指定行数据。以上也是博主在项目实际应用开发中，主要用到的两种删除行的方式，并跟后台数据实现联动，完成前台和后台数据的同步删除。