我正在實施handsontable，在那裏我需要顯示excel數據在handsontable中

我需要從excle表單中顯示數據，但是我在中間觸發了，任何人都請在這裏幫我。我正在實施handsontable，在那裏我需要顯示excel數據在handsontable中

我的控制器代碼

public ActionResult Index() 
{ 
    return View(); 
} 
public ActionResult GetJsonData(FormCollection formCollection) 
{ 
    var usersList = new List<User>(); 
    if (Request != null) 
    { 
     HttpPostedFileBase file = Request.Files["UploadedFile"]; 
     if ((file != null) && (file.ContentLength > 0) &&  !string.IsNullOrEmpty(file.FileName)) 
     { 
      string fileName = file.FileName; 
      string fileContentType = file.ContentType; 
      byte[] fileBytes = new byte[file.ContentLength]; 
      var data = file.InputStream.Read(fileBytes, 0, Convert.ToInt32(file.ContentLength)); 
      using (var package = new ExcelPackage(file.InputStream)) 
      { 
       var currentSheet = package.Workbook.Worksheets; 
       var workSheet = currentSheet.First(); 
       var noOfCol = workSheet.Dimension.End.Column; 
       var noOfRow = workSheet.Dimension.End.Row; 
       for (int rowIterator = 2; rowIterator <= noOfRow; rowIterator++) 
       { 
        var user = new User(); 
        user.FirstName = workSheet.Cells[rowIterator, 1].Value.ToString(); 
        user.LastName = workSheet.Cells[rowIterator, 2].Value.ToString(); 
        usersList.Add(user); 
       } 
      } 
     } 
    }  
    return View("GetJsonData",usersList); 
}

索引視圖

<h2>Index</h2> 
@using (Html.BeginForm("GetJsonData", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{ 
    <table> 
     <tr> 
      <td>File:</td> 
      <td> 
       <input type="file" name="UploadedFile" /> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2"> 
       <input type="submit" name="Submit" value="Submit" id="btnsave" /> 
      </td> 
     </tr> 
    </table> 
} 

<div id="example1" class="hot handsontable htColumnHeaders"></div> 

<script type="text/javascript"> 
    $('#btnsave').click(function() { 
     var url = '/Home/GetJsonData'; 
     $.get(url, 
      null, 
      function (data) { 
       debugger; 
       var container = document.getElementById('#example1'); 
       var hot = new Handsontable(container, { 
        data: data, 
        rowheader: true, 
        colheader: true 
       }); 

      }); 
    }); 
</script>

GetJsonData視圖

<div id="example1" class="hot handsontable htColumnHeaders"></div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     var url = '/Home/GetJsonData'; 
     $.get(url, 
      null, 
      function (data) { 
        var container = document.getElementById('#example1'); 
       var hot = new Handsontable(container, { 
        data: data, 
        rowheader: true, 
        colheader: true 
       }); 
       debugger; 
      }); 
    }); 
</script>

來源

2016-03-01 Chandan Jha

你在哪裏卡住了？什麼不起作用？你得到什麼錯誤？ –

我在handontable中獲得null值， –

在哪行代碼中。你需要解釋這個問題。 –

已經解決了這個問題。

function UploadExcel() { 

     var formData = new FormData(); 
     var totalFiles = document.getElementById("Uplaod").files.length; 

     for (var i = 0; i < totalFiles; i++) { 
      var file = document.getElementById("Uplaod").files[i]; 

      formData.append("Document", file); 
     } 

     $.ajax({ 
      url:"/Home/UpoadFile", 
      type: "POST", 
      dataType: "JSON", 
      data: formData, 
      contentType: false, 
      processData: false, 
      //data: JSON.stringify(oInvoice), 
      //contentType: "application/json; charset=utf-8", 
      //async: false, 
      success: function (result) { 

       debugger; 
       if (result != null) 
       { 
        //var data2 = result, 
        // container = document.getElementById('example1'), 
        // hot1; 
        //hot1 = new Handsontable(container, { 
        // data: JSON.parse(JSON.stringify(data2)) 
        //}); 
        //document.addEventListener("DOMContentLoaded", function() { 
         var data = result, 
          example1 = document.getElementById('example1'), 
          settings1, 
          emailValidator; 

         emailValidator = '^[^@@\\s][email protected]@([^@@\\s]+\\.)+[^@@\\s]+$'; 
         emailValidator=function(value,callback) 
         { 
          setTimeout(function() { 
           if (/[email protected]@.+/.test(value)) { 
            callback(true); 
           } 
           else { 
            callback(false); 
           } 
          }, 10); 
         } 

         settings1={ 
          data: data, 
          colHeaders: ['FirstName','LastName','Email'], 
          columns:[ 
           {data:'FirstName'}, 
           {data:'LastName'}, 
           { data: 'Email', validator: emailValidator, allowInvalid: false } 

          ] 
         } ; 
         var hot = new Handsontable(example1, settings1); 

         //function bindDumpButton() 
         //{ 
         // if (typeof Handsontable === "undefined") { 
         //  return; 
         // } 

         // //Handsontable.Dom.AddEvent(document.body, 'click', function (e) { 
         // // var element = e.target || e.srcElement; 

         // // if (element.nodeName == "BUTTON" && element.name == 'dump') { 
         // //  var name = element.getAttribute('data-dump'); 
         // //  var instance = element.getAttribute('data-instance'); 
         // //  var hot = window[instance]; 
         // //  console.log('data of ' + name, hot.getData()); 
         // // } 
         // //}); 

         //} 
         //bindDumpButton(); 
        // }); 
         } 

       else { 


        // alert("Something Seems wrong. try agin afterwards"); 
       } 

      }, 
      error: function (err) { 

      } 
     }); 
    }

來源

2016-03-02 05:37:08

我正在實施handsontable，在那裏我需要顯示excel數據在handsontable中

回答

相關問題