我正在使用带有Symfony的jqgrid来显示数据网格。
奥列格的答案解决了重大问题。
这是我的代码：
<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');
});
我按照Oleg建议的那样按照here的说明操作，它仍然给我同样的问题。
我遇到的一些问题。 （1）[已解决]我的虚拟滚动不起作用。我也玩过高度，宽度和收缩效果。但它似乎仍然没有用。设置scroll时唯一发生的事情是：true是分页被禁用。
（2）[已解决]可排序：true不起作用。我已经包含了必要的css和js文件，并且可排序仍然不起作用。
（3）[求助] GridResize也不起作用。我确实得到了不同的光标来改变大小但是在尝试改变大小时，它似乎不起作用。
我能想到的唯一错误就是包含太多的css和js文件。
任何帮助将不胜感激。感谢。
答案 0 :(得分：2)
您发布的代码存在许多问题。
首先，您插入jquery-1.11.3.js，然后jqueryui/1.8.13/jquery-ui.min.js，然后jqueryui/1.7.2/jquery-ui.js。在一个页面上包含多个版本的JavaScript库可能会破坏所包含库的功能。你想要删除旧的jQuery UI 1.7.2。
只有在处理程序中绝对独立的内容时，才应在页面上包含多个document.ready处理程序。你所做的是依赖电话。您只能在创建网格后使用navGrid，filterToolbar和其他jqGrid方法 。因此，您应该将所有处理程序的内容包含在一个，document.ready处理程序中。
表单中columnChooser的调用毫无意义。您应该在导航器工具栏中包含该按钮，并仅在按钮的onClick处理程序中调用方法columnChooser。
您应该在idPrefix内创建的子网格中包含subGridRowExpanded选项。每个子网格都应具有唯一前缀。问题是：可以同时打开多个子网格，并且行的ID可以相同。要保护代码以生成id重复项，您应该使用idPrefix选项。例如idPrefix: "s_" + row_id + "_"。
最后一句话：我建议不要使用scroll: true，因为在使用jqGrid的其他功能和其他不同的实现问题时存在许多限制。