file-upload - jsgrid 需要上传和显示图像的功能

Question

我正在使用 jsGrid 来显示数据库中的数据。但我遇到了一个问题。

所有文本字段或选择字段都正确呈现。但是我需要添加一个自定义字段，该字段具有在编辑时添加图像（当没有添加图像时）一行并在使用 jsGrid 加载页面时在字段上显示图像的功能。我搜索了网络，但没有找到任何解决方案来解决我的问题。

Answer 1

这就是它的实现方式：

var data = [
    { Name: "John", Img: "http://placehold.it/250x250" },
    { Name: "Jimmy", Img: "http://placehold.it/250x250" },
    { Name: "Tom", Img: "http://placehold.it/250x250" },
    { Name: "Frank", Img: "http://placehold.it/250x250" },
    { Name: "Peter", Img: "http://placehold.it/250x250" }
];

$("#dialog").dialog({
    modal: true,
    autoOpen: false,
    position: { 
        my: "center",
        at: "center",
        of: $("#jsgrid")
    }
});

$("#jsgrid").jsGrid({
    autoload: true,
    width: 350,
    filtering: true,
    inserting: true,
    controller: {
        loadData: function(filter) {
            return !filter.Name 
                ? data
                : $.grep(data, function(item) { return item.Name.indexOf(filter.Name) > -1; });

            // use ajax request to load data from the server
            /*
            return $.ajax({
                method: "GET",
                url: "/YourUrlToAddItemFilteringScript",
                data: filter
            });
            */
        },
        insertItem: function(insertingItem) {
            var formData = new FormData();
            formData.append("Name", insertingItem.Name);
            formData.append("Img[]", insertingItem.Img, insertingItem.Img.name);

            return $.ajax({
                method: "post",
                type: "POST",
                url: "/YourUrlToAddItemAndSaveImage",
                data: formData,
                contentType: false,
                processData: false
            });
        }        
    },
    fields: [
        {
            name: "Img",
            itemTemplate: function(val, item) {
                return $("<img>").attr("src", val).css({ height: 50, width: 50 }).on("click", function() {
                    $("#imagePreview").attr("src", item.Img);
                    $("#dialog").dialog("open");
                });
            },
            insertTemplate: function() {
                var insertControl = this.insertControl = $("<input>").prop("type", "file");
                return insertControl;
            },
            insertValue: function() {
                return this.insertControl[0].files[0]; 
            },
            align: "center",
            width: 120
        },
        { type: "text", name: "Name" },
        { type: "control", editButton: false }
    ]
});

检查工作小提琴http://jsfiddle.net/tabalinas/ccy9u7pa/16/

根据 GitHub 上的问题：https ://github.com/tabalinas/jsgrid/issues/107