使用jquery在網格中加載數據

Question

我正在使用jqwidgets。在那裏有一個很好的網格小部件，我想用它。要使用網格我使用演示代碼：

$(document).ready(function() { 
     var theme = getTheme(); 
     var url = "../sampledata/data.php"; 
     // prepare the data 
     var source = 
     { 
      datatype: "json", 
      datafields: [ 
       { name: 'firstname' }, 
       { name: 'lastname' }, 
       { name: 'productname'}, 
       { name: 'quantity', type: 'int' }, 
       { name: 'price', type: 'float' }, 
       { name: 'total', type: 'float' } 
      ], 
      id: 'id', 
      url: url, 
      root: 'data' 
     }; 
     var dataAdapter = new $.jqx.dataAdapter(source); 
     $("#jqxgrid").jqxGrid(
     { 
      width: 670, 
      source: dataAdapter, 
      theme: theme, 
      columnsresize: true, 
      columns: [ 
       { text: 'First Name', dataField: 'firstname', width: 100 }, 
       { text: 'Last Name', dataField: 'lastname', width: 100 }, 
       { text: 'Product', dataField: 'productname', width: 180 }, 
       { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' }, 
       { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' }, 
       { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' } 
      ] 
     }); 
    }); 

這是完美的。但是現在我想要在表單中按下按鈕時加載網格。

<form action="" method="post"> 
<select name="city"> 
<option value="amsterdam">amsterdam</option> 
<option value="rotterdam">rotterdam</option> 
<option value="denhaag">den haag</option> 
<option value="eindhoven">eindhoven</option> 
</select> 
<input name="Submit" type="submit" value="Find family" /></form> 

所以當我選擇阿姆斯特丹時，應該將data.php？city = amsterdam加載到網格中。

我可以使用iframe來做到這一點，但有沒有辦法做到這一點在我只重新加載網格的網頁？

Answer 1

JS：

$(document).ready(function() { 
    $("#submit").click(function(){ 
    var theme = getTheme(); 
    var url = "../sampledata/data.php?city="+$("city").val(); 
    // prepare the data 
    ............. 
    })  

}); 

HTML：

<select name="city" id="city"> 
    ..... 
</select> 
<input name="Submit" type="submit" value="Find family" id="submit" /></form>