当前位置： 文江博客话题详情

jqGrid数据不再出现

发布于 2024-12-18 06:43:34 字数 5365 浏览 3 评论 0原文

此表单上有许多关于此主题的主题；但是，我仍然无法让它正常工作。我想将表格的宽度设置为 900px。此外，因为我显示了近十几行，所以如果行溢出表大小的边界（如果可能的话），我希望自动实现滚动条。

我目前遇到的问题：

  1. 用户已帮助我解决了这个设置宽度的问题

  2. 数据不再出现在我的网格，猜测服务器端问题。

更新为包含完整代码：

HTML：

      <?php 
require_once 'tabs.php';
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>jQuery jqGrid Demonstration</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />

    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
    <script src="js/i18n/grid.locale-en.js" type="text/javascript" ></script>

    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>

    <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

<script type="text/javascript">
//<![CDATA[
    $(document).ready(function() {
        // first create the grid
        $('#grid').jqGrid({
    url:'grid.php',
    datatype: "json",
    height: 100,
    width: 900,
    colNames:['Customer ID','Hardware ID', 'Username','Password','Email','Last Login','Last IP','Registration Date','Expire Date'],
    colModel:[
        {name:'customerid',index:'customerid', width:150, sorttype:'int'},
        {name:'hardware_id',index:'hardware_id', width:150},
        {name:'username',index:'username', width:100},
        {name:'password',index:'password', width:100},
        {name:'email',index:'email', width:100},
        {name:'lastlogin',index:'lastlogin', width:100},
        {name:'lastipaddress',index:'lastipaddress', width:100},
        {name:'registration_date',index:'registration_date', width:100},
        {name:'expire_date',index:'expire_date', width:100}
    ],
    rowNum:5,
    rowList:[5,8,10,20,30], 
    mtype: "GET",
    gridview: true,
    pager: '#pager',
    sortname: 'customerid',
    viewrecords: true,
    sortorder: "desc",
    caption: "Virtual scrolling on local data"
});

$("#grid").jqGrid('navGrid','#pager', {view: true,del:false});
        // now you can any time change the width of the grid
        $('#grid').jqGrid('setGridWidth', 900);


    });

//]]>
</script>
  </head>

  <body>
      <div>
          <?php include ("grid.php");?>
      </div>
      <div id="pager"></div>

   </body>
</html>

SEVER-SIDE (grid.php)

<?php

include '../dbc.php';
page_protect();
require_once 'jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/jqGrid.php";
// include the driver class
require_once ABSPATH."php/jqGridPdo.php";
// Connection to the server

$link = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$link ->query("SET NAMES utf8");

// Create the jqGrid instance
$grid = new jqGridRender($link);

$username = $_SESSION['user_name'];
$grid->SelectCommand = "SELECT * FROM tblcustomer_$username";
// set the ouput format to json
$grid->dataType = 'json';
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('grid.php');
// Set some grid options
$grid->setGridOptions(array("rowNum"=>100,"sortname"=>"customerid","height"=>150));

// Change some property of the field(s)
$grid->setColProperty("lastlogin", array(
    "formatter"=>"date",
    "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
    "search"=>false,
    "width"=>"400"
    ));
// Registration date
$grid->setColProperty("registration_date", array(
    "formatter"=>"date",
    "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
    "search"=>false,
    "width"=>"400"
    ));
$grid->setColProperty("expire_date", array(
    "formatter"=>"date",
    "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
    "search"=>false,
    "width"=>"400"
    ));
$grid->setColProperty("customerid",array("width"=>"650"));
$grid->setColProperty("hardware_id",array("width"=>"250"));
$grid->setColProperty("username",array("width"=>"150"));
$grid->setColProperty("password",array("width"=>"150"));
$grid->setColProperty("email",array("width"=>"150"));
$grid->setColProperty("lastipaddress",array("width"=>"100"));

$grid->setFilterOptions(array("stringResult"=>true));
$grid->navigator=true;
$grid->setNavOptions('navigator',array("excel"=>true,"add"=>true,"edit"=>true,"view"=>true,"del"=>true,"search"=>true));
// Enjoy
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$link = null;
?>

我觉得我已经尝试了一切，但如果有人看到我无法做到的，请随时告诉我！

谢谢你的帮助，

埃文

原文

There are many threads regarding this very topic on this form; however, I still cannot get this to work correctly. I would like to set the width of the table to 900px. Furthermore, because I am displaying nearly a dozen rows, I would like for a scroll bar to be automatically implemented if the rows overflow the boundaries of the table size (if at all possible).

Problems I am currently experiencing:

  1. User has help me to solve this issue, which was setting the width

  2. Data is no longer appearing in my grid, guessing server-side issue.

Updated to include full code:

HTML:

      <?php 
require_once 'tabs.php';
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>jQuery jqGrid Demonstration</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />

    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
    <script src="js/i18n/grid.locale-en.js" type="text/javascript" ></script>

    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>

    <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

<script type="text/javascript">
//<![CDATA[
    $(document).ready(function() {
        // first create the grid
        $('#grid').jqGrid({
    url:'grid.php',
    datatype: "json",
    height: 100,
    width: 900,
    colNames:['Customer ID','Hardware ID', 'Username','Password','Email','Last Login','Last IP','Registration Date','Expire Date'],
    colModel:[
        {name:'customerid',index:'customerid', width:150, sorttype:'int'},
        {name:'hardware_id',index:'hardware_id', width:150},
        {name:'username',index:'username', width:100},
        {name:'password',index:'password', width:100},
        {name:'email',index:'email', width:100},
        {name:'lastlogin',index:'lastlogin', width:100},
        {name:'lastipaddress',index:'lastipaddress', width:100},
        {name:'registration_date',index:'registration_date', width:100},
        {name:'expire_date',index:'expire_date', width:100}
    ],
    rowNum:5,
    rowList:[5,8,10,20,30], 
    mtype: "GET",
    gridview: true,
    pager: '#pager',
    sortname: 'customerid',
    viewrecords: true,
    sortorder: "desc",
    caption: "Virtual scrolling on local data"
});

$("#grid").jqGrid('navGrid','#pager', {view: true,del:false});
        // now you can any time change the width of the grid
        $('#grid').jqGrid('setGridWidth', 900);


    });

//]]>
</script>
  </head>

  <body>
      <div>
          <?php include ("grid.php");?>
      </div>
      <div id="pager"></div>

   </body>
</html>

SEVER-SIDE (grid.php)

<?php

include '../dbc.php';
page_protect();
require_once 'jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/jqGrid.php";
// include the driver class
require_once ABSPATH."php/jqGridPdo.php";
// Connection to the server

$link = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$link ->query("SET NAMES utf8");

// Create the jqGrid instance
$grid = new jqGridRender($link);

$username = $_SESSION['user_name'];
$grid->SelectCommand = "SELECT * FROM tblcustomer_$username";
// set the ouput format to json
$grid->dataType = 'json';
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('grid.php');
// Set some grid options
$grid->setGridOptions(array("rowNum"=>100,"sortname"=>"customerid","height"=>150));

// Change some property of the field(s)
$grid->setColProperty("lastlogin", array(
    "formatter"=>"date",
    "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
    "search"=>false,
    "width"=>"400"
    ));
// Registration date
$grid->setColProperty("registration_date", array(
    "formatter"=>"date",
    "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
    "search"=>false,
    "width"=>"400"
    ));
$grid->setColProperty("expire_date", array(
    "formatter"=>"date",
    "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
    "search"=>false,
    "width"=>"400"
    ));
$grid->setColProperty("customerid",array("width"=>"650"));
$grid->setColProperty("hardware_id",array("width"=>"250"));
$grid->setColProperty("username",array("width"=>"150"));
$grid->setColProperty("password",array("width"=>"150"));
$grid->setColProperty("email",array("width"=>"150"));
$grid->setColProperty("lastipaddress",array("width"=>"100"));

$grid->setFilterOptions(array("stringResult"=>true));
$grid->navigator=true;
$grid->setNavOptions('navigator',array("excel"=>true,"add"=>true,"edit"=>true,"view"=>true,"del"=>true,"search"=>true));
// Enjoy
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$link = null;
?>

I feel as though I have tried everything, but if anyone sees what I cannot, please feel free to let me know!

Thank you for the help,

Evan

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

猫九 2024-12-25 06:43:35

你能发布你的jqgrid初始化代码吗？这是我的一个示例，应该按照您的描述进行操作：

$("#Building_8839_Transactions").jqGrid({

"colModel":[{"editable":false,"name":"TRANS_YEAR","label":"Year","width":"100.0"},{"name":"TRANS_DESCRIP","editable":true,"editrules":{"required":false},"label":"Action","width":"300.0"},{"name":"BLS_ID","hidden":true,"key":true}],

"shrinkToFit":false,
"sortorder":"desc",
"height":"auto",
"jsonReader":{"page":"PAGE","records":"RECORDS","repeatitems":false,"total":"TOTAL","root":"ROWS"},
"width":"500",
"viewrecords":true,
"editurl":"foobar.cfm",
"datatype":"json",
"caption":"BLS Transactions",
"rowNum":"15",
"url":"blah.cfm",
"sortname":"TRANS_YEAR"         
});

重要的位是“width”：“500”和“shrinkToFit”：false。试试那些。

Can you post your jqgrid initialization code? Here's an example I have that should do what you describe:

$("#Building_8839_Transactions").jqGrid({

"colModel":[{"editable":false,"name":"TRANS_YEAR","label":"Year","width":"100.0"},{"name":"TRANS_DESCRIP","editable":true,"editrules":{"required":false},"label":"Action","width":"300.0"},{"name":"BLS_ID","hidden":true,"key":true}],

"shrinkToFit":false,
"sortorder":"desc",
"height":"auto",
"jsonReader":{"page":"PAGE","records":"RECORDS","repeatitems":false,"total":"TOTAL","root":"ROWS"},
"width":"500",
"viewrecords":true,
"editurl":"foobar.cfm",
"datatype":"json",
"caption":"BLS Transactions",
"rowNum":"15",
"url":"blah.cfm",
"sortname":"TRANS_YEAR"         
});

The important bits are the "width": "500", and "shrinkToFit":false. Try those.

回复 原文
゛时过境迁 2024-12-25 06:43:35

jQuery(document) 没有 gridComplete 方法。你的意思是肯定jQuery.ready。此外，只有在将 if 转换为网格后，您才能在 上使用 setGridWidth 。此外，代码 $.jgrid.no_legacy_api = false; 和 $.jgrid.useJSON = true; 应在 jquery.jqGrid.min.js 之前执行code> 和 grid.locale-en.js 之后。所以代码应该是这样的

<script type="text/javascript" src="js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
    $.jgrid.no_legacy_api = false;
    $.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

<script type="text/javascript">
//<![CDATA[
    $(document).ready(function() {
        // first create the grid
        $('#grid').jqGrid({
            // parameters of jqGrid
        }); 

        // now you can any time change the width of the grid
        $('#grid').jqGrid('setGridWidth', 900);
    }
//]]>
</script>

There are no gridComplete method of jQuery(document). You mean sure jQuery.ready. Moreover you can use setGridWidth on <table id="grid"> only after you convert if to grid. Moreover the code $.jgrid.no_legacy_api = false; and $.jgrid.useJSON = true; should be executed before jquery.jqGrid.min.js and after grid.locale-en.js. So the code should be about the following

<script type="text/javascript" src="js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
    $.jgrid.no_legacy_api = false;
    $.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

<script type="text/javascript">
//<![CDATA[
    $(document).ready(function() {
        // first create the grid
        $('#grid').jqGrid({
            // parameters of jqGrid
        }); 

        // now you can any time change the width of the grid
        $('#grid').jqGrid('setGridWidth', 900);
    }
//]]>
</script>
回复 原文
双马尾 2024-12-25 06:43:35

通过 PHP 执行此操作的最佳方法：

// Set table with auto
$grid->setGridOptions(array( 
    "rowNum"=>10, 
    "sortable"=>true, 
    "rownumbers"=>true,
    "width"=>'auto',
    "altRows"=>true, 
    "multiselect"=>true, 
    "rowList"=>array(10,20,50), 
    )); 

// Set table with 100px
$grid->setGridOptions(array( 
    "rowNum"=>10, 
    "sortable"=>true, 
    "rownumbers"=>true,
    "width"=>1000,
    "altRows"=>true, 
    "multiselect"=>true, 
    "rowList"=>array(10,20,50), 
    ));

检查我的完整代码。

Best way to do this by PHP:

// Set table with auto
$grid->setGridOptions(array( 
    "rowNum"=>10, 
    "sortable"=>true, 
    "rownumbers"=>true,
    "width"=>'auto',
    "altRows"=>true, 
    "multiselect"=>true, 
    "rowList"=>array(10,20,50), 
    )); 

// Set table with 100px
$grid->setGridOptions(array( 
    "rowNum"=>10, 
    "sortable"=>true, 
    "rownumbers"=>true,
    "width"=>1000,
    "altRows"=>true, 
    "multiselect"=>true, 
    "rowList"=>array(10,20,50), 
    ));

Check my complete code.

回复 原文
~没有更多了~

关于作者

赴月观长安

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文