handsontable 单元格自定义html渲染

 

<div class="layui-row">
    <div id="hot"></div>
</div>
<div style="display:none">
    <input name="picFile" id="imgUpload" type="file" onchange="upImg(this,event)"/><img src="" alt=""/><br/>
</div>
 
    
  

核心代码：

hot setting.....
cells: function (row, col, prop) { 
                var cellProperties = {};
                cellProperties.renderer = "negativeValueRenderer";
                return cellProperties;
        }





自定义渲染方法  smallProductImg 为你图片列的属性
 function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
        if (prop === 'smallProductImg') {
            Handsontable.renderers.TextRenderer.apply(this, arguments);
            td.innerHTML = value;
        } else if (cellProperties.type == 'date') {
            Handsontable.renderers.DropdownRenderer.apply(this, arguments);
        } else if (cellProperties.type == 'dropdown') {
            Handsontable.renderers.DropdownRenderer.apply(this, arguments);
        } else if (cellProperties.type == 'checkbox'){
            Handsontable.renderers.CheckboxRenderer.apply(this, arguments);
        }else{
            Handsontable.renderers.TextRenderer.apply(this, arguments);
        }
    }

注册渲染
    Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);

图片样例： 

 
    var hotSettings = {
        data: dataObject,
        columns: _columns,
        stretchH: 'all',
        width: _width,
        autoWrapRow: true,
        maxRows: 10000,
        manualRowResize: true,
        manualColumnResize: true,
        rowHeaders: true,
        colHeaders: _colHeaders,
        manualRowMove: true,
        manualColumnMove: true,
        contextMenu: true,
        filters: true,
        cells: function (row, col, prop) { 
                var cellProperties = {};
                cellProperties.renderer = "negativeValueRenderer";
                return cellProperties;
        }
    };

    function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
        if (prop === 'smallProductImg') {
            Handsontable.renderers.TextRenderer.apply(this, arguments);
            td.innerHTML = value;
        } else if (cellProperties.type == 'date') {
            Handsontable.renderers.DropdownRenderer.apply(this, arguments);
        } else if (cellProperties.type == 'dropdown') {
            Handsontable.renderers.DropdownRenderer.apply(this, arguments);
        } else if (cellProperties.type == 'checkbox'){
            Handsontable.renderers.CheckboxRenderer.apply(this, arguments);
        }else{
            Handsontable.renderers.TextRenderer.apply(this, arguments);
        }
    }
    Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);


    var hot = new Handsontable(hotElement, hotSettings);

    var imgIndex = 1
    hot.addHook('afterOnCellMouseDown', function (c, s) {
        //图片判断
        if (imgIndex > 0) {
            if (s.col == imgIndex) {
                //开启图片添加字段 添加数据
                $("#imgUpload").click();
            }
        }
    });


    function upImg(target, e) {
        //判断是不是IE浏览器并获取图片大小
        var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
        var fileSize = 0;
        if (isIE && !target.files) {
            var filePath = target.value;
            var fileSystem = new ActiveXObject("Scription.FileSystemObject");
            var file = fileSystem.GetFile(filePath);
            fileSize = file.Size;
        } else {
            fileSize = target.files[0].size;
        }
        //存储文件
        //验证大小
        if (target.files[0].type !== "image/jpeg" && target.files[0].type !== "image/png") {
            layer.msg("只能选择图片", {icon: 2});
            return;
        }
        if (fileSize > 10 * 1024 * 1024) {
            alert("图片不能超过10M");
            $(target).val('');
            $(target).next().prop('src', '');
            return
        }
        //获取图片回显路径
        //var objUrl = getObjectURL(target.files[0]);

        //获取img节点
        var element = $(target).next();
        //上传
        var form = new FormData();

        let imgFile = target.files[0];
        let reader = new FileReader();
        reader.readAsDataURL(imgFile);
        reader.onload = function (evt) {
            let img_base64 = evt.target.result;
            //对图片进行压缩
            _dealFileBase64(img_base64, target.files[0], function (backData) {
                //判断类型
                if (backData === "false") {
                    layer.msg("当前上传不是图片!", {icon: 2});
                } else {
                    form.append('file[]', backData);
                    let isHasData = hot.getValue();
                    let src = "";
                    if (isHasData != null && isHasData !== '') {
                        src = $(isHasData)[0].src
                        //截取src http:之前得数据
                        src = src.substring(src.indexOf("/data/"), src.length);
                    }
                    form.append("path", src);
                    $.ajax({
                        type: "post",
                        url: "/order/......",
                        data: form,
                        contentType: false,
                        processData: false,
                        async: false,
                        success: function (rst) {
                            if (rst.code === 0) {
                                element.prop('src', rst.msg);
                            } else {
                                layer.msg(rst.msg, {time: 1000}, function () {
                                });
                            }
                        }
                    });
                    //给img节点src赋值设置固定大小
                    // element.prop('src', objUrl);
                    element.css({"height": "100px"});
                    let s = hot.getSelectedRange()[0].from;
                    hot.setDataAtCell([
                        [s.row, s.col, element[0].outerHTML]
                    ]);
                    hot.deselectCell(-1, -1);
                }
            })
        };
    }

 

    //转换为Base64 并调用 压缩方法
    function _dealFileBase64(image_base64, file, callback) {
        //判断文件是不是图片
        if ("image/jpeg" == file.type) {
            var obj = 0.5;
            var img = new Image();
            img.src = image_base64;
            img.onload = function () {
                var that = this;
                // 默认按比例压缩
                var w = that.width,
                    h = that.height,
                    scale = w / h;
                w = obj.width || w;
                h = obj.height || (w / scale);

                //生成canvas
                var canvas = document.createElement('canvas'),
                    ctx = canvas.getContext('2d');
                canvas.width = w;
                canvas.height = h;
                ctx.drawImage(that, 0, 0, w, h);

                // 默认图片质量为0.7
                var quality = 0.7;
                if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
                    quality = obj.quality;
                }

                // 回调函数返回base64的值
                var base64 = canvas.toDataURL('image/jpeg', quality);
                var bl = _processData(base64, file.type);
                var _file = new File([bl], file.name, {type: file.type})
                callback(_file);
            }
        } else {
            callback("false");
        }
    }


    function _processData(dataUrl, type) {
        var binaryString = window.atob(dataUrl.split(',')[1]),
            arrayBuffer = new ArrayBuffer(binaryString.length),
            intArray = new Uint8Array(arrayBuffer);
        for (var i = 0, j = binaryString.length; i < j; i++) {
            intArray[i] = binaryString.charCodeAt(i);
        }

        var data = [intArray], blob;

        try {
            blob = new Blob(data);
        } catch (e) {
            window.BlobBuilder = window.BlobBuilder ||
                window.WebKitBlobBuilder ||
                window.MozBlobBuilder ||
                window.MSBlobBuilder;
            if (e.name === 'TypeError' && window.BlobBuilder) {
                var builder = new BlobBuilder();
                builder.append(arrayBuffer);
                blob = builder.getBlob(type);
            } else {
                _showTip('版本过低，不支持图片压缩上传');
            }
        }
        return blob;
    }