找回密码
 立即注册

QQ登录

只需一步,快速开始

Tracy.Liu 讲师达人认证 悬赏达人认证 活字格认证
论坛元老   /  发表于:2018-8-30 13:19  /   查看:7003  /  回复:0
本帖最后由 Tracy.Liu 于 2018-9-12 10:19 编辑

很多时候,我们需要直接对表格进行编辑,进行数据地逐行添加且合并后显示。

逐行添加
其中一种方法就是开启表格编辑和添加新行的功能。
image.png163025817.png

但是这种方式会有一个问题,可能会让有强迫症的小伙伴不能接受,那就是,开启添加新行后,表格就会默认出现一行空行
image.png860056152.png

那该怎么办呢?这里还有另一种方式实现表格逐行添加。
    开启表格编辑功能,页面中放置一个按钮,给其添加表格操作命令,如下图:
      image.png87253111.png

     这样就可以实现,在点击添加按钮,才会出现一行空行。但是,这样还是会有点问题,我们来看下下图      添加表格新行有边框.gif
     表格会一直有个最外层边框,很不美观。那如何解决这个问题呢?
      1,把表格设置成无边框;
      2,把第一列空出来,并设置列宽为1;
            image.png411673888.png
      3,给列头和第一列加上边框,完成。
             image.png617692260.png

     这里需要注意的是,当添加行出过多时,就会出现横向和纵向滚动条,这个问题的解决办法在 这个帖子 中有解答哦~

自动合并:
当我们输入完新行中的数据,想要让他和之前首列信息相同的行的自动合并,该怎么做呢?大家一定首先会想到活字格自带的自动合并功能,但是不知道大家还记不记得,自动合并功能仅针对没有开启编辑等功能的表格中使用哦~
image.png59759825.png

那么这个时候我们就要想想别的办法啦~我们可以这么做~
   首先,在页面上放置一个“刷新”按钮,这个按钮的功能是对表格按照需要合并的列进行升序排列。
       image.png69729918.png

   然后,在编辑表格页面加载时命令中添加如下代码,实现自动合并。
       image.png566210326.png
  1. var grid = Forguncy.Page.getListView("表格1")._grid;
  2. grid._listviewData.visibleColumns[1].columnInfo.AllowAutoMerge = true;
  3. grid._listviewData.visibleColumns[2].columnInfo.AllowAutoMerge = true;
复制代码
大功告成!最终效果我们一起来看看~
表格逐行添加.gif.gif

工程文件: 福利demo - 逐行添加.fgcc (1.64 MB, 下载次数: 348)





0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部