Я создаю приложение, которое должно обрабатывать очень большие объемы текста, и где место на экране для просмотра это за дополнительную плату. Возможность изменения размера и / или минимизации таблицы с помощью jqGrid кажется идеальным решением ... только я не смог заставить ее работать. Я могу сделать одно или другое, но не оба. При включении обеих опций после первого события изменения размера сворачивание будет только исчезать, оставляя границу, которая занимает предыдущие измерения таблицы.
Я новичок в jQuery и jqGrid, поэтому я не смог понять концепции достаточно, чтобы понять, что происходит не так. Я обнаружил похожую проблему, обсуждаемую ЗДЕСЬ , где был опубликован обходной путь, но я не нашел обходной путь для меня. (Возможно, это что-то очень простое, но я пока не вижу этого.)
Большое спасибо за помощь.
Вот обходной путь (который я не получил на работу):
//
// Make the grid resizable.
//
$("#treegrid2").jqGrid('gridResize',{minWidth:350,minHeight:150,
stop: function (grid, ev, ui) {
$(grid.srcElement).parent ().css ("height", null);
}
});
А вот мой код:
<!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>
РЕДАКТИРОВАТЬ: С 23 мая я все еще ищу ответы на этот! Если кто-то решил эту загадку, пожалуйста, предоставьте решение остальным. Спасибо!