質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

2179閲覧

一覧表示の行幅(行の高さ)を1行毎に変更したい

kir27

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/05/13 12:57

###利用しているライブラリ
SlickGrid
https://github.com/mleibman/SlickGrid

前提・実現したいこと

SlickGridを利用し、Excelのように1行毎に行幅(行の高さ)を変更させたいです。
以下のソースコードのようにgridオプションのrowHeightを変更すると
全行の行幅が変更されてしまいました。
各行バラバラに行幅を設定させる方法を教えていただきたいです。

※SlickGrid以外でも「このライブラリであれば行毎に行幅を設定できる」
ということがあれば一緒に教えていただければと思います。

ソースコード

html

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 5 <link rel="shortcut icon" type="image/ico" href="favicon.ico" /> 6 <title>SlickGrid example 1: Basic grid</title> 7 <link rel="stylesheet" href="../slick.grid.css" type="text/css"/> 8 <link rel="stylesheet" href="../css/smoothness/jquery-ui.css" type="text/css"/> 9 <link rel="stylesheet" href="examples.css" type="text/css"/> 10</head> 11<body> 12<table width="100%"> 13 <tr> 14 <td valign="top" width="50%"> 15 <div id="myGrid" style="width:600px;height:500px;"></div> 16 </td> 17 <td valign="top"> 18 <h2>Demonstrates:</h2> 19 <ul> 20 <li>basic grid with minimal configuration</li> 21 </ul> 22 <h2>View Source:</h2> 23 <ul> 24 <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example1-simple.html" target="_sourcewindow"> View the source for this example on Github</a></li> 25 </ul> 26 </td> 27 </tr> 28</table> 29 30<script src="../lib/jquery-1.12.4.min.js"></script> 31<script src="../lib/jquery.event.drag-2.3.0.js"></script> 32 33<script src="../slick.core.js"></script> 34<script src="../slick.grid.js"></script> 35 36<script> 37 var grid; 38 var columns = [ 39 {id: "title", name: "Title", field: "title"}, 40 {id: "duration", name: "Duration", field: "duration"}, 41 {id: "%", name: "% Complete", field: "percentComplete"}, 42 {id: "start", name: "Start", field: "start"}, 43 {id: "finish", name: "Finish", field: "finish"}, 44 ]; 45 46 var options = { 47 enableCellNavigation: true, 48 enableColumnReorder: false, 49 rowHeight: 10 50 }; 51 52 $(function () { 53 var data = []; 54 for (var i = 0; i < 10; i++) { 55 data[i] = { 56 title: "Task " + i, 57 duration: "5 days", 58 percentComplete: Math.round(Math.random() * 100), 59 start: "01/01/2009", 60 finish: "01/05/2009", 61 effortDriven: (i % 5 == 0) 62 }; 63 } 64 65 grid = new Slick.Grid("#myGrid", data, columns, options); 66 // この方法ではすべての行幅が一括で変更されてしまう 67 grid.setOptions( { rowHeight: 100 } ); 68 }); 69 70 71</script> 72</body> 73</html> 74

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問