🌸 「なでしこ」
>
🍯 「貯蔵庫」
gridjsでv1のグリッドっぽいやつ作りたい
🌟新規
📒一覧
🔌
🔍検索
🚪ログイン
gridjsでv1のグリッドっぽいやつ作りたい 📖
しかし編集機能が無い😭
プログラム:
(→大)
#grid.jsの取り込み !「https://n3s.nadesi.com/plain/LoadScript.js」を取り込む。 「https://unpkg.com/gridjs/dist/gridjs.umd.js」のライブラリ読み込み。 「https://unpkg.com/gridjs/dist/theme/mermaid.min.css」のCSSリンク作成。 #表示データを取得 URL=「https://n3s.nadesi.com/image.php?f=535.csv」 データはURLからHTTP取得して、それをCSV取得。 データの0から1を配列取り出して、それ[0]をタイトルに代入。 「h1」のDOM部品作成。 それに「東京の真夏日と猛暑日の推移」をテキスト設定。 #グリッド作成 「div」のDOM部品作成。※ nako3_divに直接作成するとクリアされない設定が残り、もう一度実行した時に正常に動作しないので、divを作ってその中に作ることにする。 グリッド=『new gridjs.Grid({ //項目名 columns: sys.__findVar("タイトル"), //データ data: sys.__findVar("データ"), //オプション pagination: {limit: 15}, // ページネーション search: true, // 検索 sort:true, // ソート resizable: true, // サイズ変更 width: "80%", //表示幅 //height: "600px", //表示高さ //fixedHeader: true, // ヘッダー固定 //スタイル style:{ th:{"background-color":"#99B", "color":"#333", "text-align": "center", "line-height":"1.5em" }, tr:{ "background-color":"white" }, td:{"background-color":"rgba(0, 0, 0, 0)", "font-size":"10pt"} }, //言語 language: { 'search': { 'placeholder': '🔍 ここに入力して検索' }, 'pagination': { 'previous': '⇦前へ', 'next': '次へ⇨', 'showing': ' ', 'results': '件中', of: '/', to: '~' } }, }).render(document.getElementById("nadesi-dom-"+(sys.__getSysVar("DOM部品個数")-1)));』をJS実行。 #イベント 『 sys.__findVar("グリッド").on('rowClick', (...args) => { console.log('row: ' + JSON.stringify(args), args); sys.__exec("行色変更",[args[0].target.parentElement]) });』をJS実行。 前クリック行=空。 ●(クリック行の)行色変更 もし、前クリック行が空でなければ、前クリック行の「背景色」に白色をDOMスタイル設定。 クリック行の「背景色」に「#CCF」をDOMスタイル設定。 前クリック行=クリック行。 ここまで。
プログラムを実行
⭐ 雪乃☆雫 作
タイトル:
gridjsでv1のグリッドっぽいやつ作りたい
ライセンス:
CC0 (著作権破棄)
タイプ:
wnako
タグ:
テスト
利用バージョン:
3.6.26
作成日時:
2024/11/13 15:00
公開の投稿
⭐
ログイン
して★を付けよう!
Twitterへ投稿
📝作品を編集
作品公開情報
📍この作品のURL:
📍アプリ(即時実行)のURL:
📍アプリ(実行ボタンあり)のURL:
📍ブログパーツ:
上記HTML↑をブログに貼り付けることでアプリを埋め込めます。
📍ライブラリ直リンク - 『!「***」を取込』で使うとき:
📍なでしこハブ (最新版の反映は1日後):
ソースの確認
編集履歴の確認
通報数:
0
通報って何?