2012-05-01 3 views
0

Я использую jQuery grid plugin, jqGrid, чтобы показать массив данных.jqGrid отображается неправильно

Что я хочу достичь: 1. По умолчанию эта сетка пуста. 2. Когда пользователь нажимает кнопку поиска, он будет использовать AJAX для загрузки данных 3. данные будут загружаться в сетку.

От привязанности, у меня есть эта ошибка

  1. ширина сетки не 100% ПВ, это два маленьких
  2. пейджера не показывается. как использовать метод управления пейджером?

как исправить? есть какие-то образцы?

Благодаря

screenshot

<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> 
+2

Примечание. Ссылка на ID # pager5 как элемент, который будет содержать пейджер, но ваша разметка HTML не содержит элемент с идентификатором # pager5. Также есть много примеров здесь: http://www.trirand.com/blog/jqgrid/jqgrid.html –

+0

да, вы правы. то как контролировать его ширину? – user595234

ответ

0

Вы можете использовать опцию autowidth: true контроля ширины. От jqGrid docs:

Если установлено значение true, ширина сетки автоматически пересчитывается в ширину родительского элемента. Это выполняется только при создании сетки. Для того, чтобы изменить размер сетки при изменении родительского элемента шириной следует применять пользовательский код и использовать setGridWidth метод для этой цели

Тогда вам просто нужно, чтобы убедиться, что ваш родительский элемент соответствующей ширины.

Смежные вопросы