RSS

tablesorterを使いながら、幅の調整もしたい。

03 10月

現在、職場のページで(Jqueryのtablesorterを使用)
・テーブル表示されている一覧のある部分がテキストが長くなっており、プログラムで切り落とされていて見れない。
→長い部分を全部表示させてほしい。(詳細でみれるから、ではなく一覧表示時にみえることが望ましい)

ということで…。いろいろやってみたんだけど、なかなか既存でやってるのがない。
いやあるんだけど、それほど高機能なのは期待してない。単純にテーブルの幅が変更できるようなものがあればいいんだけど。
それでここを参考にして、すでにある
tablesorterにくっつけてみたんだけど、だめ・・・。挙動がおかしくて、ソートはされるけど、幅変更が微妙。
みたいな感じになってしまった。

仕方なく、鼻の黒い人に尋ねていろいろ試行錯誤してもらったんだけど、他に実装されているものを組み込んでも微妙…ってことで
「動的に全文じゃなくて、長くなればいいんじゃね?ってことで
100ピクセルが500に長くなるだけでもいい!っていったら下記のようなプログラムになった。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery – Table Sorter </title>
<link href=”jQuery/ingrid/site.css” rel=”stylesheet” type=”text/css” />
<link href=”style.css” rel=”stylesheet” type=”text/css” />
<script src=”jquery-1.2.6.js” type=”text/javascript”></script>
<script src=”jquery.tablesorter.js” type=”text/javascript”></script>
<script type=”text/javascript”>

$(function() {
$(“#table”).tablesorter();
$(“#fn”).click(function() {
if($(“.fnc”).css(“width”) == “500px”)
{
$(“.fnc”).css(“width”, “100px”);
$(“.fnc div.aaa”).css(“width”, “100px”);
}
else
{
$(“.fnc”).css(“width”, “500px”);
$(“.fnc div.aaa”).css(“width”, “500px”);
}
});
});
</script>

<style type=”text/css”>
.fnc {
width: 100px;
overflow: hidden;
table-layout: fixed;
}

.aaa {
width: 100px;
height: 12px;
overflow: hidden;
}

</style>

</head>
<body>

<div id=”demo”>
<table cellspacing=”1″ class=”tablesorter” id=”table”>
<thead>
<tr>

<!–追加する–>
<td style=”width: 10px;”><span id=”fn”>[+]</span></td>
<th class=”fnc”>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class=”fnc” colspan=2><div class=”aaa”>ここが長くなるわけですよね。だいぶ長いです。だから省略されます。</div></td>          <td>Parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>Jul 6, 2006 8:14 AM</td>
</tr>
<tr>
<td colspan=2>John</td>
<td>Hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td colspan=2>test</td>
<td>main</td>
<td>908</td>
<td>$19.99</td>
<td>25%</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>

</tbody>
</table>
</div>

</body>
</html>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery – Table Sorter </title>
<link href=”jQuery/ingrid/site.css” rel=”stylesheet” type=”text/css” />
<link href=”style.css” rel=”stylesheet” type=”text/css” />
<script src=”jquery-1.2.6.js” type=”text/javascript”></script>
<script src=”jquery.tablesorter.js” type=”text/javascript”></script>
<script type=”text/javascript”>

$(function() {
$(“#table”).tablesorter();
$(“#fn”).click(function() {
if($(“.fnc”).css(“width”) == “500px”)
{
$(“.fnc”).css(“width”, “100px”);
$(“.fnc div.aaa”).css(“width”, “100px”);
}
else
{
$(“.fnc”).css(“width”, “500px”);
$(“.fnc div.aaa”).css(“width”, “500px”);
}
});
});
</script>

<style type=”text/css”>
.fnc {
width: 100px;
overflow: hidden;
table-layout: fixed;
}

.aaa {
width: 100px;
height: 12px;
overflow: hidden;
}

</style>

</head>
<body>

<div id=”demo”>
<table cellspacing=”1″ class=”tablesorter” id=”table”>
<thead>
<tr>

<!–追加する–>
<td style=”width: 10px;”><span id=”fn”>[+]</span></td>
<th class=”fnc”>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class=”fnc” colspan=2><div class=”aaa”>ここが長くなるわけですよね。だいぶ長いです。だから省略されます。</div></td>          <td>Parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>Jul 6, 2006 8:14 AM</td>
</tr>
<tr>
<td colspan=2>John</td>
<td>Hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td colspan=2>test</td>
<td>main</td>
<td>908</td>
<td>$19.99</td>
<td>25%</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>

</tbody>
</table>
</div>

</body>
</html>

普通のTDタグの中にDIVタグをさらにおさめて、そのなかのボックスとともに幅を広くしたり狭めたり。
やっぱりスタイルの制御をスクリプトでやる、っていうのを少し訓練しないとだめだなあ。
簡単なものからやっていきたいなあ…。
ここんとこ
・CentOSインスコ
・cakephp 開発(おうちの家計簿的な)
・SVN導入
とあってこんどはスタイルシート・・・。ちょっとしんどい。うーん。
少しずつでいいんだけど、それぞれをちょっとずつ吸収するのにやはり時間がかかるんだよねん。
へむ…。

ちょっとしたスケジュールを立てて組み立てるかなあ。

広告
 
tablesorterを使いながら、幅の調整もしたい。 はコメントを受け付けていません。

投稿者: : 10月 3, 2009 投稿先 CSS, javascript

 

コメントは受け付けていません。

 
%d人のブロガーが「いいね」をつけました。