Question

从json我需要根据javascript的月份和年份更新表格。

任何方法对我都没问题

作为参考，我创建了 FIDDLE ，但还没有完成，只想展示真实的环境

enter image description here

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表

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

Jquery - 我使用过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"
      }
    ]
  }
]

Answer 1

NEW 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");
    }
});
});

Answer 2

我会告诉你如何解决这个问题。现在，我不知道html和td是如何构建的确切tr，所以我无法为您提供确切的代码复制。

您让用户从下拉列表中选择月份和年份，您可以在jquery中获取该值。如果根据月份存储在option数组中的方式设置JSON值，那么这将有什么帮助呢。

  //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>

虽然这不是必需的，但这有助于访问JSON数组中的相应值。否则，您需要将option值或文本映射到数组或适当数据结构形式的月份名称。

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
    }
});

我希望这能让你开始朝着正确的方向前进。

下拉列值更改时更新html表

2 个答案: