3

私はJQwidgetsを使用します。コードとして印刷ボタンをクリックしてデータを印刷するために使用します。

$("#print").click(function () {
     var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
     var newWindow = window.open('', '', 'width=800, height=500'),
     document = newWindow.document.open(),
     pageContent =
         '<!DOCTYPE html>\n' +
         '<html>\n' +
         '<head>\n' +
         '<meta charset="utf-8" />\n' +
         '<title>jQWidgets Grid</title>\n' +
         '</head>\n' +
         '<body>\n' + gridContent + '\n</body>\n</html>';
         document.write(pageContent);
         document.close();
         newWindow.print();
});

印刷ウィンドウを閉じると（印刷を続行しない）、グリッドスクロールを使用できません（クロムで）..

google-chrome バージョン 34.0.1847.131 m

これはFirefoxとIEでうまくいきました..

クロムで印刷ウィンドウを閉じた後にスクロールを修正する方法

フィドルデモ

4

3 に答える 3

1

この問題を抱えているのはあなただけではないようです。

あなたのコードはすでにセットアップされており、あなたが持っているもので実行したいことは理解していますが、誰かがハックを思い付くか、Google が明らかにバグを修正することを決定しない限り、これにどのようにアプローチしているかを再考する必要があると思います問題。

クロムレス ウィンドウがオプションである場合、または印刷ダイアログがモーダルである場合、現在の戦略でこれを実行できますが、Chrome ではこれらのオプションのいずれも使用できません。このスクロールの問題をなんとか回避できたとしても、ユーザーが印刷ダイアログで「キャンセル」を押すと、まだ空白のウィンドウが開いたままになるという、望ましくない UX の問題が残っています。

アプローチを変更する必要があることを示す JS フィドルを次に示します。DEMO このデモからわかるように、新しいウィンドウ内から完全に別のスクリプトを実行してコンテンツ オブジェクトにプレーン テキストとして渡しても、それでも問題が発生します。同じ問題。これは、これが JS で簡単に回避できない親子タイプの関係であることを意味します。

2 つの代替可能な解決策をお勧めします。

オプション1： 
<input type="button" value="Print" onclick="window.print(); return false;"  />

これにより、「Windows 閉じるボタン」から閉じることができない全画面印刷ダイアログがトリガーされます。そうすれば、問題をまとめて回避できます。次に、JS と印刷スタイルの組み合わせを使用して、印刷する情報をターゲットにして分離することができます。手間がかかることは承知していますが、クロスプラットフォームのソリューションの方が優れていると思います。

このオプションは、より強引で単純化された性質のものです (そして、あなたはすでにこれを知っているとコメントしていますが、それはまだオプションであるため、私はそれを残しておきます)。

デモ

オプション 2:
  1. ユーザーが新しいタブ/ウィンドウを開くリンク/ボタンをクリックする
  2. 同じ関数で、テーブルのデータが JSON オブジェクトに読み込まれます
  3. JSON オブジェクトが新しいタブ/ウィンドウの印刷テンプレートに読み込まれます
  4. テンプレートは印刷機能を開始します

これらのアクションを実行することで、新しいタブが開始スクリプトに影響を与えないように、JS インスタンスの関連付けを十分に解除できると思います。

于 2014-05-15T08:10:10.693 に答える
0 
$("#jqxscrollbar").jqxScrollBar({
    width: 5,
    height:180,
    theme:'energyblue',
    vertical:true
});

$("#jqxscrollbar1").jqxScrollBar({
    width: 300,
    height:5,
    theme:'energyblue'
});

jsfiddle を見てください: http://jsfiddle.net/8PtUX/6/

于 2014-08-30T12:25:51.897 に答える