Javascript jqgrid中的列重新排序、虚拟滚动、gridResize无效

我使用jqgrid和Symfony来显示数据网格

奥列格的回答解决了主要问题

这是我的密码：

<link rel="stylesheet" type="text/css" media="screen" href="{{ asset('bundles/productorderlookup/css/ui-lightness/jquery-ui.css') }}" />
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset('bundles/productorderlookup/css/ui.jqgrid.css') }}" />
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset('bundles/productorderlookup/css/ui.multiselect.css') }}" />
<style type="text/css">
    span.cellWithoutBackground
    {
        display:block;
        background-image:none;
        margin-right:-2px;
        margin-left:-2px;
        height:14px;
        padding:4px;
    }
</style>
<script src="{{ asset('bundles/productorderlookup/js/i18n/grid.locale-en.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/productorderlookup/js/jquery.jqGrid.src.js') }}" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.js"></script>
<script>
    jQuery(document).ready(function(){
        jQuery("#list").jqGrid({
            url:"{{ asset('/app_dev.php/_thrace-datagrid/data/user_management') }}",
            datatype: 'json',
            mtype: 'POST',
            colNames:['Product ID','Product Name', 'Product Details'],
            colModel :[
                {name:'id', index:'u.id', width:200,
                    formatter: function (cellvalue) {
                        var color;
                        var val = Number(cellvalue);
                        if (val%3 == 0) {
                            color = 'red';
                        } else if (val%3 == 1) {
                            color = 'yellow';
                        } else if (val%3 == 2){
                            color = 'green';
                        }

                        return '<span class="cellWithoutBackground" style="background-color:' + color + ';">' + cellvalue + '</span>';
                    }},
                {name:'productName', index:'u.productName', width:200, editable: true},
                {name:'productDetails', index:'u.productDetails', width:200, align:'right', editable: true}
            ],
            autowidth: true,
            //width: 800,
            height: 600,
            gridview: true,
            autoencode: true,
            shrinkToFit: false,
            pager: '#pager',
            rowNum:50,
            rowTotal: 1000000,
            rowList:[50, 100, 500, 1000],
            rownumWidth: 40,
            viewrecords: true,
            caption: 'Product Order Lookup',
            sortname: 'u.id',
            sortorder: 'asc',
            sortable:true,
            //multiselect: true,
            ondblClickRow: function(rowid) {
                jQuery(this).jqGrid('editGridRow', rowid);
            },
            footerrow: true,
            gridComplete: function() {
                var $grid = $('#list');
                var colSum = $grid.jqGrid('getCol', 'id', false, 'sum');
                $grid.jqGrid('footerData', 'set', { 'id': colSum });
                },
            loadonce:false,
            editurl:"{{ asset('/app_dev.php/_thrace-datagrid/row-action/user_management') }}",
            subGrid: true,
            subGridRowExpanded: function(subgrid_id, row_id) {
                var subgrid_table_id;
                var pager_id = "p_"+subgrid_table_id;
                subgrid_table_id = subgrid_id+"_t";
                jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
                jQuery("#"+subgrid_table_id).jqGrid({
                    url:"{{ asset('/app_dev.php/_thrace-datagrid/data/product_order_management') }}",
                    postData: {
                        masterGridRowId: row_id
                    },
                    datatype: "json",
                    mtype: 'POST',
                    colNames: ['oid','orderno'],
                    colModel: [
                        {name:"oid",index:"o.id",key:true},
                        {name:"orderno",index:"o.orderno", editable: true}
                    ],
                    height: '100%',
                    pager: pager_id,
                    rowNum:50,
                    //editData: {pid: row_id}, // edit options
                    editurl:"{{ asset('/app_dev.php/_thrace-datagrid/row-action/product_order_management') }}",
                    rowList:[50, 100, 500, 1000]
                });
                jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{
                        idPrefix: "s_" + row_id + "_",
                        del:true,
                        add:true,
                        edit:true,
                        addtext: 'Add',
                        edittext: 'Edit',
                        deltext: 'Delete',
                        searchtext: 'Search',
                        refreshtext: 'Reload'},
                        {editData: {pid: row_id}},
                        {editData: {pid: row_id}},
                        {editData: {pid: row_id}},
                        {multipleSearch:true}
                );
                jQuery("#"+subgrid_table_id).jqGrid('filterToolbar',{stringResult: true,searchOnEnter : true});
            }

        });
        jQuery("#list").jqGrid('navGrid','#pager',{del:true,add:true,edit:true},{},{},{},{multipleSearch:true}).navButtonAdd('#pager',{
            caption: "Excel",
            buttonicon:"ui-icon-disk",
            onClickButton: function(){
                exportExcel($(this));
            },
            position:"last"
        });
        jQuery("#list").jqGrid('filterToolbar',{ defaultSearch: 'cn', stringResult: true,searchOnEnter : true});
        jQuery('#list').jqGrid('gridResize');
    });

span.cellWithoutBackground
{
显示：块；
背景图像：无；
右边距：-2px；
左边距：-2px；
高度：14px；
填充：4px；
}
jQuery（文档）.ready（函数（）{
jQuery（“#list”）.jqGrid({
url:“{asset（'/app_dev.php/_-thrace-datagrid/data/user_management'）}}”，
数据类型：“json”，
mtype:“POST”，
colname:[“产品ID”、“产品名称”、“产品详细信息”]，
colModel：[
{名称：'id'，索引：'u.id'，宽度：200，
格式化程序：函数（cellvalue）{
颜色变异；
var val=数值（cellvalue）；
如果（值%3==0）{
颜色=红色；
}否则如果（val%3==1）{
颜色=‘黄色’；
}否则如果（val%3==2）{
颜色='绿色'；
}
返回“”+单元格值+“”；
}},
{名称：'productName'，索引：'u.productName'，宽度：200，可编辑：true}，
{名称：'productDetails'，索引：'u.productDetails'，宽度：200，对齐：'right'，可编辑：true}
],
自动宽度：正确，
//宽度：800，
身高：600，
gridview：没错，
自动编码：正确，
shrinkToFit：错，
寻呼机：“#寻呼机”，
rowNum:50，
总数：1000000，
行列表：[501005001000]，
行宽：40，
viewrecords：是的，
标题：“产品订单查询”，
sortname:“u.id”，
排序器：“asc”，
可排序：是的，
//多选：对，
ondblClickRow:函数（rowid）{
jQuery（this）.jqGrid（'editGridRow'，rowid）；
},
是的，
gridComplete:函数（）{
var$grid=$（“#列表”）；
var colSum=$grid.jqGrid（'getCol'，'id'，false'，sum'）；
$grid.jqGrid（'footerData'，'set'，{'id'：colSum}）；
},
loadonce:false，
editurl:“{{asset（'/app_dev.php/_thrace-datagrid/row action/user_management'）}}”，
子网格：对，
subGridRowExpanded:函数（subgrid\u id，row\u id）{
var子网格\u表\u id；
var pager_id=“p_”+子网格表\u id；
子网格\表\ id=子网格\ id+“\ t”；
jQuery（“#”+子网格id）.html（”；
jQuery（“#”+子网格_表_id）.jqGrid({
url:“{asset（'/app_dev.php/_-therace-datagrid/data/product_order_management'）}”，
postData:{
masterGridRowId:行\u id
},
数据类型：“json”，
mtype:“POST”，
colNames:['oid'，'orderno']，
colModel：[
{name:“oid”，索引：“o.id”，键：true}，
{name:“orderno”，索引：“o.orderno”，可编辑：true}
],
高度：“100%”，
寻呼机：寻呼机id，
rowNum:50，
//editData:{pid:row_id}，//编辑选项
editurl:“{{asset（'/app_dev.php/_-thrace-datagrid/row action/product_order_management'）}”，
行列表：[501005001000]
});
jQuery（“#”+子网格_表_id）.jqGrid（'navGrid'，“#”+寻呼机_id{
idPrefix：“s_uU”+行id+“uU”，
戴尔：是的，
加：是的，
编辑：对，
addtext:“添加”，
edittext:“编辑”，
deltext:“删除”，
searchtext:“搜索”，
刷新文本：“重新加载”}，
{editData:{pid:row_id}}，
{editData:{pid:row_id}}，
{editData:{pid:row_id}}，
{多重搜索：真}
);
jqGrid（'filterToolbar'，{stringResult:true，SearchOneNet:true}）；
}
});
jQuery（“#list”）.jqGrid（'navGrid'，'#pager'，{del:true，add:true，edit:true}，{}，{}，{}，{multipleSearch:true}）.navButtonAdd（'#pager'{
标题：“Excel”，
按钮图标：“ui图标磁盘”，
onClickButton:function（）{
exportExcel（$（此））；
},
位置：“最后”
});
jQuery（“#list”）.jqGrid（'filterToolbar'，{defaultSearch:'cn'，stringResult:true，SearchOneNoter:true}）；
jQuery（'#list'）.jqGrid（'gridResize'）；
});

我按照奥列格的建议去做，但它仍然给了我同样的问题

有几件事我面临着问题。 （1） [已解决]我的虚拟卷轴不工作。我还玩了高度、宽度和收缩度。但它似乎仍然不起作用。设置scroll:true时唯一发生的事情是分页被禁用

（2） [已解决]可排序：true不起作用。我已经包括了必要的css和js文件，但sortable仍然不起作用

（3） [已解决]gridResize也不起作用。我确实得到了不同的光标来更改大小，但在尝试更改大小时，它似乎不起作用

我能想到的唯一错误就是包含了太多的css和js文件

---

在此方面如有任何帮助，将不胜感激。谢谢。

您发布的代码有很多问题

首先插入

jquery-1.11.3.js

，然后插入

jqueryui/1.8.13/jquery-ui.min