jsgrid в шаблоне HTML5 - PullRequest
Новая
       3

jsgrid в шаблоне HTML5

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

Я пытаюсь повторить jsgrid через шаблон HTML5, такой же вызов ajax как источник данных с другой переменной. Отображается только первая сетка.

Это выполнимо, и если да, то можете ли вы дать руководство?

Спасибо.

Вот скрипт: 

var template = document.querySelector('template').content;                
for (var i = 0; i < distinctQuote.length; i++) 
{

     $('.jsSnapshot').jsGrid({
          width: "100%",
          height: "auto",

          inserting: false,
          editing: true,
          sorting: true,
          autoload: true,
          noDataContent: "No record found",

          controller: {
               loadData: function () {
                  var d = $.Deferred();
                  $.ajax({
                                url: "/AJAXWebServices/UnderwriterWorksheet/UnderwriterWorksheet.asmx/GetQuickSnapshotByQuoteId",
                                data: { quoteId: distinctQuote[i] },
                                dataType: "json",
                                type: "post"
                            }).done(function (response) {
                                d.resolve(response);
                            });

                            return d.promise();
                        }
                    },

             fields: [
                        { name: "QuickSnapShotId", type: "number", visible: false },
                        { name: "QuickSnapShotFieldId", type: "number", visible: false },
                        { name: "QuickSnapShotFieldName", title:"", type: "string", width: 100, validate: "required" },
                        { name: "CurrentYear", title:"Current Year", type: "number", width: 200, validate: "required" },
                        { name: "LastYear", title:"Last Year", type: "number", width: 200 }
                    ]
                });

    document.querySelector('#container').appendChild(document.importNode(template, true));

}

1 Ответ

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

Я понял это. Рабочий код: 

 var template = document.querySelector('#template').content;                
 for (var i = 0; i < distinctQuote.length; i++) {

                    document.querySelector('#container').appendChild(document.importNode(template, true));

                    $('.jsGridSnapshot').last().jsGrid({
                        width: "100%",
                        height: "auto",

                        inserting: false,
                        editing: true,
                        sorting: true,
                        autoload: true,
                        noDataContent: "No record found",

                        controller: {
                            loadData: function () {
                                var d = $.Deferred();
                                $.ajax({
                                    url: "/AJAXWebServices/UnderwriterWorksheet/UnderwriterWorksheet.asmx/GetQuickSnapshotByQuoteId",
                                    data: { quoteId: distinctQuote[i] },
                                    dataType: "json",
                                    type: "post"
                                }).done(function (response) {
                                    d.resolve(response);
                                });

                                return d.promise();
                            }
                        },

                        fields: [
                            { name: "QuickSnapShotId", type: "number", visible: false },
                            { name: "QuoteId", type: "number", visible: false },
                            { name: "QuickSnapShotFieldId", type: "number", visible: false },
                            { name: "QuickSnapShotFieldName", title:"", type: "string", width: 100, validate: "required" },
                            { name: "CurrentYear", title:"Current Year", type: "number", width: 200, validate: "required" },
                            { name: "LastYear", title:"Last Year", type: "number", width: 200, validate: "required" }
                        ],

                        });                        
                }
            }
...