Fatal编程技术网
  • javascript/
  • Javascript 如何调整jqGrid表的大小并使其最小化

Javascript 如何调整jqGrid表的大小并使其最小化

javascript jquery jqgrid

Javascript 如何调整jqGrid表的大小并使其最小化,javascript,jquery,jqgrid,Javascript,Jquery,Jqgrid,我正在构建一个应用程序，它需要处理大量的文本，并且屏幕空间非常大。能够用jqGrid调整和/或最小化一个表似乎是一个理想的解决方案…只是我还没能让它工作。我可以做其中一个，但不能同时做两个。启用这两个选项后，在第一次调整大小事件之后，“最小化”将仅清空，并在后面留下一个边框，该边框占据了表的先前维度 我对jQuery和jqGrid还不熟悉，所以我还没有掌握足够的概念来理解哪里出了问题。我发现有一个类似的问题被讨论过，在那里发布了一个变通方法，但我还没有找到适合我的变通方法。（这可能是一个超级简单

我正在构建一个应用程序，它需要处理大量的文本，并且屏幕空间非常大。能够用jqGrid调整和/或最小化一个表似乎是一个理想的解决方案…只是我还没能让它工作。我可以做其中一个，但不能同时做两个。启用这两个选项后，在第一次调整大小事件之后，“最小化”将仅清空，并在后面留下一个边框，该边框占据了表的先前维度

我对jQuery和jqGrid还不熟悉，所以我还没有掌握足够的概念来理解哪里出了问题。我发现有一个类似的问题被讨论过，在那里发布了一个变通方法，但我还没有找到适合我的变通方法。（这可能是一个超级简单的东西，但我现在还看不到。）

非常感谢你的帮助

以下是解决方法（我还没有开始工作）：

这是我到目前为止的代码：

    <!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>


我的格子一号
html，正文{
边际：0px；
填充：0px；
字体大小：75%；
}
.ui jqgrid tr.jqgrow td{
空白：正常！重要；
高度：自动；
垂直对齐：文本顶部；
垫顶：2件；
}
jQuery（“#repost”）.jqGrid({
url:'example.php'，
editurl:'jqGridCrud.php'，//'update_mysql.php'
mtype:'获取'，
forceFit：对，
是的，
cellsubmit:'客户端阵列'，
beforeSaveCell:函数（）{
//rowid、cellname、value、iRow、iCol
//警报（参数[0]+''+参数[1]+''+参数[2]）
$.post（“jqGridCrud.php”，{id:arguments[0]，col:arguments[1]，query:arguments[2]}，
功能（数据）{
});
},
onclickSubmit:函数（参数）{
var ajaxData={}；
风险值列表=$（“#回购”）；
var selectedRow=list.getGridParam（“selrow”）；
rowData=list.getRowData（selectedRow）；
ajaxData={invid:rowData.invid}；
警惕（“明白了”）；
返回数据；
},
colNames:['Inv No'，'Date'，'Amount'，'Tax'，'Total'，'Notes']，
colModel:[
{名称：'invid'，索引：'invid'，宽度：55，可编辑：false}，
{名称：'invdate'，索引：'invdate'，宽度：60，可编辑：true}，
{名称：'amount'，索引：'amount'，宽度：60，对齐：'right'，可编辑：true}，
{名称：'tax'，索引：'tax'，宽度：60，对齐：'right'，可编辑：true}，
{名称：'total'，索引：'total'，宽度：60，对齐：'right'，可编辑：true}，
{名称：'note'，索引：'note'，宽度：350，编辑类型：'textarea'，编辑选项：{rows:'10'}，可排序：false，可编辑：true}
],
rowNum:10，
宽度：700，
行列表：[10,20,30]，
多选：错，
寻呼机：'#前置'，
viewrecords：是的，
sortname:'因维德'，
巫师：“描述”，
描述：“我自己的网格”，
停止：功能（电网、电动汽车、用户界面）{
$（grid.srcielement.parent（）.css（“高度”，null）；
},
onHeaderClick：功能（网格、ev、ui）{
$（grid.srcielement.parent（）.css（“高度”，null）；
}
});
$（“#bedata”）。单击（函数（）{var gr=jQuery（#repost”）。getGridParam（'selrow'）；//getSelectedRow（）；
//if（gr！=null）jQuery（#repost”）.delGridRow（gr，{reloadeaftersubmit:false}）；else警报（“请选择要删除的行！”）；
var rows=jQuery（“#repost”）.jqGrid（'getRowData'）；
var paras=新数组（）；

对于（var i=0；i这是我调整网格大小的解决方案，它似乎可以调整大小：


$(window).bind('resize', function () {
    var width = $("#myGrid").closest('.grid_container').width() - 2; // fudging to prevent scrollbars
    $("#myGrid").('setGridWidth', width);
}).trigger('resize');


“.grid_container”选择器选择我专门围绕网格包装的div，用于调整大小（以及我需要添加的任何其他样式）

但是，我可以看出，使用“最小高度”而不是“高度”可能会导致最小化失败


您也可以扩展我的代码来调整网格的高度……但我不建议您这样做。您可能只需要允许网格符合它列出的行数，然后限制每页的行数。
谢谢您的回复，Xiconia。我尝试添加您建议的代码，但发现我无法继续r调整大小。当我查看javascript错误时，它现在说“XML筛选器应用于非XML值”，并指出这一行是错误的来源：$（“#repost”）。（'setGridWidth'，width）；很有趣。您使用的是什么版本的jqGrid？另外，您是否使用“grid\u容器”添加了一个周围的div类？再次感谢你的时间和帮助，xixonia。我添加了div，但没有添加“grid_container”类。我现在添加了（我想）通过，现在，有趣的是，我可以调整网格的大小，但仍然无法移动它，并且仍然看到相同的XML相关错误。我不知道我有什么版本的jqGrid，但我在过去几个月内下载了它。这很奇怪…我不知道如何解释“非XML值”错误…：/

$(window).bind('resize', function () {
    var width = $("#myGrid").closest('.grid_container').width() - 2; // fudging to prevent scrollbars
    $("#myGrid").('setGridWidth', width);
}).trigger('resize');