jqGrid не вставляет данные внутрь - PullRequest
Новая
       12

jqGrid не вставляет данные внутрь

0 голосов
/ 19 мая 2018

Я пытаюсь отобразить некоторые записи из моей базы данных в jqGrid в веб-проекте asp.net MVC.Пользовательский интерфейс Grid с заголовком, заголовком столбца и пейджером отображается в моем представлении, за исключением данных, извлеченных из базы данных.

Каждая из записей, извлеченных из таблицы базы данных, используется для создания объекта Element, определение приведено ниже: 

public class Element{
    public string bid;
    public string user_id;
    public string name;
    public string queue_req_time;
}

Затем все объекты Element вставляются в объект List и затем преобразуются в JSON.объект с помощью метода с именем UpdateData в контроллере и возвращает: 

public JsonResult UpdateData(){
    List<Element> in_queue_list = new List<Element>();
    // query command 'sql_command' is instantiated here.
    SqlDataReader reader = sql_command.ExecuteReader();
    while(reader.Read()){
        int iter = 0;
        user_id = reader.GetValue(iter++).ToString();
        bid = reader.GetValue(iter++).ToString();
        name = reader.GetValue(iter++).ToString();
        queue_req_time = reader.GetValue(iter++).ToString();
        Element temp_elem = new Element(user_id, bid, name, queue_req_time);
        in_queue_list.Add(temp_elem);
    }
    return Json(in_queue_list.ToArray(), JsonRequestBehavior.AllowGet);
}

Просмотр файла: 

 <!DOCTYPE html>
 <html>
 <head>
      <meta name="viewport" content="width=device-width" />
      <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
      <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
      <script src="~/Scripts/jquery-3.3.1.min.js"></script>
      <script src="~/Scripts/i18n/grid.locale-en.js"></script>
      <script src="~/Scripts/jquery.jqGrid.min.js"></script>
      <script>
         $(document).ready(function(){
             $.ajax({
                 url: "UpdateData",
                 method: "GET"
             }).done(function (result) {
                var result_x = JSON.stringify(result);
                console.log(result_x);
                UpdateGrid(result_x);
             });
         }

         function UpdateGrid(result){
             $("#jqGridTable").jqGrid({
                 datatype: "array",
                 colNames: ["User ID", "Code", "Name", "Request Sent At"],
                 colModel: [
                        { name: "user_id", index: "user_id", align: 'center' },
                        { name: "bid", index: "branch_id", align: 'center' },
                        { name: "name", index: "branch_name", align: 'center' },
                        { name: "queue_req_time", index: "queue_req_time", align: 'center' }
                 ],
                 data: result,
                 rowNum: 20,
                 rowList: [10, 20, 30],
                 gridview: true,
                 caption: "Waiting in Queue",
                 loadonce: true,
                 pager: "#jqGridPagerDiv",
                 loadError: function (xhr, status, error) {
                     //alert("Response Text \n"+ xhr.responseText);
                     alert("Status \n" + status);
                     alert("Error \n" + error);
                 },
                 loadComplete: function (data) {
                     alert("load complete with "+data);
                 }
                });
            }
    </head>
    <body>
        <div>
            <table id="jqGridTable"><tr><td></td></tr></table>
            <div id="jqGridPagerDiv"></div>
        </div>
    </body>

Данные, возвращаемые из URL-адреса «UpdateData», равны 

[Object {bid="68", user_id="1068","name":"XYZ","queue_req_time":"5/15/2018 10:44:50 PM"}, Object {bid="1", user_id="1001","name":"NM","queue_req_time":"5/15/2018 10:45:02 PM"}]

Ипосле stringyfying это: 

[{"bid":"68","user_id":"1068","name":"XYZ","queue_req_time":"5/15/2018 10:44:50 PM"},{"bid":"1","user_id":"1001","name":"NM","queue_req_time":"5/15/2018 10:45:02 PM"}]

И я пытаюсь загрузить эти stringyfied данные.

Теперь Сетка не отображает полученные и обработанные данные

[Пакетов: 1.jQuery.jqGrid-4.4.4 от Trirand;2. jQuery 3.3.1, все устанавливаются из диспетчера пакетов Nuget]

1 Ответ

0 голосов
/ 20 мая 2018

Нет datatype: "array".Вместо этого следует использовать datatype: "local", если вы заполняете входные данные в отношении параметра data.

В качестве альтернативы вы можете удалить опции datatype: "array" и data: result из jqGrid и использовать datatype: "json", url: "UpdateData" без каких-либо дополнительных $.ajax запросов.jqGrid сделает вызов Ajax для вас.Кроме того, версия 4.4.4 очень старая .Если вы используете NuGet, вам следует удалить пакет «jQuery.jqGrid» и установить вместо него free-jqGrid 4.15.4.Я бы порекомендовал вам прочитать страницу как краткое введение в использование "free jqGrid" форка jqGrid.Например, строго рекомендуется использовать Font Awesome 4.x .

Наконец, лучше использовать ToString("o") для возврата даты в формате ISO и использовать formatter: "date" в colModel.

...