2016-03-10 3 views
0

Я использую jsgrid для создания редактируемой таблицы. Я использовал код из этого demo. Единственное различие заключается в том, что im использует mvc вместо web api.Данные не заполняют таблицу, созданную с помощью jsgrid

При взгляде на сеть контроллер возвращает необходимые данные json, а jsgrid также отображает материал разбиения на страницы в нижней части таблицы. Однако таблица не заполняется

Вот HTML и код Javascript

<div id="jsGrid"></div> 

@section scripts { 
<script src="http://js-grid.com/js/jsgrid.min.js"></script> 
<script> 
    $("#jsGrid").jsGrid({ 
     height: "50%", 
     width: "100%", 

     filtering: true, 
     inserting: true, 
     editing: true, 
     sorting: true, 
     paging: true, 
     autoload: true, 

     pageSize: 10, 
     pageButtonCount: 5, 

     deleteConfirm: "Do you really want to delete client?", 

     controller: { 
      loadData: function (filter) { 
       return $.ajax({ 
        type: "GET", 
        url: "get", 
        data: filter, 
        dataType: "json" 
       }); 
      }, 

      insertItem: function (item) { 

      }, 

      updateItem: function (item) { 

      }, 

      deleteItem: function (item) { 

      } 
     }, 

     fields: [ 
      { name: "SKU", type: "text", width: 50 }, 
      { name: "PartNumber", type: "text", width: 100 }, 
      { name: "ProductLineName", type: "text", width: 50 }, 
      { name: "ProductLineId", type: "text", width: 50 }, 
      { name: "Deleted", type: "checkbox", sorting: false }, 
      { type: "control" } 
     ] 
    }); 
</script> 

Вот соответствующий метод в контроллере

public async Task<ActionResult> Get() 
     { 
      var query = db.Products 
       .Select(p => new ProductDto() 
       { 
        PartNumber = p.PartNumber, 
        SKU = p.SKU, 
        ProductLineName = p.ProductLines.ProductLineName, 
        ProductLineId = p.ProductLineId, 
        Deleted = p.Deleted 
       }); 

      var products = await query.ToListAsync(); 

      return Json(products, JsonRequestBehavior.AllowGet); 
     } 

Каждый знает, что я могу сделать, чтобы отобразить/привязать возвращенные данные к таблице?

+0

Вы работали над этим? У меня одинаковая проблема. –

+0

WTF с этим материалом javascript. Абсолютно никакого понятия о том, что может быть проблемой. Я просто отказался от jqGrid по той же причине. –

ответ

0

Измените вызов loadData, потому что он не указывает, что делать, когда выполняется ajax-вызов.

Попытка переписать его, как показано ниже:

controller: { 
     loadData: function() { 
     var d = $.Deferred(); 
     $.ajax({ 
      url: "get", 
      dataType: "json", 
      data: filter 
     }).done(function(response) { 
      d.resolve(response.value); 
     }); 

     return d.promise(); 
    } 
}, 
+0

также использовать loadonce: true, чтобы включить подкачку на стороне клиента. – asb

+0

oops sorry, я был не понятен: предыдущий должен быть прочитан как «Таблица все еще не заполнена данными, а элементы разбиения на страницы внизу больше не существуют». добавлено «loadedonce: true». То же самое произошло: таблица все еще не заполнена данными, а элементы разбиения на страницы внизу отсутствуют. – osse

+0

Этот код не работал, но просто возвращал $ .ajax –

0

Это на стороне клиента Javascript, который я использовал, который, наконец, поставить некоторые данные в сетке: (только часть контроллера)

    controller: { 
         loadData: function (filter) { 
          console.log("1. loadData"); 

          return $.ajax({ 
           type: "GET", 
           url: "/Timesheet/GetTimesheet/", 
           dataType: "json", 
           data: filter 

          console.log("3. loadData complete"); 
         } 

None опубликованного явного кода обещания, функционирующего вообще. Очевидно, $ .ajax возвращает обещание.

и это был мой MVC контроллер код, который я назвал с AJAX (C#):

public async Task<ActionResult> GetTimesheet() 
    { 
     int id = Convert.ToInt32(Session["UID"]); 

     var tl = (
      from ts in db.Tasks 
      orderby ts.Task_Date descending 
      where ts.Emp_ID == id 
      select new 
      { 
       ID = ts.Task_ID, 
       Date = ts.Task_Date, 
       Client = ts.Customer_ID, 
       Hours = ts.Total_Hours 
      } 
     ).Take(4); 

     var jsonData = await tl.ToListAsync(); 

     return Json(jsonData, JsonRequestBehavior.AllowGet); 
    } 

Там нет фактических примеров, необходимых для Json jsGrid. где-то, но это сработало для меня - не отмечайте заголовков или чего-то еще.

Смежные вопросы