上传文件添加/编辑jqgrid？

Question

我使用jqgrid，当我添加一行时，我想在服务器上推送一个文件。

我读了很多很多帖子，但我没有找到一个工作的例子。

许多例子不工作从jquery 1.5。

我发现人们谁理事会：

http://www.jainaewen.com/files/javascript/jquery/iframe-post-form.html#api

http://malsup.com/jquery/form/#file-upload

但是，我不都​​知道如何使用它们这与jqGrid的。

有人可以给我一个解决方案上传jqgrid文件的完整示例？

感谢，

Answer 1

好了，我已经找到：

<script type="text/javascript" src="/static/jqueryform/jquery.form.js"></script> 

<script type="text/javascript"> $(function(){ 

$("#citype").jqGrid({ url:"/api/citype/getdata", 
    datatype:'json', 
    mtype:'POST', 
    colNames:['No', 'Name', 'Icon'], 
    colModel :[ 
     {   name:'id', 
       index:'id', 
       width:55, 
       editable:false, 
       key:true, 
       hidden:true 
     }, 
     { 
       name:'name', 
       index:'name', 
       width:55, 
       editable:true 
     }, 
     { 
       name:'icon', 
       index:'icon', 
       edittype:'file', 
       width:80, 
       align:'right', 
       editable:true}, 
    ], 
    pager:'#pager', 
    rowNum:10, 
    rowList:[10,20,30], 
    sortname:'citype_id', 
    sortorder:'desc', 
    viewrecords:true, 
    gridview:true, 
    caption:'List', 
    useDataProxy: true, 
    dataProxy : function (opts, act) { 
      opts.iframe = true; 
      var $form = $('#FrmGrid_citype'); //use name of the grid 
      //Prevent non-file inputs double serialization 
      var ele = $form.find('INPUT,TEXTAREA,SELECT').not(':file'); 
      ele.each(function() { 
          $(this).data('name', $(this).attr('name')); 
          $(this).removeAttr('name'); 
          }); 

      //Send only previously generated data + files 
      $form.ajaxSubmit(opts); 
      //Set names back after form being submitted 
      setTimeout(function() { 
          ele.each(function() { 
            $(this).attr('name', $(this).data('name')); 
            jQuery("#citype").trigger('reloadGrid'); 
            }); 
          }, 200); 
    }, 
    editurl:"/submit" 


    }); 

// Action Option jQuery("#citype").jqGrid('navGrid','#pager', 
    {}, //options 
    { // edit options 
     closeAfterEdit:true, 
     height:280, 
     reloadAfterSubmit:true, 
     closeOnEscape : true, 
     useDataProxy: true, 
     onInitializeForm : function(formid){ 
        $(formid).attr('method','POST'); 
        $(formid).attr('action',''); 
        $(formid).attr('enctype','multipart/form-data'); 
       } 
    }, 
    { // add options 
     closeAfterAdd:true, 
     height:280, 
     reloadAfterSubmit:true, 
     closeOnEscape : true, 
     useDataProxy: true, 
     onInitializeForm : function(formid){ 
        $(formid).attr('method','POST'); 
        $(formid).attr('action',''); 
        $(formid).attr('enctype','multipart/form-data'); 
       } 
    }, 
    { // del options 
     reloadAfterSubmit:true 
    }, 
    {} // search options );