###利用しているライブラリ
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
あなたの回答
tips
プレビュー