Question

我是jQgrid的初学者，最后几天我尝试学习jQgrid并创建样本

Mvc申请。参考jQgrid网站。 http://www.trirand.com/blog/jqgrid/jqgrid.html

我尝试在jQGrid中创建一个 Grid as Subgrid 。我希望在所有

中添加，编辑，删除功能

可以使用子网格。

我在jQgrid中展开一行时遇到问题，父行未显示

崩溃图标。请参阅下面的图片。

enter image description here

请看红框。它没有显示减号图标。请参阅下面的代码。

  <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>

请帮忙。

Answer 1

为什么你不尝试将javascript放在

中

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

因为其中一个原因是jqgrid尚未正确下载。

所以试试这个！

祝你好运！

jqGrid subGridRowExpanded函数无法正常工作

1 个答案: