luckysheet 新增自定义工具栏

项目中需要在工具中自定义一个工具栏,具备导入导出功能,直接上步骤
1、找到路径为src/local/zh.js的文件,找到打印,后面新增importExcel: “导入”
在这里插入图片描述
2、找到路径为src/controllers/toobar.js的文件
找到defaultToolbar,追加importExcel
在这里插入图片描述
找到toolbarIdMap ,追加 importExcel: ‘#luckysheet-icon-importExcel’
在这里插入图片描述
找到createToolbarHtml,追加html

 importExcel: `<div class="luckysheet-toolbar-button-split-left luckysheet-toolbar-button luckysheet-inline-block"
        data-tips="${toolbar.importExcel}" id="luckysheet-icon-importExcel" role="button" style="user-select: none;">
            <div class="luckysheet-toolbar-button-outer-box luckysheet-inline-block"
            style="user-select: none;">
                <div class="luckysheet-toolbar-menu-button-inner-box luckysheet-inline-block"
                style="user-select: none;">
                    <div class="luckysheet-toolbar-menu-button-caption luckysheet-inline-block"
                    style="user-select: none;">
                        <div class="luckysheet-icon luckysheet-inline-block " style="user-select: none;">
                            <div aria-hidden="true" class="luckysheet-icon-img-container luckysheet-icon-img luckysheet-icon-rotation-none iconfont luckysheet-iconfont-biaogesuoding"
                            style="user-select: none;">
                            <!--限制上传格式为xls和xslx-->
                             <input id="luckysheet-excelUpload" type="file" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" style="display:none;"></input>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>` // 'importExcel'

4、找到路径为src/controllers/menuButton.js的文件,追加事件

//importExcel
        $("#luckysheet-icon-importExcel").click(function(){
            $("#luckysheet-excelUpload").click()
        })
        $("#luckysheet-excelUpload").click(function(e){
            e.stopPropagation()
        })
        $("#luckysheet-excelUpload").on('change',function(e){
            let file = e.currentTarget.file[0]
            window.excelUpload(file)
        })

5、最后npm run build 即可

luckysheet是一款基于Web的在线电子表格工具,它提供了丰富的功能和工具条层级,方便用户进行数据处理和分析。下面是luckysheet的工具条层级介绍: 1. 顶部工具条:顶部工具条位于luckysheet的顶部,包含了一些常用的操作按钮,如新建、打开、保存、撤销、重做等。用户可以通过点击这些按钮来执行相应的操作。 2. 左侧工具栏:左侧工具栏位于luckysheet的左侧,提供了一系列的工具按钮,用于选择不同的操作模式和功能。例如,用户可以通过点击选择工具按钮来选择单元格、行、列或整个表格进行操作。 3. 右键菜单:在luckysheet中,用户可以通过右键点击单元格或选定区域来打开右键菜单。右键菜单提供了一些常用的操作选项,如复制、粘贴、删除、插入等。用户可以根据需要选择相应的操作。 4. 单元格格式工具栏:单元格格式工具栏位于luckysheet的顶部,用于设置单元格的格式。用户可以通过该工具栏设置单元格的字体、颜色、对齐方式、边框等样式。 5. 公式栏:公式栏位于luckysheet的顶部,用于输入和编辑公式。用户可以在公式栏中输入各种数学公式和函数,以进行数据计算和分析。 6. 表格工具栏:表格工具栏位于luckysheet的顶部,提供了一些表格操作的功能按钮。例如,用户可以通过表格工具栏进行行列的插入、删除、隐藏等操作。 7. 数据筛选工具栏:数据筛选工具栏位于luckysheet的顶部,用于对表格数据进行筛选和排序。用户可以通过该工具栏设置筛选条件,以便快速找到所需的数据。 8. 图表工具栏:图表工具栏位于luckysheet的顶部,提供了一些图表相关的功能按钮。用户可以通过该工具栏创建、编辑和格式化各种类型的图表,以展示数据的可视化效果。 以上是luckysheet的主要工具条层级介绍。如果您有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值