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>

使用jquery在网格中加载数据

1 个答案: