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

を