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

ここには、対処する必要のある問題がいくつかあります。私はあなたが投稿したコードのいくつかを一掃しましたが、あなたがしたことすべてを完全に書き直したくありませんでした。Webで見つけたいくつかの例を1つのプロジェクトにコピーして貼り付けたようです。スクリプトを本番環境に移行する前に、スクリプトの機能を確認すると非常に役立ちます。そうすることで、これらの問題のいくつかを解決できます。たとえば、1行で変数をチェックして、それが空の文字列より大きいかどうかを確認します。次に、それが存在する場合はそれ自体に割り当て、空の場合は空の文字列に割り当てます。基本的に、その行は何もしません。コードを読んで、コードの機能を理解してください。

結局、私はあなたが本当に何のためにも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 に答える