1

この例のテーブルをインデントするにはどうすればよいですか。2行とヘッダーの横に空白を入れたいのですが、基本的には「Stackoverflowの例」の下のすべての左側に空白を入れたいと思います。cssだけでできるといいですね。

コードは次のとおりです。

var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]];

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'thingy',
        index: 'thingy',
        width: 90,
        sorttype: "date"},
    {
        name: 'blank',
        index: 'blank',
        width: 30},
    {
        name: 'number',
        index: 'number',
        width: 80,
        sorttype: "float"},
    {
        name: 'status',
        index: 'status',
        width: 80,
        sorttype: "float"}
    ],
    caption: "Stack Overflow Example",
    // ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}
});

var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}

/*
$("#grid").jqGrid('setGridParam', {onSelectRow: function(rowid,iRow,iCol,e){alert('row clicked');}});
*/
$("#grid").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}});
4

2 に答える 2

2

これがCSSのみのソリューションです。列のサイズを変更するときは、まだ課題があります。クリックしてドラッグしてサイズを変更しても、垂直マーカーは元のオフセットのまま表示されます。

#gbox_grid, .ui-jqgrid .ui-jqgrid-titlebar {
    padding-right: 20px;
}
.ui-jqgrid .ui-jqgrid-hdiv, .ui-jqgrid .ui-jqgrid-bdiv {
    margin-left: 20px;
}

.ui-jqgrid .ui-jqgrid-titlebar {
    margin-right: -20px;
}    
.ui-jqgrid tr.jqgrow td:first-child {
    border-left-style: solid;
    border-left-color: inherit;    
}

http://jsfiddle.net/meharg/8BkMw/4/

于 2012-11-21T20:15:09.743 に答える
0

scriptこれはCSSが解析された後にロードされるため、との位置に気を配っている場合は、少しJSなしで実行するのstyleは困難です。これは、何も心配することなく機能するものです。とにかく解析された後にテーブルが生成されるため、CSSソリューションのみが必要な場合は、スタイルやスクリプトの位置に関係なく機能するとは思いませんが。

http://jsfiddle.net/yNw3C/1534/embedded/result/

コードを追加したところにコメントを追加しました。

編集、編集可能なフィドルを追加するのを忘れた：http: //jsfiddle.net/yNw3C/1539/

于 2012-11-21T10:59:38.983 に答える