Как вставить список массива строк в строки таблицы в Javascript

Привет, У меня есть проект MVC, и я вызываю POST для получения данных с серверной стороны, которая отлично работает!Как вставить список массива строк в строки таблицы в Javascript

У меня есть таблица bootstrap css, к которой я хочу привязать все данные в функции обратного вызова для POST.

Ниже мой фрагмент кода:

JS & В.М.

var map; 
var updateFeature; 
function OpCropData(opCropName, opET, opEffRain, opCIR, opRecharge) { 
var self = this; 
self.opCropName = ko.observable(); 
self.opET = ko.observable(); 
self.opEffRain = ko.observable(); 
self.opCIR = ko.observable(); 
self.opRecharge = ko.observable(); 
} 

var VM = function(){ 
require([ 
    "esri/map", 
    "esri/layers/FeatureLayer", 
    "esri/dijit/AttributeInspector", 


    "esri/symbols/SimpleLineSymbol", 
    "esri/symbols/SimpleFillSymbol", 
    "dojo/_base/Color", 

    "esri/layers/ArcGISDynamicMapServiceLayer", 
    "esri/config", 

    "esri/tasks/query", 

    "dojo/parser", 
    "dojo/dom-construct", 
    "dijit/form/Button", 

    "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" 
], 

function (
    Map, FeatureLayer, AttributeInspector, 
    SimpleLineSymbol, SimpleFillSymbol, Color, 
    ArcGISDynamicMapServiceLayer, esriConfig, 
    Query, 
    parser, domConstruct, Button 
) { 
    parser.parse(); 

    var self = this; 
    //ComputedCropData Values 
    self.ComputedCropData = ko.observableArray([OpCropData()]); 

    // refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html 
    esriConfig.defaults.io.proxyUrl = "/proxy"; 

    map = new Map("mapDiv", { 
     //basemap: "county", 
     //center: [-97.395, 37.537], 
     //zoom: 5 
    }); 

    map.on("layers-add-result", initSelectToolbar); 

    var petroFieldsMSL = new ArcGISDynamicMapServiceLayer("http://server18/ArcGIS/rest/services/TestMaps/CIR/MapServer"); 
    petroFieldsMSL.setDisableClientCaching(true); 
    map.addLayer(petroFieldsMSL); 

    var petroFieldsFL = new FeatureLayer("http://server18/ArcGIS/rest/services/TestMaps/CIR/MapServer/7", { 
     mode: FeatureLayer.MODE_SELECTION, 
     outFields: ["OBJECTID", "SCTCOR_ID", "DIR", "TWNSHP", "RNG", "SECTION_", "X_COORD", "Y_COORD"] 
    }); 
    var selectionSymbol = new SimpleFillSymbol(
     SimpleFillSymbol.STYLE_NULL, 
     new SimpleLineSymbol(
     "solid", 
     new Color("blue"), 
     2 
    ), 
     null 
    ); 
    petroFieldsFL.setSelectionSymbol(selectionSymbol); 

    petroFieldsFL.on("edits-complete", function() { 
     petroFieldsMSL.refresh(); 
    }); 

    map.addLayers([petroFieldsFL]); 



    function initSelectToolbar(evt) { 
     var petroFieldsFL = evt.layers[0].layer; 
     var selectQuery = new Query(); 

     map.on("click", function (evt) { 
      selectQuery.geometry = evt.mapPoint; 
      petroFieldsFL.selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW, function (features) { 
       if (features.length > 0) { 
        //store the current feature 
        updateFeature = features[0]; 
        map.infoWindow.setTitle(features[0].getLayer().name); 
        map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint)); 
       } else { 
        map.infoWindow.hide(); 
       } 
      }); 
     }); 

     map.infoWindow.on("hide", function() { 
      petroFieldsFL.clearSelection(); 
     }); 



     var layerInfos = [{ 
      'featureLayer': petroFieldsFL, 
      'showAttachments': false, 
      'isEditable': false, 
      'fieldInfos': [ 
       { 'fieldName': 'OBJECTID', 'isEditable': false, 'label': 'OBJECTID:' }, 
       { 'fieldName': 'SCTCOR_ID', 'isEditable': false, 'label': 'SCTCOR_ID:' }, 
       { 'fieldName': 'DIR', 'isEditable': false, 'label': 'DIR:' }, 
       { 'fieldName': 'TWNSHP', 'isEditable': false, 'label': 'TWNSHP:' }, 
       { 'fieldName': 'RNG', 'isEditable': false, 'label': 'RNG:' }, 
       { 'fieldName': 'SECTION_', 'isEditable': false, 'label': 'SECTION_:' }, 
       { 'fieldName': 'X_COORD', 'isEditable': false, 'label': 'X_COORD:' }, 
       { 'fieldName': 'Y_COORD', 'isEditable': false, 'label': 'Y_COORD:' } 

      ] 
     }]; 

     var attInspector = new AttributeInspector({ 
      layerInfos: layerInfos 
     }, domConstruct.create("div")); 

     //add a save button next to the delete button 
     var saveButton = new Button({ label: "Save", "class": "saveButton" }); 
     domConstruct.place(saveButton.domNode, attInspector.deleteBtn.domNode);//, "after"); 

     //add a data button 
     var dataButton = new Button({ label: "Data", "class": "dataButton" }); 
     domConstruct.place(dataButton.domNode, attInspector.deleteBtn.domNode, "after"); 


     dataButton.on("click", function GetTRS() { 
      var objectID = updateFeature.attributes.OBJECTID; 
      var Direction = updateFeature.attributes.DIR; 
      var Township = updateFeature.attributes.TWNSHP; 
      var Range = updateFeature.attributes.RNG; 
      var Section = updateFeature.attributes.SECTION_; 
      $.post("/Home/Index", { "T": Township, "R": Range, "S": Section }, function (data) { 
       for (var i = 0; i < data.length; i++) { 
        self.ComputedCropData.push(data[i]); 
       } 
      }, 'json'); 

     }); 
     map.infoWindow.setContent(attInspector.domNode); 
     map.infoWindow.resize(350, 240); 
    } 
})}; 

$(document).ready(function() { 
    ko.applyBindings(new VM()); 
    });

HTML

<div class="container"> 
<table class="Computed CIR table table-bordered"> 
    <thead> 
     <tr> 
      <th style="text-align: center"><b>Crop</b></th> 
      <th style="text-align: center"><b>ET (inches)</b></th> 
      <th style="text-align: center"><b>Eff.Rain (inches)</b></th> 
      <th style="text-align: center"><b>CIR (inches)</b></th> 
      <th style="text-align: center"><b>Recharge (inches)</b></th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: ComputedCropData"> 
     <tr> 
      <td style="text-align: center" data-bind="text: opCropName"></td> 
      <td style="text-align: center" data-bind="text: opET"></td> 
      <td style="text-align: center" data-bind="text: opEffRain"></td> 
      <td style="text-align: center" data-bind="text: opCIR"></td> 
      <td style="text-align: center" data-bind="text: opRecharge"></td> 
     </tr> 
    </tbody> 
</table>

Данные вернулись сюда m post - СПИСОК строковых массивов с каждым массивом, имеющим пять типов данных, которые я пытаюсь связать с ячейками в каждой строке таблицы.

Благодарим вас заранее!

Я обновил свою рабочую модель без каких-либо обязательных вопросов, единственная проблема у меня в настоящее время является то, что ko.observable массив «self.ComputedCropData» не получить толкнул со всеми данными, но представление не обновляется

источник

2013-12-16 sss111

Я предполагаю, что вы забыли добавить тег knockoutjs? –

лучше написать свою модель просмотра, чтобы получить правильный ответ. –

Я тоже новичок в Knockout, поэтому я не уверен, могу ли я использовать функцию View Model, как я показал. – sss111

Данные, возвращаемые в ваш обратный вызов, должны быть привязаны к вашей модели просмотра как-то. Я не знаю, как вы создаете свой ViewModel, но если у вас есть что-то вроде этого:

var vm = { 
    data: ko.observableArray([]) 
}

то вам нужно обновить этот массив данных в вашем АЯКС обратного вызова.

$.post("/Home/Index", 
     { "T": Township, "R": Range, "S": Section }, 
     function (data) { vm.data(data); }, 'json');

Это предполагает, что в вашем наблюдаемом массиве данных хранятся простые старые объекты JavaScript, что отлично. Однако, если вам нужно, чтобы эти объекты были сопоставлены объектам с нокаут-наблюдаемыми, вам нужно было бы как-то сопоставить их. Вы можете отобразить все вручную или использовать knockout's mapper

источник

2013-12-16 23:08:10

Как вставить список массива строк в строки таблицы в Javascript

ответ

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