0

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 を使用してこれを行うことができますが、グリッドをリロードするだけの 1 つのページでそれを行う方法はありますか?

4

1 に答える 1

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>
于 2012-09-11T12:13:55.870 に答える