HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

jqGrid セル内のテキスト折り返し・改行 サンプル

1つめは、グリッドのスタイルを white-space: normal に変更して表示しています。
テキストが折り返されると列の高さが調整されて表示されます。

2つめは、カスタムフォーマットで空白を <BR /> に置き換えて改行しています。
改行されると、列の高さも調整されて表示されます。


コード


jQuery(document).ready(function()
{
    var mydata = [
        // 空白区切りのデータ
        {zip7:"110-0000", addr:"東京都 台東区 以下に掲載がない場合"},
        {zip7:"110-0001", addr:"東京都 台東区 谷中"},
        {zip7:"110-0002", addr:"東京都 台東区 上野桜木"},
        {zip7:"110-0003", addr:"東京都 台東区 根岸"},
        {zip7:"110-0004", addr:"東京都 台東区 下谷"},
        {zip7:"110-0005", addr:"東京都 台東区 上野"},
        {zip7:"110-0006", addr:"東京都 台東区 秋葉原"},
        {zip7:"110-0007", addr:"東京都 台東区 上野公園"},
        {zip7:"110-0008", addr:"東京都 台東区 池之端"},
        {zip7:"110-0011", addr:"東京都 台東区 三ノ輪"},
        {zip7:"110-0012", addr:"東京都 台東区 竜泉"},
        {zip7:"110-0013", addr:"東京都 台東区 入谷"},
        {zip7:"110-0014", addr:"東京都 台東区 北上野"},
        {zip7:"110-0015", addr:"東京都 台東区 東上野"},
        {zip7:"110-0016", addr:"東京都 台東区 台東"}
    ];
    
    jQuery("#list1").jqGrid({
        data: mydata,
        datatype: "local",
        colNames:[
            '郵便番号', '住所'
        ],
        colModel:[
            {name:'zip7', width:'100px'},
            {name:'addr', width:'100px'}        
        ],
        height:'300',
        width: '400',
        shrinkToFit:false,
        sortname: 'zip7',
        sortorder: "ASC",
        rowNum:20,
        multiselect: false,
        caption: '住所一覧'
    }); 

    jQuery("#list2").jqGrid({
        data: mydata,
        datatype: "local",
        colNames:[
            '郵便番号', '住所'
        ],
        colModel:[
            {name:'zip7', width:'100px'},
            {name:'addr', width:'100px',
                formatter:function breakLine(cellvalue, options, rowObject) {
                    // 空白を改行 <br/> に置き換えて改行させる
                    return cellvalue.replace(/\s/g,'<br/>');
                }
            }
        ],
        height:'300',
        width: '400',
        shrinkToFit:false,
        sortname: 'zip7',
        sortorder: "ASC",
        rowNum:20,
        multiselect: false,
        caption: '住所一覧'
    }); 
});
	

HTMLコード


<style>
    #list1 tr td {
        white-space: normal;
    }
</style>

<!-- セル内のテキストを折り返し表示 -->
<table id="list1">
</table>
<br/>
<!-- セル内のテキストを空白を区切りにして <BR /> で改行して表示 -->
<table id="list2">
</table>