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事件,就可以实现动态删除指定行数据。以上也是博主在项目实际应用开发中,主要用到的两种删除行的方式,并跟后台数据实现联动,完成前台和后台数据的同步删除。

  • 1
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论

打赏作者

丿潇湘丶书笛

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值