【问题标题】:Problem customizing jqgrid, navGrid button won't show , row fonts way too big in the grid自定义 jqgrid 时出现问题,navGrid 按钮不显示,网格中的行字体太大
【发布时间】:2026-01-08 09:00:01
【问题描述】:

我已经设法让 jqGrid 3.8 使用 json 在我的项目 (Zend Framework) 中工作。虽然基本的数据获取工作有效,但我不明白为什么我看不到导航面板上显示的按钮。这是我在客户端所做的:

<script type="text/javascript">

 $(function(){ 
 $("#roomgrid").jqGrid({ 
     url:'/admin/admin-room/view', 
     datatype: "json",
     autowidth: true, 
     colNames:['Room ID','Room Number','Room Type','Image', 'Price','Facilities'], 
     colModel:[ {name:'id',index:'id', width:55,editable:false,hidden:true,editoptions:{readonly:true,size:10}}, 
                {name:'room_number',index:'room_number', width:55,editable:false,editoptions:{readonly:true,size:10}}, 
                {name:'name',index:'name', width:80,editable:true,editoptions:{size:10}},  
                {name:'pic_url',index:'pic_url', width:90,editable:true,editoptions:{size:25}}, 
                {name:'price',index:'price', width:60, align:"right",editable:true,editoptions:{size:10}}, 
                {name:'facilities',index:'facilities', width:60, editable:true,editoptions:{size:10}}], 
    rowNum:5, 
    rowList:[5,8,10,20,30], 
    pager: '#paged',
    sortname: 'id',
    sortorder: "desc",
    viewrecords: true,
    caption: 'Manage Rooms'});
 });
$("#roomgrid").jqGrid('navGrid','#paged', {view: true,del:true}); 

</script>

<table id="roomgrid"></table>
<div id="paged"></div>

在服务器端我有这个:

public function preDispatch(){
    $this->_helper->viewRenderer->setNoRender();
    $this->_helper->layout()->disableLayout();
}
public function viewAction() {

    $filters = array(
    'page'=>array('HtmlEntities','StringTrim'),
    'rows'=>array('HtmlEntities','StringTrim'),
    'sidx'=>array('HtmlEntities','StringTrim'),
    'sord'=>array('HtmlEntities','StringTrim'));

    $validators = array(
    'page'=>array('NotEmpty','Int'),
    'rows'=>array('NotEmpty','Int'),
    'sord'=>array('NotEmpty'));

    $input = new Zend_Filter_Input($filters,$validators);
    $input->setData($this->getRequest()->getParams());
    if($this->getRequest()){
        if($input->isValid()){

            $this->response->page = $input->page;

            $input->rows);
            echo $this->getRooms('jqgrid', $input->page, $input->rows);
        }
    }



}


public function getRooms($switch, $page, $rows){
    $q = Doctrine_Query::create()->select("r.id,r.room_number,t.name,r.pic_url, r.price, r.facilities")
    ->from("Hotel_Model_Room r")
    ->leftJoin("r.RoomType t");

    $pager = new Doctrine_Pager($q,$page, $rows);
    $result = $pager->execute(array(), Doctrine_Core::HYDRATE_ARRAY);
    $totalpages = $pager->getLastPage();
    $totalrecord = Doctrine_Core::getTable("Hotel_Model_Room")->count();

    switch ($switch){
        case 'array':
            return $result;
            break;
        case 'jqgrid' :
            return $this->formatJqgridRoom($result, $page,$totalpages, $totalrecord);
            break;
    }
}

public function formatJqgridRoom($resultset, $page='1', $totalpages, $count){

    $rows= array();

    $response->page = $page;
    $response->total = $totalpages;
    $response->records = $count;

    foreach ($resultset as $key => $value){
        $response->rows[$key]['id'] = $value['id'] ;
        $response->rows[$key]['cell'] = array($value['id'],     $value['room_number'],$value['RoomType']['name'], $value['pic_url'], $value['price'],$value['facilities']) ;
    }


        return json_encode($response);

}

我正在使用 jquery ui redmond 主题,我确保 jqGrid 正在使用它,当 css include 被注释掉时,网格不再是蓝色的。我还尝试使用 imagepath 选项引用 css 本身和它没有任何区别。有css文件夹结构

\css
  \redmond
    \images
    jquery-ui-1.8.5.custom.css
 ui.jqgrid.css
 layout.css

另一个问题是我找不到从哪里挑选行字体 css。它们在这里有点太大了。我相信我是直接从 jqueryui 网站下载的,所以我现在有点困惑。显然我有一些东西'我做错了,到目前为止我找不到它。所以我对此有点困惑。

感谢您阅读本文。

【问题讨论】:

    标签: jquery jquery-ui jqgrid jqgrid-php


    【解决方案1】:

    已修复。我忘了我必须输入寻呼机定义

    $("#roomgrid").jqGrid('navGrid','#paged', {view: true,del:true}); 
    

    进入查询

    $(function(){})
    

    navGrid 函数是在它外面定义的。没有显示的原因。谢谢。 我希望这对某人有所帮助

    【讨论】: