0

我对 PHP很陌生，所以请忍受我的无知。我有以下脚本可以在 Excel 表中搜索单元格数据（这是一个非常基本的公司电话簿）：

    <html>
<?php echo "Search:" ?>
<form id="form1" method="post" action ="<?php echo $_SERVER['PHP_SELF']; ?>"> <label>
<input id="search" name="search" type="text" />
</label>
<label>
<input type="submit" />
</label>
<img src="loading.gif" width="16" height="11" />
</form>
<input type="reset" value="Reset">
<?php
$search= $_REQUEST['search'];
if ($search > ''){ $search = $search;} else { $search = '';}
?>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
var visualization;

function drawVisualization() {

var query = new google.visualization.Query(
'https://docs.google.com/spreadsheet/pub?key=0Ap2dozrbYI5vdEV5ZmtzU3hCdktzWDU0NTdOQjRSNkE&single=true&gid=0&output=html');

query.setQuery('SELECT A, B, C, D where upper(A) like upper("%<?php echo $search; ?>%") or upper(B) like upper("%<?php echo $search; ?>%") order by A asc label A "Company", B "Contact Name", C "Contact Number", D "Company General Contact"');

query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}

var data = response.getDataTable();

visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {legend: 'bottom'});

    }

    google.setOnLoadCallback(drawVisualization);
    </script>

    <div id="table"></div>

    </div>
    </html>

当没有输入文本并且用户单击提交时，视图将重置以显示完整的 Excel 工作表。我想添加一个功能相同的重置按钮（对用户来说，拥有一个实际的“重置”按钮更有意义。

编辑：请注意，我并不是要简单地清除搜索输入。本质上，我想复制执行空白搜索时提交按钮的作用（即显示所有数据）。

4

2 回答 2

1

将此行添加到您的 html 表单中：

<input type="reset" value="Reset">
于 2013-02-21T17:25:47.703 回答
0

这里有许多问题需要解决。我已经清理了您发布的一些代码，但我不想完全重写您所做的一切。看起来您可能已经将您在网络上找到的几个示例复制并粘贴到一个项目中。如果您在将脚本投入生产之前查看脚本的功能，这真的很有帮助。这样做将帮助您解决其中一些问题。例如，在一行中，您检查一个变量以查看它是否大于空字符串。然后，如果是，则将其分配给自身，如果为空，则将其分配给空字符串。基本上，那条线什么都不做。通读你的代码，这样你就知道它做了什么。

最后，我发现您实际上并不需要 PHP。您只是使用它来回发到服务器并重新加载页面。由于您使用 JavaScript 来实际加载您的信息，因此我决定用 JavaScript 完成所有操作。它使页面更简单，并防止不必要的回发。我还对您的代码进行了一些格式化并对其进行了一些清理。但是，这还需要进一步细化和清理。我刚刚让它进入工作状态：

<html>
    <body>
        <input id="search" name="search" type="text" />
        <button id="submitQuery">Submit Query</button>
        <button id="resetQuery">Reset Query</button>
        <div id="table"></div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load('visualization', '1', { packages: ['table'] });

            var visualization;
            var searchTerm = '';

            function drawVisualization() {
                var query = new google.visualization.Query(
                'https://docs.google.com/spreadsheet/pub?key=0Ap2dozrbYI5vdEV5ZmtzU3hCdktzWDU0NTdOQjRSNkE&single=true&gid=0&output=html');
                query.setQuery('SELECT A, B, C, D where upper(A) like upper("%' + searchTerm + '%") or upper(B) like upper("%' + searchTerm + '%") order by A asc label A "Company", B "Contact Name", C "Contact Number", D "Company General Contact"');
                query.send(handleQueryResponse);
            }

            function handleQueryResponse(response) {
                if (response.isError()) {
                    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
                    return;
                }

                var data = response.getDataTable();

                visualization = new google.visualization.Table(document.getElementById('table'));
                visualization.draw(data, { legend: 'bottom' });
            }

            google.setOnLoadCallback(drawVisualization);

            $(function () {
                $('#submitQuery').click(function (e) {
                    searchTerm = $('#search').val();
                    drawVisualization();
                    return false;
                });
                $('#resetQuery').click(function (e) {
                    $('#search').val('');
                    searchTerm = '';
                    drawVisualization();
                    return false;
                });
            });
        </script>
    </body>
</html>

我没有使用表单中的按钮进行回发，而是让按钮适当地填充变量并调用函数来绘制可视化。我确实在 jQuery 中绘图以使事情变得更容易一些（请注意对 CDN 的调用）。这使代码更简洁，更易于使用。你不必那样做，但如果你把它拿出来，你需要重新编写我的代码。

如果您有任何问题，请告诉我。就目前而言，此代码应该完全按照您的意愿执行。

于 2013-02-24T20:59:51.307 回答