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>