2010-12-13 66 views
1

我有一个显示在屏幕上的发票列表。现在,用户可以选择或取消选择一个复选框的发票或更改他们想要支付的金额。发生这种情况时,将汇总并显示所有发票的总金额。在jquery中修改json集合

这里的最终目标是跟踪来自服务器的数组数组。我使用json,因为它是标准化的。

然后,我有一个隐藏的使用JSON数据,如下所示:

<input id="InvoicingGridRows" name="InvoicingGridRows" type="hidden" 
value="[[{&quot;Value&quot;:&quot;TST-1000&quot;},{&quot;Value&quot;:346.230000}, 
{&quot;Value&quot;:null},{&quot;Value&quot;:null},{&quot;Value&quot;:null}, 
{&quot;Value&quot;:null}], 
[{&quot;Value&quot;:&quot;TST-1001&quot;}, 
{&quot;Value&quot;:126.970000},{&quot;Value&quot;:null},{&quot;Value&quot;:null}, 
{&quot;Value&quot;:null},{&quot;Value&quot;:null}]]" /> 

眼下,数据有很多关于数据空的占位符。

我想要做的是创建一个JavaScript对象,以便当事件发生在上面导致总结发生时,我可以启动有针对性的编辑/删除/添加。这里是我迄今所拥有的。

var invoiceRows = function() { 
    var targetControl = ''; 

    var getByInvoiceId = function (invoiceId) { 
     var data = $(targetControl.val()); 

     for (var x = 0; x < data.length; x++) { 
      if (data[x][0].Value == invoiceId) 
       return data[x]; 
     } 

     return null; 
    }; 

    return { 

     init: function (selector, invoices) { 
      targetControl = $(selector); 

      //set up the gridrows to defaulted values 
      targetControl.val(invoices); 
     }, 

     save: function (invoiceId, amount) { 
      var invoiceData = getByInvoiceId(invoiceId); 

      if (invoiceData) { 
       //update 
      } else { 
       //add new 
      } 
     }, 

     remove: function (invoiceId) { 
      //remove row with invoiceid 
     } 

    } 

}(); 

我的问题是我怎么轻松地修改/删除行以及添加新行到我的JSON对象,然后将其保存回隐藏字段?这甚至可能还是有更好的方法?我接受建议。

回答

1

您可以通过使用eval字符串转换在隐藏输入到JavaScript对象:

var dataObj = eval($("#InvoicingGridRows").val()); 

我应该这样做一次,然后做所有的操作,如删除此对象。当你准备好将其发送回服务器,将对象转换回字符串:

var dataStr = JSON.stringify(dataObj); 
$("#InvoicingGridRows").val(dataStr); 

另外,如果你可以修改你的服务器是如何工作的,让服务器创建一个包含数据的<script>标签准备好用作javascript对象 - 基本上是隐藏输入中的字符串,但没有引用整个事物的引用,并且前面有一个变量赋值。例如。让您的服务器输出:

<script type="text/javascript"> 
    var dataObj = {...}; 
</script> 

现在不需要eval()