1

私はjQgridの初心者です。最後の日はjQgridを学び、サンプルを作成しようとしています

Mvc アプリケーション。jQgrid Web サイトを参照してください。http://www.trirand.com/blog/jqgrid/jqgrid.html

jQGrid でグリッドをサブグリッドとして作成しようとしています。追加・編集・削除機能が全部欲しい

子グリッドが可能です。

jQgridで行を展開すると、親行が表示されないという問題に直面しています

折りたたみアイコン。下の私の画像を見てください。

ここに画像の説明を入力

赤いボックスを参照してください。マイナスアイコンが表示されていません。以下の私のコードを見てください。

  <table id="listsg11">
</table>
<div id="pagersg11">
</div>
<script type="text/javascript">
    jQuery("#listsg11").jqGrid({
        url: '/Home/DynamicGridData/',
        datatype: "json",
        mtype: 'POST',
        height: 190,
        width: 600,
        colNames: ['Id', 'Votes', 'Title'],
        colModel:
        [
            { name: 'Id', index: 'Id', width: 40, align: 'left' },
            { name: 'Votes', index: 'Votes', width: 40, align: 'left' },
            { name: 'Title', index: 'Title', width: 400, align: 'left' }
        ],
        rowNum: 8,
        rowList: [8, 10, 20, 30],
        pager: '#pagersg11',
        sortname: 'id',
        viewrecords: true,
        sortorder: "desc",
        multiselect: false,
        subGrid: true,
        caption: "Grid as Subgrid"
        ,
        subGridRowExpanded: function (subgrid_id, row_id) {
            // we pass two parameters 
            // subgrid_id is a id of the div tag created whitin a table data 
            // the id of this elemenet is a combination of the "sg_" + id of the row 
            // the row_id is the id of the row 
            // If we wan to pass additinal parameters to the url we can use 
            // a method getRowData(row_id) - which returns associative array in type name-value 
            // here we can easy construct the flowing
            var subgrid_table_id, pager_id;
            subgrid_table_id = subgrid_id + "_t";
            pager_id = "p_" + subgrid_table_id;
            $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
            jQuery("#" + subgrid_table_id).jqGrid({
                url: "/Home/DynamicGridData1/",
                datatype: "json",
                mtype: 'POST',
                colNames: ['Id', 'Votes', 'Title'],
                colModel:
                [
                    { name: 'Id', index: 'Id', width: 40, align: 'left' },
                    { name: 'Votes', index: 'Votes', width: 40, align: 'left' },
                    { name: 'Title', index: 'Title', width: 400, align: 'left' }
                ],
                rowNum: 20,
                rowList: [8, 10, 20, 30],
                pager: pager_id,
                sortname: 'Id',
                sortorder: "asc",
                height: 180,
                width: 500,
            });
            jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: true, add: true, del: true })
        }
        //,
        //            subGridRowColapsed: function (subgrid_id, row_id) {
        //                alert(row_id);
        //                // this function is called before removing the data 
        //                //var subgrid_table_id; 
        //                //subgrid_table_id = subgrid_id+"_t"; 
        //                //jQuery("#"+subgrid_table_id).remove();
        //            }
    });
    jQuery("#listsg11").jqGrid('navGrid', '#pagersg11', { add: true, edit: true, del: true });

</script>

助けてください。

4

1 に答える 1

2

javascriptを中に入れようとしない理由

$(function(){
//here go the script
});

理由の1つは、jqgridがまだ正しくダウンロードされていないことです。

だからこれを試してみてください！

幸運を！

于 2013-01-30T05:12:00.763 に答える