重新排序列、虚拟滚动、jqgrid 中的 gridResize 不起作用
Reordering columns, Virtual scroll, gridResize in jqgrid does not work
我正在使用 jqgrid 和 Symfony 来显示数据网格。
Oleg 的回答解决了主要问题。
这是我的代码：
<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) [已解决] 我的虚拟卷轴不工作。我也玩过高度、宽度和 shrinkToFit。但它似乎仍然不起作用。设置 scroll:true 时唯一发生的事情是分页被禁用。
(2) [已解决] Sortable:true 不起作用。我已经包含了必要的 css 和 js 文件，但 sortable 仍然不起作用。
(3) [已解决] gridResize 也不起作用。我确实得到了不同的光标来改变大小，但在尝试改变大小时，它似乎不起作用。
我唯一能想到的错误是包含了太多 css 和 js 文件。
如有任何帮助，我们将不胜感激。谢谢
您发布的代码有很多问题。
首先您插入了 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 处理程序，前提是您在处理程序 中做 绝对独立的事情。你所做的是 dependent 调用。您可以使用 navGrid、filterToolbar 和其他 jqGrid 方法 只有在创建网格后 。因此，您应该将所有处理程序的内容包含在一个中，首先是 document.ready handler.
表格中columnChooser的调用没有任何意义。您应该在导航器工具栏中包含该按钮，并仅在按钮的 onClick 处理程序中调用方法 columnChooser。
您应该在 subGridRowExpanded 中创建的子网格中包含 idPrefix 选项。每个子网格都应该有 unique 前缀。问题是：可以同时打开多个子网格，并且行的 ID 可以相同。为了保护代码产生 id 重复，你应该使用 idPrefix 选项。例如 idPrefix: "s_" + row_id + "_".
最后一句话：我根本不推荐使用scroll: true，因为在使用jqGrid的另一个特性和其他不同的实现问题时存在很多限制。
我正在使用 jqgrid 和 Symfony 来显示数据网格。
Oleg 的回答解决了主要问题。
这是我的代码：
<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) [已解决] 我的虚拟卷轴不工作。我也玩过高度、宽度和 shrinkToFit。但它似乎仍然不起作用。设置 scroll:true 时唯一发生的事情是分页被禁用。
(2) [已解决] Sortable:true 不起作用。我已经包含了必要的 css 和 js 文件，但 sortable 仍然不起作用。
(3) [已解决] gridResize 也不起作用。我确实得到了不同的光标来改变大小，但在尝试改变大小时，它似乎不起作用。
我唯一能想到的错误是包含了太多 css 和 js 文件。
如有任何帮助，我们将不胜感激。谢谢
您发布的代码有很多问题。
首先您插入了 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 处理程序，前提是您在处理程序 中做 绝对独立的事情。你所做的是 dependent 调用。您可以使用 navGrid、filterToolbar 和其他 jqGrid 方法 只有在创建网格后 。因此，您应该将所有处理程序的内容包含在一个中，首先是 document.ready handler.
表格中columnChooser的调用没有任何意义。您应该在导航器工具栏中包含该按钮，并仅在按钮的 onClick 处理程序中调用方法 columnChooser。
您应该在 subGridRowExpanded 中创建的子网格中包含 idPrefix 选项。每个子网格都应该有 unique 前缀。问题是：可以同时打开多个子网格，并且行的 ID 可以相同。为了保护代码产生 id 重复，你应该使用 idPrefix 选项。例如 idPrefix: "s_" + row_id + "_".
最后一句话：我根本不推荐使用scroll: true，因为在使用jqGrid的另一个特性和其他不同的实现问题时存在很多限制。