精华内容
下载资源
问答
  • Spread

    千次阅读 2018-07-07 16:41:23
    (3)Zero-spreadZ-spread)基于Sport rate的 = 公司债券的Spot rate - 国债的Spot rate  计算GS  先计算公司债券YTM和国债的YTM  GS VS ZS 那些因素导致他们之间的差异,①CF正比,②倾斜程度正比 (4)OAS...
    1.Yield Curve收益率曲线
    
    (1)Spot curve即期利率曲线 1年5% 2年7%(一下子投两年每年7%) 3年8%(一下子投三年每年8%)
    Spot rate是零息债券的YTM ,因此Spot curve= Zero Curve收益率曲线
    (2)Yield Curve For coupon bonds付息债券收益率曲线,付息债的YTM的收益率。代表不同债券,投资不同期限的收益率曲线。
       同一个债券不同期限的债券收益率曲线。是水平的,因为每一年都是同一个值。
    (3)Par bond yield curve ,也就是说P= PAR的时候一系列债券构成的收益率曲线。(已知spot rate:s1、s2。。)
    一年期的,P = (C+PAR)/(1+S1),由于PAR=P,因此CR1=S1
    两年期的,无套利定价法P=C/(1+S1) + (C+PAR)/(1+S2)^2 ,算出coupon,CR2 = C/PAR
    将CR画在图上的曲线就是Par bond yield curve
    (4)Forward yield curve远期利率收益率曲线
    2. Forward Rate远期利率计算
    ①Spot Rate是站在0时间点看未来某段时间的利率
    Forward Rate是站在未来时间点看未来某段时间的利率 2y1y,2y开始从2开始,1y代表1年期限。从第二年开始一年期的期限
    ---------------------------
    0 1 2 3
    ②根据Spot Rate计算Forward Rate
    已知s1、s2、s3,求1y2y
    投资方式有两种:0到1,1-3;0-3.
    0-3 : (1+s3)^3
    0-1 &1-3 :  (1+s1)*(1+1y2y)^2
        ③用Forward Rate对债券进行无套利定价,也提现了即期利率跟远期利率的关系。
    P = CF1/(1+s1) +CF2/(1+S2)^2 + CF3/(1+S3)^3
    1+s1=1+s1
    (1+s2)^2=(1+s1)(1+1y1y)
    (1+s3)^3=(1+s1)(1+1y1y)(1+2y1y)
    3.Yield Spread收益率的息差
        思想:任何收益率=无风险收益率+Risk payment = Ri = Rf + Rp  ;
    收益率表达式 Yi = Yb + spread
    (1)G-spread (GS)the benchmark is 国债收益率,基于YTM的 =公司债的YTM-国债的YTM =YTMc - YTMt
    (2)I-spread(IS)the benchmark is swap rate = Yi - swap rate 
    (3)Zero-spread(Z-spread)基于Sport rate的  = 公司债券的Spot rate - 国债的Spot rate
       计算GS
         先计算公司债券YTM和国债的YTM
       GS VS ZS
    那些因素导致他们之间的差异,①CF正比,②倾斜程度正比
    (4)OAS(Option-adjusted spread)含权
    Callable bond ZS >OAS  pure + call  =callable  =8% + 2% =10%,投资者不利,因此有2%的spread,callable 10%==ZS,OAS=8% 
    Putable bond ZS <OAS   Pure+ +put =putable =10%-2% =8%,投资者有利,8%=ZS,oas=10%
    展开全文
  • Spreadjs表格

    2020-12-30 16:54:53
    1.安装 https://www.npmjs.com/package/@grapecity/spread-sheets 2.代码 把主要文件放在了组件中 ...gc-spread-sheets class="spread-host" @workbookInitialized="workbookInitialized"> <gc

    1.安装

    			https://www.npmjs.com/package/@grapecity/spread-sheets
    

    2.代码

    把主要文件放在了组件中

    子组件

    <template>
        <div class="spreadcontainer">
            <gc-spread-sheets class="spread-host" @workbookInitialized="workbookInitialized">
                <gc-worksheet :dataSource="dataSource" :autoGenerateColumns="autoGenerateColumns">
                    <gc-column :dataField="' '" :width="80"></gc-column>
                    <gc-column :dataField="'项目代号'" :width="160"></gc-column>
                    <gc-column :dataField="'编号'" :width="170"></gc-column>
                    <gc-column :dataField="'名称、型号、规格'" :width="190"></gc-column>
                    <gc-column :dataField="'数量'" :width="110"></gc-column>
                    <gc-column :dataField="'备注'" :width="180"></gc-column>
                </gc-worksheet>
            </gc-spread-sheets>
        </div>
    </template>
    
    <script>
    import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
    import "@grapecity/spread-sheets-vue/dist/gc.spread.sheets.vue.min.js"
    import * as GC from "@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"
    import "@grapecity/spread-sheets-resources-zh"
    GC.Spread.Common.CultureManager.culture("zh-cn")
    
    export default {
        name: "HelloWorld",
        data() {
            return {
                autoGenerateColumns: false,
                spread: null,
                col: ["项目代号", "编号", "名称、型号、规格", "数量", "备注"]
            }
        },
        props: ["dataSource", "status"],
        methods: {
            workbookInitialized(spread) {
                this.spread = spread
                let that = this
                // 编辑的编号回车传递
                spread.bind(GC.Spread.Sheets.Events.EditChange, function(sender, args) {
                    that.$parent.$parent.edittext(args.editingText)
                })
    
                // 输入完成切换单元格触发
                spread.bind(GC.Spread.Sheets.Events.CellChanged, function(e, info) {
                    if (info.sheetArea === GC.Spread.Sheets.SheetArea.viewport) {
                        that.$parent.$parent.quiteedit()
                    }
                })
    
                // 点击的单元格
                spread.bind(GC.Spread.Sheets.Events.CellClick, function(sender, args) {
                    that.$parent.$parent.clickposition(args.row, args.col)
                })
                // 点击插入行或者删除行重新渲染数据(为了页数可以展示)
    
                spread.bind(GC.Spread.Sheets.Events.RowChanged, function(e, info) {
                    console.log(info)
                    if (info.propertyName === "addRows" || info.propertyName === "deleteRows") {
                        that.$parent.$parent.addpagenum()
                        console.log(that)
                    }
                })
                // 单元格失去焦点清除
    
                // 去除sheet页
    
                spread.options.tabStripVisible = false
                spread.invalidateLayout()
                spread.repaint()
    
                // 表单保护
    
                let sheet = spread.getActiveSheet()
    
                sheet.getRange(-1, 3, -1, 1, GC.Spread.Sheets.SheetArea.viewport).wordWrap(true)
                var defaultStyle = new GC.Spread.Sheets.Style()
                defaultStyle.locked = false
    
                sheet.setDefaultStyle(defaultStyle, GC.Spread.Sheets.SheetArea.viewport)
                var style = new GC.Spread.Sheets.Style()
                style.locked = true
                sheet.setStyle(-1, 0, style)
    
                let option = {
                    allowSelectLockedCells: true,
                    allowSelectUnlockedCells: true,
                    allowFilter: false,
                    allowSort: false,
                    allowResizeRows: true,
                    allowResizeColumns: false,
                    allowEditObjects: false,
                    allowDragInsertRows: false,
                    allowDragInsertColumns: false,
                    allowInsertRows: false,
                    allowInsertColumns: false,
                    allowDeleteRows: false,
                    allowDeleteColumns: false
                }
                sheet.options.protectionOptions = option
                sheet.options.isProtected = true
    
                // 删除回车键切换单元格的操作
                spread.commandManager().setShortcutKey(undefined, GC.Spread.Commands.Key.enter, false, false, false, false)
                // 注册键盘回车事件
                spread.commandManager().register(
                    "myCmd",
                    function ColorAction() {
                        //单击一个单元格,然后按Enter键。
                        that.$parent.$parent.getdlbdata()
                    },
                    13
                )
                // 对右键的菜单栏更改
    
                var menuData = spread.contextMenu.menuData
                console.log(menuData)
                var newMenuData = []
                menuData.forEach(function(item) {
                    if (item) {
                        if (item.text === "全部粘贴") {
                            item.text = "粘贴"
                        }
                        if (item.name === "gc.spread.copy" || item.name === "gc.spread.cut" || item.name === "gc.spread.pasteAll") {
                            item.workArea = "viewportrowHeaderslicercorner"
                        }
                        if (item.name === "gc.spread.copy" || item.name === "gc.spread.cut" || item.name === "gc.spread.clearContents" || item.name === "gc.spread.pasteAll") {
                            item.workArea = "viewportslicercorner"
                        }
                        if (
                            item.name === "gc.spread.filter" ||
                            item.name === "gc.spread.sort" ||
                            item.workArea === "colHeader" ||
                            item.workArea === "sheetTab" ||
                            !item.name ||
                            item.workArea === "viewportcorner" ||
                            item.workArea === "slicer" ||
                            item.name === "gc.spread.pasteOptions" ||
                            item.name === "gc.spread.pasteFormula" ||
                            item.name === "gc.spread.pasteValues" ||
                            item.name === "gc.spread.pasteFormatting" ||
                            item.name === "gc.spread.hideRows" ||
                            item.name === "gc.spread.unhideRows"
                        ) {
                            return
                        }
                        newMenuData.push(item)
                    }
                })
    
                spread.contextMenu.menuData = newMenuData
    
                console.log(spread.contextMenu.menuData)
            }
        }
    }
    </script>
    
    <style lang="scss" scoped>
    .spreadcontainer {
        height: 100%;
        width: 100%;
        .spread-host {
            height: 100%;
            width: 100%;
            /deep/ table {
                tr {
                    td {
                        .gc-scroll-container {
                            .gc-scrollbar-wrapper {
                                left: 0;
                            }
                            .gc-scroll-arrow {
                                left: 0;
                            }
                        }
                    }
                }
            }
        }
    }
    </style>
    
    

    父组件

    <!--
     * @Author: wangn
     * @Date: 2020-06-10 13:51:21
     * @LastEditors: wangn
     * @Description: 
    -->
    <template>
        <div id="listcontainer">
            <div class="searchbox">
                <div class="picnum">
                    <span>图号</span>
                    <input type="text" v-model="PicNum" />
                </div>
                <div class="name">
                    <span>名称</span>
                    <input type="text" v-model="Name" />
                </div>
            </div>
            <div class="btns">
                <p @click="filterevent">查询</p>
                <p @click="restart">重置</p>
            </div>
            <div class="curd">
                <p @click="add">
                    <i class="el-icon-plus"></i>
                    <span>新增</span>
                </p>
                <p @click="quote">
                    <i class="el-icon-plus"></i>
                    <span>引用</span>
                </p>
                <p @click="change">
                    <i class="el-icon-edit"></i>
                    <span>修改</span>
                </p>
                <p @click="del">
                    <i class="el-icon-minus"></i>
                    <span>删除</span>
                </p>
                <p @click="outfile">
                    <i class="el-icon-download"></i>
                    <span>导出</span>
                </p>
                <p @click="showuploadbox">
                    <i class="el-icon-upload2"></i>
                    <span>导入</span>
                </p>
            </div>
            <div class="tablebox">
                <table border="0" cellspacing="0">
                    <thead>
                        <tr>
                            <th></th>
                            <th @click="allchosebtn">
                                <input type="checkbox" :checked="chosearr.length === nowpageleng" />
                            </th>
                            <th>操作</th>
                            <th>图号</th>
                            <th>名称</th>
                            <th>创建者</th>
                            <th>创建时间</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in tableData" :key="index" :style="{ background: index % 2 == 0 ? '' : '#eeeeee' }">
                            <td>
                                {{ (tablecurrentPage - 1) * tablepagesize + index + 1 }}
                            </td>
                            <td @click="singlechose(item.id)">
                                <input type="checkbox" :checked="chosearr.indexOf(item.id) !== -1" />
                            </td>
                            <td class="look" title="查看" @click="lookdetail(item.id)"><i class="el-icon-view"></i></td>
                            <td>{{ item.dLBNumber }}</td>
                            <td>{{ item.dLBName }}</td>
                            <td>{{ item.firstFullName }}</td>
                            <td>{{ item.createTime }}</td>
                            <td>{{ item.dLBState }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="paginate">
                <el-pagination
                    background
                    @size-change="changetablelang"
                    @current-change="changetablepage"
                    :current-page="tablecurrentPage"
                    :page-sizes="[10, 20, 30]"
                    :page-size="tablepagesize"
                    prev-text="< 上一页 "
                    next-text=" 下一页 >"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tabletotal"
                ></el-pagination>
            </div>
            <el-dialog title="新增" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" :close-on-click-modal="false">
                <div class="dialogmain">
                    <div class="tabletop">
                        <p class="basisinfo">基础信息</p>
                        <div class="info">
                            <div class="picnum">
                                <span>图号</span>
                                <i v-if="status !== '查看'">*</i>
                                <input type="text" :disabled="status == '查看'" v-model="DLBNumber" />
                            </div>
                            <div class="name">
                                <span>名称</span>
                                <i v-if="status !== '查看'">*</i>
                                <input type="text" :disabled="status == '查看'" v-model="DLBName" />
                            </div>
                            <div>
                                <p @click="fromdlb" v-if="status !== '查看'">DLB中选择数据</p>
                            </div>
                        </div>
                        <p>元件目录表</p>
                    </div>
                    <div class="dialogtable">
                        <spread ref="spread" :dataSource="dataSource" :status="status" />
                        <!-- <table border="0" cellspacing="0">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th>项目代号</th>
                                    <th>编号</th>
                                    <th>名称、型号、规格</th>
                                    <th>数量</th>
                                    <th>备注</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, index) in dialogData" :key="index" :style="{ background: index % 2 == 0 ? '' : '#eeeeee' }">
                                    <td>
                                        {{ (dialogcurrentPage - 1) * 33 + index + 1 }}
                                    </td>
                                    <td class="look" title="查看" @click="jumpdlb(index)"><span v-if="status !== '查看'">搜索</span></td>
    
                                    <td><input type="text" v-model="item.projectNumber" :style="{ background: index % 2 == 0 ? '' : '#eeeeee' }" :disabled="!canedit" /></td>
                                    <td><input type="text" v-model="item.itemNumber" :style="{ background: index % 2 == 0 ? '' : '#eeeeee' }" :disabled="!canedit" /></td>
                                    <td><input type="text" v-model="item.itemName" :style="{ background: index % 2 == 0 ? '' : '#eeeeee' }" :disabled="!canedit" /></td>
                                    <td><input type="text" v-model="item.itemQuantity" :style="{ background: index % 2 == 0 ? '' : '#eeeeee' }" :disabled="!canedit" /></td>
                                    <td><input type="text" v-model="item.remarks" :style="{ background: index % 2 == 0 ? '' : '#eeeeee' }" :disabled="!canedit" /></td>
                                </tr>
                            </tbody>
                        </table> -->
                    </div>
                    <!-- <div class="paginate">
                        <el-pagination
                            background
                            @current-change="changedialogpage"
                            :current-page="dialogcurrentPage"
                            :page-sizes="[33]"
                            :page-size="dialogpagesize"
                            prev-text="< 上一页 "
                            next-text=" 下一页 >"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="dialogtotal"
                        ></el-pagination>
                    </div> -->
                </div>
                <span slot="footer" class="dialog-footer">
                    <!-- <el-button type="primary" @click="addnewpage" v-if="status !== '查看'">新增一页</el-button> -->
    
                    <!-- <el-button type="primary" @click="delpage" v-if="status !== '查看'">删除本页</el-button> -->
    
                    <el-button type="primary" @click="submit" v-if="status !== '查看'">提交</el-button>
                    <el-button @click="closedialog">取消</el-button>
                </span>
            </el-dialog>
            <el-dialog title="dlb" :visible.sync="showdlb" width="80%" :before-close="handleClosedlb" class="dlbpage" :close-on-click-modal="false">
                <dlb />
            </el-dialog>
            <el-dialog title="文件上传" :visible.sync="uploadbox" width="20%" :before-close="handleCloseuploadbox" class="upload">
                <input type="file" id="file" @change="importfile($event)" />
                <button @click="uploadevent">确认上传</button>
            </el-dialog>
        </div>
    </template>
    <script>
    import spread from "../../../../components/spread"
    import dlb from "../dlb/index"
    import { datagrid, findOneById, saveDLBItemData, checkDLBDatas, delByIds, doExportDatas, doImportExcel, lookshoucang, findByMaterId } from "../../../../api/index"
    export default {
        components: {
            spread,
            dlb
        },
        data() {
            return {
                PicNum: "",
                Name: "",
                localPicNum: "",
                localName: "",
                tablecurrentPage: 1,
                tablepagesize: 10,
                dialogcurrentPage: 1,
                dialogpagesize: 10,
                tabletotal: 0,
                dialogtotal: 0,
                dialogVisible: false,
                tableData: [],
                dialogData: [],
                canedit: true,
                status: "",
                chosearr: [],
                dlbshow: false,
                DLBNumber: "",
                DLBName: "",
                id: "",
                alladdData: [],
                nowpageleng: 10,
                uploadbox: false,
                formData: {},
                menushow: false,
    
                dlbindex: 0,
                showdlb: false,
                dlbsrc: "",
                dataSource: [],
                position: 0,
                positioncol: 0,
                editingText: ""
            }
        },
        methods: {
            // // 鼠标右击
            // showmenuevent(e, item, index) {
            //     // console.log(index)
            //     // console.log((this.dialogcurrentPage - 1) * 33 + index)
            //     if (this.status !== "查看") {
            //         this.menuTop = e.clientY + "px"
            //         this.menuLeft = e.clientX + "px"
            //         this.menushow = true
            //         this.readydata = item
            //         this.pasteindex = index
            //     }
            // },
            // copy() {
            //     console.log("复制")
            //     console.log(this.pasteindex)
            //     console.log((this.dialogcurrentPage - 1) * 33 + this.pasteindex)
            // },
            // paste() {
            //     console.log("粘贴")
            //     console.log(this.pasteindex)
            // },
            fromdlb() {
                // 从dlb中获取数据后,调取子组件中的方法,将获取的数据传入子组件
                this.jumpdlb()
                console.log(111)
            },
            handleClose(done) {
                done()
                this.canedit = true
                this.status = ""
                this.DLBNumber = ""
                this.DLBName = ""
            },
            handleCloseuploadbox(done) {
                done()
            },
            handleClosedlb(done) {
                done()
            },
            closedialog() {
                this.dialogVisible = false
                this.canedit = true
                this.status = ""
                this.DLBNumber = ""
                this.DLBName = ""
            },
            changelang(val) {
                console.log(val)
            },
            changepage(val) {
                console.log(val)
            },
            getdialogevent() {
                console.log(this.dialogData)
            },
            // table的分页
            changetablelang(val) {
                this.chosearr = []
                this.tablepagesize = val
                this.tablecurrentPage = 1
                this.gettableData(this.localPicNum, this.localName, this.tablecurrentPage, this.tablepagesize)
            },
            changetablepage(val) {
                this.chosearr = []
                this.tablecurrentPage = val
                this.gettableData(this.localPicNum, this.localName, this.tablecurrentPage, this.tablepagesize)
            },
            lookdetail(id) {
                this.status = "查看"
                this.canedit = false
                this.dialogVisible = true
                this.id = id
                // 获取查看数据
                this.getdialogData(this.id)
            },
            // 查看dialogData
            getdialogData(id) {
                findOneById(id).then(res => {
                    console.log(res)
                    if (res.data.obj) {
                        this.dataSource = res.data.obj.dlbItemList
                        this.DLBNumber = res.data.obj.dlbInfo.DLBNumber
                        this.DLBName = res.data.obj.dlbInfo.DLBName
                    }
                })
            },
            // 获取tableData
            gettableData(PicNum, Name, page, rows) {
                datagrid(PicNum, Name, page, rows).then(res => {
                    if (res.data) {
                        this.tableData = res.data.rows
                        this.nowpageleng = res.data.rows.length
                        this.tabletotal = res.data.total
                    }
                })
            },
            filterevent() {
                this.localPicNum = this.PicNum
                this.localName = this.Name
                this.tablepagesize = 10
                this.tablecurrentPage = 1
                this.gettableData(this.localPicNum, this.localName, this.tablecurrentPage, this.tablepagesize)
            },
            restart() {
                this.PicNum = ""
                this.Name = ""
                this.localPicNum = this.PicNum
                this.localName = this.Name
                this.tablepagesize = 10
                this.tablecurrentPage = 1
                this.gettableData(this.localPicNum, this.localName, this.tablecurrentPage, this.tablepagesize)
            },
            allchosebtn() {
                if (this.chosearr.length == this.nowpageleng) {
                    this.chosearr = []
                } else {
                    this.chosearr = []
                    for (let i = 0; i < this.tableData.length; i++) {
                        this.chosearr.push(this.tableData[i].id)
                    }
                }
            },
            singlechose(id) {
                if (this.chosearr.indexOf(id) == -1) {
                    this.chosearr.push(id)
                } else {
                    this.chosearr.splice(this.chosearr.indexOf(id), 1)
                }
            },
            jumpdlb() {
                console.log("跳到DLB")
                this.showdlb = true
                console.log(process.env.NODE_ENV)
                if (process.env.NODE_ENV === "development") {
                    this.dlbsrc = "http://localhost:8888/#/dlb"
                } else {
                    this.dlbsrc = "webpage/com/glaway/ims/dist/index.html#/dlb"
                }
            },
            buildblankform() {
                // 新增的时候先提前创建一个空白的表格
                for (let i = 0; i < 100; i++) {
                    this.dataSource[i] = {
                        " ": "",
                        行号: i + 1,
                        项目代号: "", //项目代号
                        编号: "", //编号
                        "名称、型号、规格": "", //名称
                        数量: "", //数量
                        备注: "" //备注
                    }
                    if (i % 33 == 0) {
                        this.dataSource[i][" "] = "第" + Math.ceil(i / 33 + 1) + "页"
                    }
                }
            },
            addpagenum() {
                for (let i = 0; i < this.dataSource.length; i++) {
                    if (i % 33 == 0) {
                        this.dataSource[i][" "] = "第" + Math.ceil(i / 33 + 1) + "页"
                    } else {
                        this.dataSource[i][" "] = ""
                    }
                }
            },
            add() {
                this.id = ""
                console.log("新增")
                this.DLBName = ""
                this.DLBNumber = ""
                this.canedit = true
                this.dialogVisible = true
                this.dataSource = []
                this.buildblankform()
            },
            adddlbdata(addData) {
                // 关闭adddlb窗口
                this.showdlb = false
                // 得到数据
                // 更具position位置更改this.dataSource
                let newArray = this.dataSource.slice(0, this.dataSource.length)
                newArray[this.position]["编号"] = addData.code
                newArray[this.position]["名称、型号、规格"] = addData.name
                newArray[this.position]["项目代号"] = ""
                newArray[this.position]["数量"] = "1"
                newArray[this.position]["备注"] = ""
                this.dataSource = []
                this.dataSource = newArray
            },
            getdlbarr(dlbarr) {
                console.log(this.position)
                // 关闭adddlb窗口
                this.showdlb = false
                // 得到数据
                // 更具position位置更改this.dataSource
                let newArray = this.dataSource.slice(0, this.dataSource.length)
                for (let i = 0; i < dlbarr.length; i++) {
                    newArray[this.position + i]["编号"] = dlbarr[i].CODE
                    newArray[this.position + i]["名称、型号、规格"] = dlbarr[i].BASISFORMATIONNAME
                    newArray[this.position + i]["项目代号"] = ""
                    newArray[this.position + i]["数量"] = dlbarr[i].COUNT
                    newArray[this.position + i]["备注"] = ""
                }
                this.dataSource = []
                this.dataSource = newArray
            },
            getdlbdata() {
                console.log(this.position)
                console.log(this.editingText)
                if (this.positioncol == 2) {
                    if (this.editingText !== "") {
                        findByMaterId(this.editingText).then(res => {
                            if (res.data.obj.length > 0) {
                                let newArray = this.dataSource.slice(0, this.dataSource.length)
                                newArray[this.position]["编号"] = res.data.obj[0].ITEMNUMBER
                                newArray[this.position]["名称、型号、规格"] = res.data.obj[0].ITEMNAME
                                newArray[this.position]["项目代号"] = ""
                                newArray[this.position]["数量"] = "1"
                                newArray[this.position]["备注"] = ""
                                this.dataSource = []
                                this.dataSource = newArray
                            }
                        })
                    }
                }
            },
    
            edittext(editingText) {
                this.editingText = editingText
            },
            quiteedit() {
                this.editingText = ""
            },
            addnewpage() {
                // 新增加一页
                console.log("新增一页")
                for (let i = 0; i < 33; i++) {
                    this.alladdData.push({
                        projectNumber: "", //项目代号
                        itemNumber: "", //编号
                        itemName: "", //名称
                        itemQuantity: "", //数量
                        remarks: "" //备注
                    })
                }
                // 总数改变分页改变
                this.alladdDatatotal = this.alladdData.length
                this.dialogtotal = this.alladdDatatotal
                this.dialogData = this.alladdData.slice((this.dialogcurrentPage - 1) * 33, this.dialogcurrentPage * 33)
                console.log(this.alladdData)
                console.log(this.dialogData)
            },
            delpage() {
                // 删除操作
                if (this.dialogcurrentPage == 1) {
                    if (this.alladdDatatotal > 33) {
                        this.alladdData = this.alladdData.slice(33)
                        this.alladdDatatotal = this.alladdDatatotal - 33
                        this.dialogtotal = this.alladdDatatotal
                        this.dialogData = this.alladdData.slice((this.dialogcurrentPage - 1) * 33, this.dialogcurrentPage * 33)
                    } else {
                        this.$message({
                            message: "只剩一页了,不能删了",
                            type: "warning"
                        })
                    }
                } else {
                    this.alladdData.splice((this.dialogcurrentPage - 1) * 33, 33)
                    this.alladdDatatotal = this.alladdDatatotal - 33
                    this.dialogtotal = this.alladdDatatotal
                    this.dialogcurrentPage = this.dialogcurrentPage - 1
                    this.dialogData = this.alladdData.slice((this.dialogcurrentPage - 1) * 33, this.dialogcurrentPage * 33)
                }
    
                console.log(this.alladdData)
                console.log(this.dialogData)
            },
            clickposition(position, positioncol) {
                this.position = position
                this.positioncol = positioncol
            },
            submit() {
                if (this.DLBNumber == "" || this.DLBName == "") {
                    this.$message({
                        message: "图号或名称不能为空!",
                        type: "warning"
                    })
                    return
                }
    
                // 增加或引用或更改时校验
                // 先判断有数据
                let result = []
                for (let i = this.dataSource.length - 1; i >= 0; i--) {
                    if (
                        this.dataSource[i]["项目代号"] !== "" ||
                        this.dataSource[i]["编号"] !== "" ||
                        this.dataSource[i]["名称、型号、规格"] !== "" ||
                        this.dataSource[i]["数量"] !== "" ||
                        this.dataSource[i]["备注"] !== ""
                    ) {
                        result.push(i)
                    }
                }
                if (result.length === 0) {
                    this.$message({
                        message: "至少要有一条数据",
                        type: "warning"
                    })
                    return
                }
    
                checkDLBDatas(this.DLBNumber, this.id).then(res => {
                    if (res.data.msg !== "操作成功") {
                        // 保存失败
                        this.$message({
                            message: "保存失败,图号不能与之前图号重复!",
                            type: "warning"
                        })
                    } else {
                        let pagenum = Math.ceil(this.dataSource.length / 33)
                        for (let i = this.dataSource.length - 1; i >= 0; i--) {
                            if (
                                this.dataSource[i]["项目代号"] == "" &&
                                this.dataSource[i]["编号"] == "" &&
                                this.dataSource[i]["名称、型号、规格"] == "" &&
                                this.dataSource[i]["数量"] == "" &&
                                this.dataSource[i]["备注"] == ""
                            ) {
                                this.dataSource.splice(i, 1)
                            }
                        }
                        console.log(this.dataSource)
                        saveDLBItemData(this.DLBNumber, this.DLBName, JSON.stringify(this.dataSource), pagenum, this.id).then(res => {
                            this.gettableData(this.localPicNum, this.localName, this.tablecurrentPage, this.tablepagesize)
                            this.dialogVisible = false
                            this.DLBNumber = ""
                            this.DLBName = ""
                        })
                    }
                })
            },
            quote() {
                this.id = ""
                // 引用只能引用单挑数据
                if (this.chosearr.length === 1) {
                    console.log(this.chosearr)
                    let id = this.chosearr[0]
                    this.dialogcurrentPage = 1
                    // 开始引用数据
                    this.getdialogData(id)
                    this.dialogVisible = true
                } else {
                    this.$message({
                        message: "能且只能引用一条数据",
                        type: "warning"
                    })
                }
            },
            change() {
                // 修改只能修改单挑数据
                if (this.chosearr.length === 1) {
                    this.id = this.chosearr[0]
                    let id = this.chosearr[0]
                    this.dialogcurrentPage = 1
                    // 开始引用数据
                    this.getdialogData(id)
                    this.dialogVisible = true
                } else {
                    this.$message({
                        message: "一次能且只能修改一条数据",
                        type: "warning"
                    })
                }
            },
            del() {
                let str = this.chosearr.join(",")
                delByIds(str).then(res => {
                    if (this.tablecurrentPage == 1) {
                        this.tablecurrentPage = 1
                    } else {
                        if (this.chosearr.length == this.nowpageleng) {
                            this.tablecurrentPage = this.tablecurrentPage - 1
                        }
                    }
    
                    this.chosearr = []
                    // 判断如果删除的是最后一页
    
                    this.gettableData(this.localPicNum, this.localName, this.tablecurrentPage, this.tablepagesize)
                })
            },
            outfile() {
                let suffix = ""
                if (this.chosearr.length > 1) {
                    suffix = "zip"
                } else if (this.chosearr.length == 1) {
                    suffix = "xlsx"
                } else {
                    this.$message({
                        message: "先选择要导出的数据",
                        type: "warning"
                    })
                    return
                }
                let str = this.chosearr.join(",")
                doExportDatas(str).then(res => {
                    if (window.navigator.msSaveOrOpenBlob) {
                        // 兼容IE10
                        const blob = res.data
                        window.navigator.msSaveBlob(blob, "DLB报表." + suffix)
                    } else {
                        const blob = res.data
                        const reader = new FileReader()
                        reader.readAsDataURL(blob)
                        reader.onload = e => {
                            const a = document.createElement("a")
                            a.download = decodeURIComponent("DLB报表." + suffix)
                            a.href = e.target.result
                            document.body.appendChild(a)
                            a.click()
                            document.body.removeChild(a)
                        }
                    }
                })
            },
            importfile(e) {
                let file = e.target.files[0]
                this.formData = new FormData()
                this.formData.append("FileData", file)
                this.formData.append("Filename", file.name)
                this.formData.append("Upload", "Submit Query")
            },
            uploadevent() {
                if (this.formData.__proto__.append) {
                    doImportExcel(this.formData).then(res => {
                        // console.log(res)
                        if (res.data.msg) {
                            // 判断导入成功还是导入失败
                            let str = res.data.msg.slice(0, 4)
                            // console.log(str)
                            if (str === "导入失败") {
                                this.$message({
                                    message: "导入失败!",
                                    type: "warning"
                                })
                            } else {
                                this.$message({
                                    message: "导入成功",
                                    type: "success"
                                })
                                this.uploadbox = false
                            }
                        }
                    })
                } else {
                    this.$message({
                        message: "先选取需要导入的文件",
                        type: "warning"
                    })
                }
            },
            showuploadbox() {
                this.uploadbox = true
            }
        },
        mounted() {
            this.chosearr = []
            this.PicNum = ""
            this.Name = ""
            this.canedit = true
            this.gettableData("", "", 1, 10)
            window.addEventListener("click", () => {
                this.menushow = false
            })
        },
        watch: {
            dataSource: {
                deep: true,
                handler: function(newV) {
                    // 先判断tablelength和newV.length的长度
                    // 如果newV.length大于tablelength说明是进行了插入操作
                    // 如果newV.length小于tablelength说明是进行了插入操作
                    if (newV.length > this.tablelength) {
                        console.log("插入行")
                        // 表示插入了几行
                        let lang = newV.length - this.tablelength
    
                        // 判断插入的行数
    
                        // console.log(Math.floor(lang / 33) + "页" + (lang - Math.floor(lang / 33) * 33) + "行")
                        // 应该补充的行数为33-(lang - Math.floor(lang / 33) * 33)
                        // console.log("应该再插入" + (33 - (lang - Math.floor(lang / 33) * 33)) + "行")
                        if (33 - (lang - Math.floor(lang / 33) * 33) !== 33) {
                            // console.log("再加" + (33 - (lang - Math.floor(lang / 33) * 33)) + "行")
                            let newpage = []
                            for (let i = 0; i < 33 - (lang - Math.floor(lang / 33) * 33); i++) {
                                newpage[i] = {
                                    " ": "",
                                    行号: "",
                                    项目代号: "", //项目代号
                                    编号: "", //编号
                                    "名称、型号、规格": "", //名称
                                    数量: "", //数量
                                    备注: "" //备注
                                }
                            }
                            newV = [...newV, ...newpage]
                        }
                    }
    
                    if (newV.length < this.tablelength) {
                        console.log("删除行")
                        let lang = this.tablelength - newV.length
                        if (Math.ceil(lang / 33) > 1) {
                            console.log("表示删除的数量超过33")
                            console.log("应该再插入" + (33 - (lang - Math.floor(lang / 33) * 33)) + "行")
                            let newpage = []
                            for (let i = 0; i < lang - Math.floor(lang / 33) * 33; i++) {
                                newpage[i] = {
                                    " ": "",
                                    行号: "",
                                    项目代号: "", //项目代号
                                    编号: "", //编号
                                    "名称、型号、规格": "", //名称
                                    数量: "", //数量
                                    备注: "" //备注
                                }
                            }
                            newV = [...newV, ...newpage]
                            // 加上删除的数量
                        } else if (lang === 33) {
                            console.log("表示删除的数量等于33")
                            //    不需要不加了
                        } else {
                            console.log("表示删除的数量小于33")
                            // 加上删除的数量
                            console.log("应该再插入" + (lang - Math.floor(lang / 33) * 33) + "行")
                            let newpage = []
                            for (let i = 0; i < lang - Math.floor(lang / 33) * 33; i++) {
                                newpage[i] = {
                                    " ": "",
                                    行号: "",
                                    项目代号: "", //项目代号
                                    编号: "", //编号
                                    "名称、型号、规格": "", //名称
                                    数量: "", //数量
                                    备注: "" //备注
                                }
                            }
                            newV = [...newV, ...newpage]
                        }
                    }
                    // 遍历数组中的对象有没有所有属性
                    for (let i = 0; i < newV.length; i++) {
                        let objarr = []
                        for (let j in newV[i]) {
                            objarr.push(j)
                        }
                        if (
                            objarr.indexOf(" ") == -1 ||
                            objarr.indexOf("行号") == -1 ||
                            objarr.indexOf("项目代号") == -1 ||
                            objarr.indexOf("编号") == -1 ||
                            objarr.indexOf("名称、型号、规格") == -1 ||
                            objarr.indexOf("数量") == -1 ||
                            objarr.indexOf("备注") == -1
                        ) {
                            newV[i][" "] = ""
                            newV[i]["行号"] = ""
                            newV[i]["项目代号"] = ""
                            newV[i]["编号"] = ""
                            newV[i]["名称、型号、规格"] = ""
                            newV[i]["数量"] = ""
                            newV[i]["备注"] = ""
                        }
                    }
                    // 现在的newV没有行数和页码要给加上
                    for (let i = 0; i < newV.length; i++) {
                        newV[i]["行号"] = i + 1
                        if (i % 33 == 0) {
                            newV[i][" "] = "第" + Math.ceil(i / 33 + 1) + "页"
                        }
                    }
                    // 赋值
                    // console.log(newV)
                    this.dataSource = newV
                    // // 操作完成之后将新的长度赋值给保存的长度
                    this.tablelength = newV.length
                }
            }
        }
    }
    </script>
    <style lang="scss" scoped>
    #listcontainer {
        width: 100%;
        height: 100%;
        background-color: #fff;
        padding: 0 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        position: relative;
        .menu {
            // position: absolute;
            z-index: 99999;
            position: fixed;
            width: 150px;
            height: 60px;
            border: 1px solid #ccc;
            background-color: #fff;
            li {
                height: 30px;
                line-height: 30px;
            }
            li:hover {
                background-color: #108ee9;
                color: #fff;
                cursor: pointer;
            }
        }
        .searchbox {
            height: 50px;
            width: 100%;
            display: flex;
            justify-content: start;
            align-items: center;
    
            div {
                margin-right: 30px;
                overflow: hidden;
                display: flex;
                justify-content: space-between;
                span {
                    margin-right: 10px;
                    display: inline-block;
                }
                input {
                    outline: none;
                    height: 20px;
                    line-height: 20px;
                }
            }
        }
        .btns {
            height: 50px;
            width: 100%;
            display: flex;
            justify-content: flex-end;
            p {
                height: 30px;
                line-height: 30px;
                width: 100px;
                background-color: #0c60aa;
                cursor: pointer;
                color: #fff;
                margin-right: 30px;
            }
            p:hover {
                background-color: #108ee9;
            }
        }
        .curd {
            height: 30px;
            width: 100%;
            display: flex;
            p {
                height: 30px;
                line-height: 30px;
                width: 60px;
                margin-right: 10px;
                cursor: pointer;
                i {
                    color: #108ee9;
                    margin-right: 2px;
                }
            }
        }
        .tablebox {
            flex: 1;
            overflow-x: auto;
            margin-top: 10px;
            table {
                height: 100%;
                thead {
                    height: 40px;
                    width: 100%;
                    overflow-y: scroll;
                    display: block;
                    tr {
                        height: 40px;
                        display: flex;
                        background: #e5e5e5;
                        th {
                            width: 250px;
                            line-height: 40px;
                            border: 1px solid #ccc;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        th:nth-child(1) {
                            width: 50px;
                        }
                        th:nth-child(2) {
                            width: 50px;
                        }
                        th:nth-child(3) {
                            width: 150px;
                        }
                    }
                }
                tbody {
                    width: 100%;
                    height: 400px;
                    overflow-y: scroll;
                    overflow-x: hidden;
                    display: block;
    
                    tr {
                        display: flex;
                        height: 40px;
                        .look {
                            cursor: pointer;
                        }
                        td {
                            line-height: 40px;
    
                            width: 250px;
                            border: 1px solid #ccc;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            display: block;
                        }
                        td:nth-child(1) {
                            width: 50px;
                        }
                        td:nth-child(2) {
                            width: 50px;
                        }
                        td:nth-child(3) {
                            width: 150px;
                        }
                    }
                }
            }
        }
        .paginate {
            height: 50px;
            width: 100%;
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            .el-pagination {
                button {
                    padding: 0 10px;
                }
                .el-pager {
                    .active {
                        background-color: #0c60aa;
                    }
                }
            }
        }
        /deep/ .el-dialog__wrapper {
            .el-dialog {
                height: 70%;
                overflow: hidden;
                .el-dialog__header {
                    height: 30px;
                    width: 100%;
                    padding: 0 10px;
                    .el-dialog__title {
                        float: left;
                        font-weight: 600;
                        font-size: 14px;
                    }
                    .el-dialog__headerbtn {
                        right: 7px;
                        top: 7px;
                    }
                }
                .el-dialog__body {
                    height: calc(100% - 150px);
                    width: 100%;
                    padding: 0;
    
                    .dialogmain {
                        height: 100%;
                        width: 100%;
                        padding: 0 10px;
                        box-sizing: border-box;
    
                        .tabletop {
                            height: 100px;
                            width: 100%;
                            p {
                                text-align: left;
                                height: 30px;
                                line-height: 30px;
                                color: #0c60aa;
                                font-weight: 600;
                            }
                            .info {
                                height: 40px;
                                width: 100%;
                                display: flex;
                                justify-content: start;
                                align-items: center;
    
                                div {
                                    margin-right: 30px;
                                    overflow: hidden;
                                    display: flex;
                                    justify-content: space-between;
                                    span {
                                        display: inline-block;
                                    }
                                    i {
                                        color: red;
                                    }
                                    input {
                                        margin-left: 10px;
                                        outline: none;
                                        height: 20px;
                                        line-height: 20px;
                                    }
                                    p {
                                        height: 30px;
                                        background-color: #0c60aa;
                                        color: #fff;
                                        padding: 0 10px;
                                    }
                                    p:hover {
                                        cursor: pointer;
                                        background-color: #108ee9;
                                    }
                                }
                            }
                        }
                        .dialogtable {
                            height: calc(100% - 100px);
                            width: 100%;
                            overflow: hidden;
                            table {
                                thead {
                                    height: 35px;
                                    width: 100%;
                                    tr {
                                        height: 35px;
                                        display: flex;
                                        background: #e5e5e5;
                                        th {
                                            width: 200px;
                                            line-height: 35px;
                                            border: 1px solid #ccc;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                            box-sizing: border-box;
                                        }
                                        th:nth-child(1) {
                                            width: 50px;
                                        }
                                        th:nth-child(2) {
                                            width: 50px;
                                        }
                                        th:nth-child(3) {
                                            width: 150px;
                                        }
                                        th:nth-last-child(1) {
                                            width: 100px;
                                        }
                                        th:nth-last-child(2) {
                                            width: 100px;
                                        }
                                    }
                                }
                                tbody {
                                    height: 350px;
                                    overflow: auto;
                                    display: block;
                                    .spread-host {
                                        width: 100%;
                                        height: 100%;
                                    }
                                    tr {
                                        display: flex;
                                        width: 100%;
                                        height: 35px;
                                        table-layout: fixed;
                                        position: relative;
                                        .look {
                                            cursor: pointer;
                                        }
                                        td {
                                            line-height: 35px;
                                            padding: 0;
                                            box-sizing: border-box;
                                            width: 200px;
                                            border: 1px solid #ccc;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                            input {
                                                width: 100%;
                                                height: 100%;
                                                outline: none;
                                                border: none;
                                                text-align: center;
                                                padding: 0;
                                                text-overflow: ellipsis;
                                                white-space: nowrap;
                                                overflow: hidden;
                                            }
                                        }
                                        td:nth-child(1) {
                                            width: 50px;
                                        }
                                        td:nth-child(2) {
                                            width: 50px;
                                        }
                                        td:nth-child(3) {
                                            width: 150px;
                                        }
                                        td:nth-last-child(1) {
                                            width: 100px;
                                        }
                                        td:nth-last-child(2) {
                                            width: 100px;
                                        }
                                    }
                                }
                                ::-webkit-scrollbar {
                                    width: 1px;
                                }
                            }
                        }
                    }
                }
                .el-dialog__footer {
                    height: 50px;
                    width: 100%;
                    button {
                        height: 30px;
                        padding: 0 10px;
                    }
                }
            }
        }
        /deep/ .upload {
            overflow: hidden;
            .el-dialog {
                height: 25%;
                overflow: hidden;
                .el-dialog__header {
                    height: 30px;
                    width: 100%;
                    padding: 0 10px;
                    .el-dialog__title {
                        float: left;
                        font-weight: 600;
                        font-size: 14px;
                    }
                    .el-dialog__headerbtn {
                        right: 7px;
                        top: 7px;
                    }
                }
                .el-dialog__body {
                    height: calc(100% - 30px);
                    width: 100%;
                    position: relative;
                    #file {
                        border: 1px solid #ccc;
                        outline: none;
                    }
                    button {
                        position: absolute;
                        right: 30px;
                        bottom: 30px;
                    }
                }
            }
        }
        /deep/ .dlbpage {
            overflow: hidden;
            .el-dialog {
                height: 80%;
                overflow: hidden;
                .el-dialog__header {
                    height: 30px;
                    width: 100%;
                    padding: 0 10px;
                    .el-dialog__title {
                        float: left;
                        font-weight: 600;
                        font-size: 14px;
                    }
                    .el-dialog__headerbtn {
                        right: 7px;
                        top: 7px;
                    }
                }
                .el-dialog__body {
                    height: calc(100% - 30px);
                    width: 100%;
                    padding: 0;
                }
            }
        }
    }
    </style>
    
    

    可参考网址:

    https://www.grapecity.com.cn/blogs/create-a-spreadjs-vue-project-in-3-minutes
    https://www.npmjs.com/package/@grapecity/spread-sheets
    https://demo.grapecity.com.cn/spreadjs/help/api/
    https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/#/samples
    
    展开全文
  • spreadJs禁用与重写快捷键的方法 禁用快捷键 禁用某个快捷键用到的函数是: setShortcutKey(commandName, key, ctrl, shift, alt, meta); 参数: commandName:绑定事件名,将commandName设置为undefined的...

    spreadJs禁用与重写快捷键的方法


    禁用快捷键

    禁用某个快捷键用到的函数是:
    setShortcutKey(commandName, key, ctrl, shift, alt, meta);
    
    参数:
    commandName:绑定事件名,将commandName设置为undefined的命令名称将删除快捷键的绑定命令。
    key:快捷键,将键码设置为undefined的键码将删除命令的快捷键。
    ctrl:如果命令使用Ctrl键,则为true;否则为false。
    Shift:如果命令使用Shift键,则为true;否则为false。
    alt:如果命令使用Alt键,则为true;否则为false。
    meta:如果命令使用Macintosh上的Command键或Microsoft Windows上的Windows键,则为true;否则为false。
    
    eg:
    //禁用Ctrl + C
      spread.commandManager().setShortcutKey(undefined, GC.Spread.Commands.Key.c, true, false, false, false);
    //禁用Shift + C
      spread.commandManager().setShortcutKey(undefined, GC.Spread.Commands.Key.c, false, true, false, false);
    //禁用Ctrl + V
      spread.commandManager().setShortcutKey(undefined, GC.Spread.Commands.Key.v, true, false, false, false);
      

    重写快捷键

    //=========重写tab快捷键=========
    //先禁用tab
      spread.commandManager().setShortcutKey(undefined, GC.Spread.Commands.Key.tab, false, false, false, false);
    
    //编写绑定事件
      spread.commandManager().register('tabCmdName',{canUndo: true,
        execute: function (context, options, isUndo) {
          var Commands = GC.Spread.Sheets.Commands;
              options.cmd = "tabCmdName";
              if (isUndo) {
                  Commands.undoTransaction(context, options);
                  return true;
              } else {
                  //具体实现              
                  ...
                  ...
                  return true;
              }
      }});
    
    //绑定tab事件
      spread.commandManager().setShortcutKey("tabCmdName", GC.Spread.Commands.Key.tab, false, false, false, false);

     

    展开全文
  • SpreadJS有着强大的表单处理能力和电子表格功能。这些功能包括跨表单引用和计算,这样就能够充分利用多个表单上的数据和公式。它具有丰富的客户端JavaScript API,为您提供了所需要的灵活的客户端编程。本文主要描述...

    SpreadJS是一个面向企业级应用开发的综合性、高效能的基于HTML5的纯JavaScript的电子表格控件。SpreadJS有着强大的表单处理能力和电子表格功能。这些功能包括跨表单引用和计算,这样就能够充分利用多个表单上的数据和公式。它具有丰富的客户端JavaScript API,为您提供了所需要的灵活的客户端编程。本文主要描述了在SpreadJS中,怎样添加背景图片和水印。

    点击下载SpreadJS正式版

    添加背景图片

    你可以给一个单元格,一列,一行或者整个表格设置背景图片。

    纯前端表格控件SpreadJS使用教程:如何添加背景图片和水印

    你需要提供一个Base 64 编码的位图(BitMap) 或者一个指向图片的 Uri.

    ImageLayout 枚举描述了背景图片如何填充所在的区域:拉伸填充,按比例拉伸,居中,或者保持原尺寸。

    参考代码

    以下代码给单元格,列和行添加了背景图片:

    JavaScript

    var cellImage = document.getElementById("circle").src;
    var rowImage = "./css/images/quarter1.png";
    var colImage = document.getElementById("logo").src;
    sheet.getCell(3, 3).backgroundImage(cellImage);
    sheet.getRange(1, -1, 1, -1).backgroundImage(rowImage);
    sheet.getRange(-1, 1, -1, 1).backgroundImage(colImage);
    ...
    <img src="./css/images/box3.png" id="logo"/>
    <img src="./css/images/greencircle.png" id="circle"/>

    参考代码

    以下代码使用 Base64 设置背景图片:

    JavaScript

    var base64Image =
    "data:image/png;base64,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";
    var cellImage = base64Image;
    sheet.getCell(1, 1).backgroundImage(cellImage);

    参考代码

    以下代码给一行添加了背景图片,并将其居中。

    JavaScript

    var cellImage = document.getElementById("circle").src;
    var rowImage = "./css/images/quarter1.png";
    var colImage = document.getElementById("logo").src;
    activeSheet.getCell(3, 3).backgroundImage(cellImage);
    activeSheet.getRange(1, -1, 1, -1).backgroundImage(rowImage);
    activeSheet.getRange(-1, 1, -1, 1).backgroundImage(colImage);
    activeSheet.getRange(1, -1, 1, -1).backgroundImageLayout(GC.Spread.Sheets.ImageLayout.Center);
    ...
    <img src="./css/images/box3.png" id="logo"/>
    <img src="./css/images/greencircle.png" id="circle"/>

    添加水印

    水印指的是,当单元格的值为空时,显示的内容。

    你可以为单元格设置水印。

    纯前端表格控件SpreadJS使用教程:如何添加背景图片和水印

    要添加水印,你需要:

    • 创建一个 Style 的实例;

    • 设置该实例的 watermark 属性;

    • 使用 setStyle 方法将该实例设置到单元格,列和行中。

    水印文字不会溢出到该单元格的外面。

    示例代码

    此代码将会在 B1 和 B2 单元格中设置水印。

    JavaScript

    var type = new GC.Spread.Sheets.Style();
    type.watermark = "User name";sheet.setStyle(0, 1, type);
    var type = new GC.Spread.Sheets.Style();
    type.watermark = "Password";sheet.setStyle(1, 1, type);

    本文内容到这里就结束了,感兴趣的朋友可以继续关注我们哦,小编会继续更新相关文章资讯~您也可以下载SpreadJS试用版进行评估哦~

    展开全文
  • let spread = new GC.Spread.Sheets.Workbook(document.getElementById(‘sheet’)); spread.options.showHorizontalScrollbar =false; spread.options.showVerticalScrollbar =true; spread.options....
  • 物镜总放大倍数rindexObj:目标浸没介质的折射率ccdSize:CCD的像素尺寸(在相机平面内) rindex_sp:试样介质的折射率xysize:所需图像的大小(标本视图大小/像素尺寸) nslices:所需的切片数量(深度视图/Z 轴...
  • spreadExploring two recent features that will make your code cleaner and more robust 探索两项最新功能,这些...The Rest and Spread operators were introduced in ES6 (2015) and further extended in ES9...
  • ES6 spread operator 展开运算符

    千次阅读 2019-01-22 21:28:03
    spread syntax spread syntax简单来说就是展开iterable obj,用法是**…iterableObj**,只能用在以下3个方面 iterable当作参数传入函数 function sum(x, y, z) { return x + y + z; } const numbers = [1, ...
  • ES6 展开运算符 Spread operator

    千次阅读 2016-07-01 17:16:35
    展开运算符展开运算符(spread)是三个点(…),可以将数组转为用逗号分隔的参数序列。如同rest参数的逆运算。
  • function f ( x , y , z ) { } var args = [ 0 , 1 , 2 ] ; f ( ... args ) ; 该项目是一部分,该项目将下一版 JavaScript 的语法编译为当今的 JavaScript 环境。 有关建议语法的更多信息,请参阅的。 安装 $ ...
  • You can supply bare variable names, select all variables between x and z with x:z, exclude y with -y. For more options, see the dplyr::select() documentation. See also the section on selection rules ...
  • (在断更的这一个月中,我为大家先后录制了14期SpreadJS产品入门系列学习视频,希望帮助那些正在学习和使用 SpreadJS 的同学全面、快速地了解产品,并尽快在实际项目中感受到 SpreadJS强大的前端表格功能!...
  • ES6 新特性

    千次阅读 多人点赞 2019-08-11 20:31:12
    扩展运算符(spread)是三个点(…), 将一个数组转为用逗号分隔的参数序列 。 用法: console.log (...[1, 2, 3]); //1 2 3 console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5 function add(x, y) { return x + y...
  • spread语法解析与使用

    2016-11-18 16:58:00
    @[spread, javavscript, es6, react] Spread语法是ES6中的一个新特性,在需要使用多参数(函数参数)、多元素(数组迭代)或者多变量(解构赋值)的地方使用spread语法,可以让表达式的结果平铺化 java中的可变...
  • es6推广的原因在于它更加轻盈方便,spread运算符、rest操作符以及解构赋值知识都是es6的新语法,接下来看看它们都分别是什么。 - spread运算符 spread运算符常常用于数组的解析与构造: var arr1 = ['a','b','c']; ...
  • 数据分布度的度量Measures of Spread

    千次阅读 2019-08-16 23:25:33
    Measures of spread describe how similar or varied the set of observed values are for a particular variable (data item). Measures of spread include the range, quartiles and the interquartile...
  • js spread object

    2019-10-03 14:02:10
    What’s is the benefit / drawback of these two alternatives?...Using object spread options = {...optionsDefault, ...options}; Or using Object.assign options = Object.assign({}, optionsDefault, o...
  • Spread操作符(...),也称作展开操作符,作用是将可迭代的(Iterable)对象进行展开。 比如有2个数组,我们要将其中一个数组中所有元素插入到另一个数组中,通过Spread操作符,就可以这样进行: var fruits = ["apple",...
  • spread-syntax

    2018-12-26 10:07:00
    // object.assign() 方法会触发setter spread syntax不会 var obj = { name: 'zhangs', age: 22 } var obj2 = {...obj} 转载于:https://www.cnblogs.com/techmessage/p/10177659.html
  • js学习随笔之Spread 运算符 (...)

    千次阅读 2018-07-10 11:06:20
    Spread运算符 允许从 iterable 表达式(如另一个数组文本)初始化部分数组文本,或允许表达式扩展到多个参数(在函数调用中)。 语法 var array = [[arg0ToN ,] ...iterable [, arg0ToN]] func([args ,] ......
  • Spread Operator 是我最喜欢的语法糖,没有之一,在应用场景上也是最为广泛,下面说下使用场景和技巧。 这是对应的 babel 插件,当然直接使用 typescript 或者直接使用 omi-cli 已经内置了这个特性,可以直接使用。 ...
  • 8.5.SPREAD()函数 8.6.SUM()函数 8.InfluxDB学习之InfluxDB常用函数(一)聚合函数 8.1.count()函数 返回一个(field)字段中的非空值的数量。 语法: SELECT COUNT(<field_key>) FROM <measurement_name>...
  • 上一篇文章[《解决Node.js项目报错SyntaxError: Unexpected token ... ...操作符导致运行报错了,本文将介绍...操作符在ES6和ES9中的新特性和解答...操作符英文叫Spread operator,即延展操作符。该操作符从ES6开始支持。
  • 展开语法,属于es6的新语法,可以在函数调用、数组构造...function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers); 2、构造数组,展开数组 const arr1 = [3,4,5]; const arr...
  • Spread操作符(...)是比较新的特性,但是在ES6的规范中,没有找到单独的章节对这个操作符进行说明,这个操作符主要用在两种情况下:函数传参和数组生成,这节主要讲解第一种情况。 规范的12.3.6.1中对函数参数...
  • 扩展运算符(Spread) 含义:扩展运算符用(…)表示,它会将一个数组转化为用逗号分隔的参数序列。 嗯?这个含义???????话不多说,上例子! 举些栗子 console.log(...[1, 2, 3]) // 输出结果为:1 2 3 ...
  • @[Spread, Reast, …...function foo (x, y, z) { … } let arr = [1, 2, 3] foo (…arr) 对象的 spread 操作,这里写一个对象的复制操作 let obj = { name: ‘张三’, age: 20, sex: ‘男’ } let temp = (…obj)...
  • 1.论文概述 文章主要是分析了疫情爆发... Diverse and nonlinear influences of built environment factors on COVID-19 spread across townships in China at its initial stage[J]. Scientific Reports, 2021, 11(1).
  • 前一篇文章讲了Spread操作符在函数参数中的用法,这篇简单讲一下Spread操作符在数组元素中的应用。直接看代码吧: [1, ...[2,3], 4]//[1, 2, 3, 4] let x = ['a', 'b']; let y = ['c']; let z = ['d', 'e']; let ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,834
精华内容 2,733
关键字:

spreadz