web-dev-qa-db-ja.com

非画像リンク表示でビューデータエクスポートモジュールのCSVリンクを変換する方法

ユーザーがリンクをクリックして検索結果をダウンロードできるように、検索インターフェイスに Views data export モジュールを使用しています。動作して表示しています。しかし、それはきれいではありません。

マイデータエクスポートには次の設定があります：

  • 形式：CSVファイル

  • フィルター基準：公開、type = resource、トピック>（公開）、カテゴリー（公開）、検索語（オプション）

  • データエクスポート>設定>パス：/ search-export添付先：検索フッター：グローバル：テキスト>領域（追加しようとしているもの手動リンク）

  • pager：表示>指定された数の項目> 0項目（CSVエクスポートを実行するために必要>すべての結果をデフォルトで返さない）

現在、ページの下部にモジュールが作成するボタンがあり、「CSV」と書かれた白いテキストが付いた小さな明るいオレンジ色のボタンの形式で作成されます。醜いボタンだと思います。ユーザーはそれが何を意味するかさえ知らないかもしれません。 inspect要素によるコードは次のとおりです。

<div class="feed-icon">

    <a href="/search-export?attach=page">
        <img title="Download Results" alt="Download Results" 
src="http://staging.grantstation-pathfinder.com/sites/all/modules
/views_data_export/images/csv.png" typeof="foaf:Image"></img>
    </a>

</div>

ユーザーが露出したフィルターを設定したり、クリックしたときに検索ボックスでキーワードを設定したりすると、このリンクはパラメーターをURLに追加します（例：/ search-export？field_topics_value = All＆etc）。

私はそれがおそらく私の問題の核心であるそれらのパラメーターをどのように追加するのか分かりません。

自分のイメージを交換するだけでいいのですが...

私はむしろこれを変更して画像をまったく使用しないようにし、代わりにそれを単に「ダウンロード結果」またはそのようなものを示すリンクにするだけにします。

画像と同じリンクを持つ検索ビューのヘッダーまたはフッターに手動でリンクを追加しようとしましたが、何らかの理由でボタンのようにパラメーターがキャプチャされません。

追加しようとしたリンク：

<div class="feed-icon">
  <a href="/search-export?attach=page">
    Download Spreadsheet
  </a>
</div>

上記をクリックすると、画像のようにURLにパラメーターが含まれず、すべての結果がエクスポートされます（設定されているフィルターは無視されます）。

私の質問：新しいダウンロードスプレッドシートリンクを修正して、ビュー自体と同じように（CSVボタンと同じように）公開されたフィルターとキーワードのみで結果を出力する方法は？

7viewsimporting-exporting
3
Sage

このCSVボタンには、質問で説明しているのと同様に、いくつかの調整が必要であることに同意します。そして、かなりの数の他の人も同様に考えるようです。

問題を実際に解決するには、モジュールの問題＃2261167を見てください。これは 非画像リンク表示のオプション （問題のステータス=レビューが必要）に関するものです。 コメント＃26 この問題の patch が含まれています。これにより、次のスクリーンプリントに示すように2つの新しい設定が追加されます。

enter image description here

これら2つの新しい設定の詳細を次に示します。

  • （選択した場合）チェックボックスを使用して、ダウンロードリンクをアイコン/画像リンクではなくテキストリンクとして提供します。
  • リンクにクラスを追加するテキストフィールド。これにより、リンクに「ボタン」（図を参照）などのクラスをテキストリンクに与えることができます。

私は間違いなくこのパッチを検討しますか？.

代替案（2番目の選択肢？）として、問題＃1379672も確認できます。これは、約 エクスポートボタン、CSSでスタイル可能にする についてです。また、考慮すべきパッチが含まれています（たとえば、前のパッチが何らかの理由で適合しない場合）。

3
Pierre.Vriens

ボタンのテーマを設定しようとしている人のための回避策としてこれを投稿します。ボタンのテーマを設定する方法を探していて、ソリューションを使用しました 12で提供 jQueryなしで、FontAwesomeでCSSのみを使用します。

結果は次のようになります： css styled button

「export-button」と呼ばれるエクスポートリンクを囲むdivに別のクラスを追加しました（12から）

<?php if ($exposed): ?>
<div class="view-filters">
<?php if(isset($view->feed_icon)): ?>
<div class="feed-icon-wrapper export-button">
<?php print $view->feed_icon; ?>
</div>
<?php endif; ?>
<?php print $exposed; ?>
</div>
<?php endif; ?>

私のCSSでは、以下を使用しました。

.export-button a {
padding: 15px 35px 15px 35px;
display: -webkit-inline-box;
background: #2295f3;
color: white;
text-align: center;
}
.export-button a:hover {
box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.export-button img {
display:none;
}
.export-button a:before {
content: "Download CSV";
color:white;
}
.export-button a:after {
content: "\f019";
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 15px;
color: white;
margin-left: 8px;
}

CSSでfont awesomeを使用するには、CSSファイルでフォントを宣言する必要があります。

@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') 
format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?
v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?
v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?
v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

これがお役に立てば幸いです。

2
Odeezl