重新排序列,虚拟滚动,网格大小在jqgrid不起作用
Reordering columns, Virtual scroll, gridResize in jqgrid does not work
我使用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');
});
我按照Oleg的建议做了,但还是出现了同样的问题。
我面临的问题。[解决]我的虚拟卷轴不工作。我玩的高度,宽度和shrinkToFit也。但它似乎仍然不起作用。设置scroll:true时发生的唯一事情是禁用分页。
(2) [SOLVED] Sortable:true不起作用。我已经包含了必要的css和js文件和排序仍然不工作。
(3) [SOLVED] Also 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
处理程序。你所做的是依赖于的调用。只有在创建网格之后,才能使用navGrid
、filterToolbar
和其他jqGrid方法。因此,您应该将所有处理程序的内容包含在一个处理程序中,首先是document.ready
处理程序。
形式的columnChooser
调用没有意义。您应该将按钮包含在导航器工具栏中,并仅在按钮的onClick处理程序中调用columnChooser
方法。
你应该包括idPrefix
选项的子网格,你在subGridRowExpanded
内部创建。每个子网格都应该有唯一的前缀。问题是:可以同时打开多个子网格,并且行的id可能相同。为了保护代码生成id副本,您应该使用idPrefix
选项。例如:idPrefix: "s_" + row_id + "_"
.
最后一点:我完全不建议使用scroll: true
,因为在使用jqGrid的其他特性时存在许多限制和其他不同的实现问题。
- 在筛选网格期间,网格负载掩码不起作用
- 使用requireJS的jqGrid-网格加载但不起作用
- 网格视图页眉冻结在母版页中不起作用
- 启动网格在IE8中不起作用
- 按钮单击在Celltemplate角度网格中不起作用
- RefreshFilter在DHTMLX网格中不起作用.当我使用自定义组合框时
- Kendo UI网格分页不起作用
- Kendo mvc网格客户端模板javascript函数不起作用
- jqgrid子网格row_id空格不起作用PHP jquery
- resizeCanvas 在光滑网格折叠时不起作用
- ExtJS网格分页不起作用
- 使用 JQuery 在网格视图中获取文本框值,val() 不起作用
- Javascript 函数调用在网格视图中不起作用
- 数据表个人搜索在放置在网格顶部时不起作用
- 剑道UI Q3网格导出到Excel内置不起作用
- 在 Extjs 网格视图中隐藏行不起作用
- 侦听器在网格面板上不起作用 - 分机 JS
- 剑道 UI 网格筛选器在之前打开弹出窗口时不起作用
- 搜索在网格视图上不起作用
- 可编辑的true在Jquery网格不起作用