2013-10-21 139 views
0

我在jQuery和asp.net中使用json從數據庫中獲取數據,我每次都在爲每個表執行此操作。有沒有什麼辦法可以創建一個函數,並傳遞一些參數,比如(列名,表名和控件顯示在內)。動態json數組對象

function LoadData(Url, Data, ControlToShow, Columns){ 
    $.ajax({ type: "post", 
     url: Url, 
     data: Data, 
     contentType: "application/json;charset=utf-8", dataType: "json", 
     success: function (data) { 
      if (data.d != null || data.d != 'null') { 
       var items = data.d; 

       $("#" + ControlToShow).append(items[0].Columns[1]); 
      } 
     } 
} 

或者換句話說通過將列名狀

var items = response.d; 
var colName = 'Customers'; 
alert(items[0].colName); 

colName = 'CustomerID'; 
alert(items[0].colName); 

或者像這樣使用JSON數組對象的動態。

回答

0

是的,你可以這樣做: -

function LoadData(Url, Data, ControlToShow, ColumnName) { 
    $.ajax({ 
     type: "post", 
     url: Url, 
     data: Data, 
     contentType: "application/json;charset=utf-8", 
     dataType: "json", 
     success: function (data) { 
      if (data.d != null) { 
       var items = data.d; 
       $("#" + ControlToShow).append(items[0][ColumnName]); 
      } 
     } 
    }); 
} 

,並調用它像:

LoadData(serviceUrl, {data_you_need_to_pass}, 'ControlID', 'CustomerID'); 
0

嘗試創建你的json這樣的東西。所以你可以讀取列和數據來創建表。

 {"column_name":['column1','column2','column3'],"records":[{'id':1 ...}]} 

選中修改CODE,FIDDLE

 $(function(){ 
      var json ={"column_name":['ID','COUNTRY'],"records":[{"id":1 ,"name": "USA"},{"id":2 ,"name": "INDIA"},{"id":3 ,"name": "AUSTRALIA"}]}; 
      var column_arr = json.column_name; 
      var column_arr_length = column_arr.length;//no of column present. 

      // creating table header 
      var $thead = $('#mytable thead'); 
      var row = '<tr>' 
      for(var i= 0; i< column_arr_length;i++){ 
       row += '<th>'+column_arr[i]+'</th>'; 
      } 
      row += '</tr>'; 

      $thead.append(row);// adding head to table 

      // creating table body 
      var $body = $('#mytable tbody'); 
      var body_data = json.records; 
      var body_data_length = body_data.length;//no of row in body. 
      var body_row = ''; 
      for(var i= 0; i< body_data_length;i++){ 
       var row_obj = body_data[i]; 
       console.log(row_obj); 
       body_row += '<tr>'; 
       for(var key in row_obj){ 
        body_row += '<td>'+row_obj[key]+'</td>'; 
       } 
       body_row += '</tr>'; 
      } 

      $body.append(body_row);// adding rows to table 
     }) 

HTML代碼

<table id="mytable"> 
     <thead></thead> 
     <tbody></tbody> 
    </table> 
+0

你能爲我提供asp.net和JSON –

+0

檢查編輯的代碼,HTTP的例子://jsfiddle.net/ABZC9/1/ –

1

在javascript中你可以通過名字來訪問他們訪問屬性:

var items = response.d; 
alert(items[0].Customers); 
alert(items[0].CustomerID); 

,或者如果屬性的名稱存儲在一個變量,你可以訪問他們喜歡的:

var items = response.d; 
var colName = 'Customers'; 
alert(items[0][colName]); 

colName = 'CustomerID'; 
alert(items[0][colName]); 
+0

可能是好的爲註釋不是一個答案...... – Stephan

+0

你是對的。使它更具描述性 –

0

您可以創建一個模板視圖並傳入每個表的數據。在主體部分中,您可以簡單地迭代數據並將其附加到表格的正文部分。

<table id="<%= YOUR TABLE NAME %>"> 
<thead> 
<tr> 
<th><% YOUR COLUMN NAME %></th> 
.... 
</tr> 
<thead> 
<tbody class="mytable"></tbody> 
... 
</table> 

success: function (data) { 
      if (data.d != null || data.d != 'null') { 
       var items = data.d; 

var tr = $('<tr></tr>').appendTo('.mytable'); 
       $.each(data.d, function(){ 

        //append your td elements to your tr above 

       }); 
      } 
    }