jqGrid无法正确显示 [英] jqGrid not display properly

问题描述

我正在使用jQuery网格插件jqGrid来显示数据数组.

I am using jQuery grid plugin , jqGrid, to show an array of data.

我想要实现的是 1.默认情况下，该网格为空. 2.当用户单击搜索按钮时，它将使用AJAX加载数据 3.数据将加载到网格中.

What I want to achieve is 1. by default, that grid is empty. 2. when user clicks the search button, it will use AJAX to load data 3. data will load into grid.

从附件中，我出现此错误

From the attachment, I have this error

1. 网格宽度不是100％px，而是两个小
2. 寻呼机未显示.如何使用控制寻呼机的方法?

如何解决?有样品吗?

谢谢

<h2>Search</h2>
<form id="project_search_form">
<table class="grid">
...
    <tr>        
        <td><a  class="form_button" onclick="searchProject();" href="#">search</a></td> 
    </tr>
</table>
</form>


<table id="projectList"></table> 
<div id="projectPager"></div>

<script type="text/javascript">

$(document).ready(function(){

    jQuery("#projectList").jqGrid({ 
        url:'server.php?q=2', 
        datatype: "json", 
        colNames:['ID','Name'], 
        colModel:[ {name:'projectId',index:'id', width:55} , {name:'name',index:'name', width:55}], 
        rowNum:10, 
        rowList:[10,20,30], 
        pager: '#pager5', 
        sortname: 'id', 
        viewrecords: true, 
        sortorder: "desc", 
        caption:"Simple data manipulation", 
        editurl:"someurl.php" }).navGrid("#projectPager",{edit:false,add:false,del:false}); 
});

function searchProject(){
    var param =  $('#project_search_form').serialize();
     BaseAjaxUtil.object_search(param, 
              {
                 callback:function(data){                        
                     var jsongridRows = eval("("+data+")");

                     for(var i = 0; i < jsongridRows.length; i++) {
                        var datarow = jsongridRows[i];      
                        var su=jQuery("#projectList").jqGrid('addRowData',i+1, datarow); 
                        // if(su) alert("Succes. Write custom code to add data in server"); else alert("Can not update");
                     }

                 },
                 errorHandler:function(errorString) { alert("error:"+errorString); }            
                }
              );        
}
</script>

推荐答案

您可以使用autowidth: true选项控制宽度.从 jqGrid文档:

You can use the autowidth: true option to control width. From the jqGrid docs:

设置为true时，网格宽度将自动重新计算为父元素的宽度.仅在创建网格时才执行此操作.为了在父元素更改宽度时调整网格大小，您应该应用自定义代码并为此使用setGridWidth方法

When set to true, the grid width is recalculated automatically to the width of the parent element. This is done only initially when the grid is created. In order to resize the grid when the parent element changes width you should apply custom code and use the setGridWidth method for this purpose

然后，您只需要确保您的父元素具有适当的宽度即可.

Then you just need to make sure that your parent element is of the appropriate width.

这篇关于jqGrid无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！