update html-Tabelle als dropdown-Wert ändern

Vom json-ich brauche, um die Tabelle zu aktualisieren, basierend auf dem Monat und Jahr von javascript.

Jeder Ansatz ist gut, für mich

Referenz, die ich erstellt habe, die FIDDLEaber es ist noch nicht komplett, will nur zeigen die Reale Umgebung

link: :http://jsfiddle.net/qytdu1zs/1/

HTML

<div class="dropdown">
    <select name="one" class="dropdown-select">
    <option value="">Select Year</option>
    <option value="0">2014</option>
    <option value="1">2013</option>
    <option value="2">2012</option>
    </select>           
</div>


<div class="dropdown ">
    <select name="two" class="dropdown-select">
    <option value="">Select Month</option>
    <option value="0">January</option>
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option value="9">October</option>
    <option value="10">November</option>
    <option value="11">December</option>
    </select>           
</div>

html-Tabelle

<div id="example1"></div>

Jquery - die ich verwendet habe mustache.js

    $.ajax({
    url : 'data/front_finance.json',
    dataType : 'json',
    success : function (json) {

        var customer = $('#example1').columns({
                data : json,
                schema : [{
                        "header" : "ID",
                        "key" : "id",
                        "template" : "{{id}}"
                    }, {
                        "header" : "Name",
                        "key" : "name",
                        "template" : '<a href="#" onclick="javascript:ShowDialog(this.id);return false;" id="{{name}}" class="topopup">{{name}}</a>'
                    }, {
                        "header" : "Actual",
                        "key" : "actual"
                    }, {
                        "header" : "Target",
                        "key" : "target"
                    }, {
                        "header" : "Status",
                        "key" : "status",
                        "template" : "<img src ='{{status}}' alt='{{status}}'></img>"
                    }, {
                        "header" : "Trend",
                        "key" : "trend",
                        "template" : "<img src ='{{trend}}' alt='{{trend}}'></img>"
                    }
                ]
            });
    }
});

JSON

[
  {
    "year": "2013",
    "jan": [
      {
        "id": 1,
        "name": "data",
        "actual": "17",
        "target": "19",
        "status": "red",
        "trend": "down"
      }
    ],
    "Feb": [
      {
        "id": 2,
        "name": "data1",
        "actual": "10",
        "target": "19",
        "status": "red",
        "trend": "down"
      }
    ],
    "March": [
      {
        "id": 3,
        "name": "data2",
        "actual": "34",
        "target": "19",
        "status": "green",
        "trend": "down"
      }
    ]
  },
  {
    "year": "2014",
    "jan": [
      {
        "id": 1,
        "name": "data",
        "actual": "17",
        "target": "19",
        "status": "red",
        "trend": "down"
      }
    ],
    "Feb": [
      {
        "id": 2,
        "name": "data1",
        "actual": "10",
        "target": "19",
        "status": "red",
        "trend": "down"
      }
    ],
    "March": [
      {
        "id": 3,
        "name": "data2",
        "actual": "34",
        "target": "19",
        "status": "green",
        "trend": "down"
      }
    ]
  }
]

Was haben Sie versucht? Verwenden Sie jede Art von Rahmen oder plugin für die Tabelle?
ich habe verwendet mustache.js und jquery.columns.js zum laden der Tabelle

InformationsquelleAutor Manjunath Siddappa | 2014-10-10

NEUEN FIDDLE FIDDLE

$(document).ready(function (){
cloneObj= $("#example1").clone(); 
$('select[name=one]').on('change', function() {
    var selectedYear=($("option:selected", this).text());
    if (selectedYear!="Select Year"){

    for (var a in data){

        if(data[a].year==selectedYear){

            objMonth=data[a];

            return false;
        }
         }
    }else{
    objMonth=null;
    }
});
$('select[name=two]').on('change', function() {
var selectedYear=($("option:selected",  $('select[name=one]')).text());
    if (selectedYear!="Select Year"){
         var selectedMonth=($("option:selected", this).text());
        var jsonValue=objMonth[MonthMap[selectedMonth]];
        $("#example1").replaceWith(cloneObj.clone());

        $('#example1').columns({ data : jsonValue});    
    }else{
    alert("Please Select year please");
    }
});
});

InformationsquelleAutor Akash Sarawagi

Gebe ich Ihnen einen Ansatz auf, wie gehen über diese. Nun, ich weiß nicht genau, wie html Ihrer Tabelle, wie das td und tr strukturiert sind, so bin ich nicht in der Lage sein, um Ihnen genaue code, den Sie replizieren kann.

Lassen Sie den Benutzer wählen Sie den Monat und das Jahr aus der dropdown-deren Wert Sie können in jquery. Was helfen würde hier stark ist, wenn Sie die option Werte richten sich nach der Art und Weise Monate gespeichert werden, in der JSON array.

  //JSON array is structured somewhat like:

  "jan": [
  {
    "id": 1,
    "name": "data",
    "actual": "17",
    "target": "19",
    "status": "red",
    "trend": "down"
  }
 ]

//Your HTML could be
<select name="two" class="dropdown-select">
<option value="">Select Month</option>
<option value="jan">January</option>
<option value="Feb">February</option>
<option value="March">March</option>

Obwohl dies nicht notwendig ist, würde dies erheblich dazu beitragen, den Zugriff auf die entsprechenden Werte in der JSON array. Sonst würden Sie erfordern eine Zuordnung der option Werte oder text, um die Monatsnamen in form eines Arrays oder einer geeigneten Datenstruktur.

var selectedMonth;
var selectedYear; 
//Store the information selected from the dropdown menu for month and year respectively
//Assuming the JSON array is named arr
$.each( arr, function( index, value ) {
   if (arr[index]['year'] == selectedYear){
       var foo = arr[index]['year'][selectedMonth][0]; //Based on your array defintion
       //You can access the required info of this object by simply doing:
       //foo.id,foo.name,foo.status etc. and update the relevant table elements' html here
    }
});

Ich hoffe, das vermittelt Ihnen die ersten Schritte in die richtige Richtung.

InformationsquelleAutor Vivek Pradhan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.