How to both resize and minimize a jqGrid table
I'm building an application which needs to handle very large amounts of text, and where screen space for viewing it is at a premium. Being able to resize and/or minimize a table with jqGrid seems an ideal solution...only I have not been able to get it to work. I can do one or the other, but not both. With both options enabled, after the first resize event, the minimize will only blank out, leaving a border behind which occupies the prior dimensions of the table.
I'm new to jQuery and jqGrid, so I have not been able to grasp the concepts enough to understand what is going wrong. I found a similar issue discussed HERE where a work-around was posted, but I have not gotten the workaround to work for me. (It's probably something super simple, but I just can't see it yet.)
Thanks so much for helping.
Here's the workaround (that I haven't gotten to work):
//
// Make the grid resizable.
//
$("#treegrid2").jqGrid('gridResize',{minWidth:350,minHeight:150,
stop: function (grid, ev, ui) {
$(grid.srcElement).parent ().css ("height", null);
}
});
And here's my code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Source-Info" content="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules" />
<title>My Grid One</title>
<link rel="stylesheet" type="text/css" media="screen" href="./css/jquery-ui-1.8.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="./css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="./css/ui.multiselect.css" />
<style>
html, body {
margin: 0px;
padding: 0px;
font-size: 75%;
}
.ui-jqgrid tr.jqgrow td {
white-space: normal !important;
height:auto;
vertical-align:text-top;
padding-top:2px;
}
</style>
<script src="./js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="./js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="grid.loader.js" type="text/javascript"></script>
<script src="./js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="./js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script src="./js/jquery.tablednd.js" type="text/javascript"></script>
<script src="./js/jquery.contextmenu.js" type="text/javascript"></script>
<script src="./js/jquery.layout.js" type="text/javascript"></script>
<script src="./js/grid.formedit.js" type="text/javascript"></script>
<script src="./js/ui.multiselect.js" type="text/javascript"></script>
</head>
<body>
<script src="celledit.js" type="text/javascript"> </script>
<table id="repost"></table>
<div id="prepost"></div>
<input type="BUTTON" id="bedata" value="Edit Selected" />
<div id="hiddenDivId"></div>
<script type="text/javascript">
jQuery("#repost").jqGrid({
url:'example.php',
editurl: 'jqGridCrud.php', // 'update_mysql.php'
mtype: 'GET',
forceFit : true,
cellEdit: true,
cellsubmit: 'clientArray',
beforeSaveCell: function() {
//rowid, cellname, value, iRow, iCol
//alert(arguments[0]+' '+arguments[1]+' '+arguments[2])
$.post("jqGridCrud.php", {id: arguments[0], col: arguments[1], query: arguments[2]},
function(data){
});
},
onclickSubmit: function (开发者_如何转开发params) {
var ajaxData = {};
var list = $("#repost");
var selectedRow = list.getGridParam("selrow");
rowData = list.getRowData(selectedRow);
ajaxData = { invid: rowData.invid };
alert("GOT IT");
return ajaxData;
},
colNames:['Inv No','Date','Amount','Tax','Total','Notes'],
colModel :[
{name:'invid', index:'invid', width:55,editable:false},
{name:'invdate', index:'invdate', width:60,editable:true},
{name:'amount', index:'amount', width:60, align:'right',editable:true},
{name:'tax', index:'tax', width:60, align:'right',editable:true},
{name:'total', index:'total', width:60, align:'right',editable:true},
{name:'note', index:'note', width:350, edittype:'textarea', editoptions: {rows:"10"},sortable:false,editable:true}
],
rowNum:10,
width:700,
rowList:[10,20,30],
multiselect: false,
pager: '#prepost',
viewrecords: true,
sortname: 'invid',
sortorder: "desc",
caption:"My Own Grid",
stop: function (grid, ev, ui) {
$(grid.srcElement).parent().css ("height", null);
},
onHeaderClick: function (grid, ev, ui) {
$(grid.srcElement).parent().css ("height", null);
}
});
$("#bedata").click(function(){ var gr = jQuery("#repost").getGridParam('selrow'); //getSelectedRow();
//if( gr != null ) jQuery("#repost").delGridRow(gr,{reloadAfterSubmit:false}); else alert("Please Select Row to delete!");
var rows= jQuery("#repost").jqGrid('getRowData');
var paras=new Array();
for(var i=0;i<rows.length;i++){
var row=rows[i];
paras.push($.param(row));
}
alert (paras);
$.ajax({
type: "POST",
url: "jqGridCrud.php",
data: paras.join(),
success: function(msg){ alert('MESS:'+msg+" END:\n\n"+paras); }
});
//get total rows in the grid
var numberOfRecords = $("#repost").getGridParam("invid");
for(i=1;i<=numberOfRecords;i++)
{
var rowId = $("#repost").getRowData(i);
var name = rowId['name'];
//put all rows for the grid
$('<input type="hidden" />').attr('name', i+'_name').attr('value',ime).appendTo('#hiddenDivId');
};
});
jQuery("#repost").jqGrid('navGrid','#prepost',{edit:false,add:false,del:false,drag:true});
jQuery("#repost").jqGrid('gridResize',{minWidth:350,maxWidth:800,minHeight:80, maxHeight:350});
//
// Make the grid resizable.
//
jQuery("#repost").jqGrid('gridResize',{minWidth:350,minHeight:150,
stop: function (grid, ev, ui) {
$(grid.srcElement).parent ().css ("height", null);
}
});
//$('#gbox_repost').draggable (); // Drags from anywhere in the grid, not just title bar :(
$('#gbox_' + 'repost').draggable ({handle:"div.ui-jqgrid-titlebar"});
// $(document).ready(function() {
// $('#repost').editable('jqGridCrud.php');
// });
</script>
</body>
</html>
EDIT: AS OF 23 May, I'm still looking for answers on this one! If anyone has solved this riddle, please provide the rest of us the solution. Thank you!
This was my solution to resizing the grid, and it seems to work with resizing:
$(window).bind('resize', function () {
var width = $("#myGrid").closest('.grid_container').width() - 2; // fudging to prevent scrollbars
$("#myGrid").('setGridWidth', width);
}).trigger('resize');
The '.grid_container' selector selects the div which I've wrapped around the grid specifically for resizing purposes (and any other styles I need to add).
However, I can see how you using "min-height" instead of just "height" might make the minimization fail.
You may be able to expand my code about to adjust the height of the grid as well.... but I wouldn't recommend it. You should probably just allow the grid to fit the amount of rows it has listed, and then restrict the amount of rows per page.
加载中,请稍侯......
精彩评论