一款类excel可进行显示、在线编辑的纯js表格TableShow控件

       在进行前端显示设计时,传统的方法是以分页显示,逐条提取后修改及保存,非常不利于用户连贯阅读及在线修改。因此,本人将类似excel的一些table表格在线卷动显示、修改及集中保存功能进行了尝试,封装成了一个纯js控件,只通过一句代码进行调用,将数据库查询结果集进行显示和添加、修改后集中返回json集进行保存,达到节约时间和连贯操作的目的。

        其实功能如下:

       一、本控件设计封装了一个纯javascript表格显示js类控件,可以直接接口mysql数据库结果集查询,调用只需一行语句。控件具有自定义显示颜色、自定义显示宽高、类似excel上下左右滚动翻页、按字段排序、选择、修改、添加、插入、删除、鼠标调整列宽、双击(按空格键)直接编辑、自动返回编辑json数据,一键导出excel、自适应显示等功能。为力求网页下载简单方便快速,没有加入华丽图片背景(可后期叠加),全调用只有一个文件,js压缩下来只43k。
       二、tableshow控件为纯js编写,只有一个tableshow.min.js文件,只需一行调用代码即可。
       三、为了便于用户操作使用,说明tableshow使用方法和注意事项,在控件中,在多处进行了操作使用帮助及提示,点击表格的“操作-帮助”即可显示帮助信息。

        可以进行的编辑操作功能如下:
        1.按各标题进行排序,点击标题栏对应列即可按该列标题名称进行排序;
        2.可以直接对单元格进行编辑,在选中单元格条件下(选中中单元格变蓝色),可以通过点右侧“编辑按钮”,或者双击单元格,或者按键盘Enter键三种方式下进入单元格编辑状态(连续三种方式操作会进入多文字编辑状态,此时编辑框会扩展);
        3.处于编辑状态或选择状态时,当点两个其他单元格,将退编辑状态,或者按“Esc”也将退编辑及选择状态;
        4.当对某行的单元格有实现修改动作后,该行颜色会变成红色,另外最后一行默认添加的显示“待填”的行,也会显示红色,表示需要进入修改输入,当输出上传时,所以红色行在“只对修改”保存方式下都会进行保存输出;
       5.选择打勾功能,在第一个标题“序号”下,当点击黑色下三角图形时就会进入“全选、全不选、反选和重写序号”功能面板;
       6.在各主要操作功能界面,当鼠标放置2秒以上,就会显示各功能具体操作介绍;
       7.输出前请选择保存方式,输出是按保存方式进行下载后,用excel或wps打开时会有提示文件损坏信息,不用管它,点“是”打开就行;
       8.当将鼠标放于标题分界坚线或序号列下分界线时,鼠标会变成可以左右拉动或上下拉动的形状,此时可以按下左键不放情况下对单元格宽度进行调整,以便显示出隐藏的文字;
       9.默认情况下,表格为紧凑显示方式,此时全部列自动缩在显示框内,没有水平滚动条,当改选全展型时,为所有列根据列内容大小全部显示,隐藏部分可通过水平滚动条展示;
      10.当某行有修改时,该行颜色为红色,当选择“只对修改”方式时,只保存输出红颜色行,当选择方式为“选择打勾”方式时,按行前打勾行数进行保存输出,选择“全部覆盖”时,全部行数保存输出;
      11.当处于编辑状态时,操作Home区四个键可以上下左右移动编辑单元格,按“Delete”移到左边单元格进行编辑,按“PageDown”移到右边单元格进行编辑,按“Home”移到上面单元格进行编辑,按“End”移到下面单元格进行编辑;
     12.可通过在标题栏右键时(作用于点击位标题处),调出标题编辑面板,可对标题进行“增、删、改”操作,对于设计空表或修改已存表都有积极作用;
     13.当鼠标停留在某一行时,点鼠标右键将弹出面板,可对当前行进行上下移动、复制、粘贴及主键重复检查(对数据库,主键作为索引是唯一的,不允许重复)。

  • 25
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值