Using JQGrid in Posts

  • enjaydo

    (@enjaydo)


    11 years, 5 months ago

    I am trying to use JQGrid in a post, but not sure how to do it. Is this something I would have to do with a plugin, or am I just doing it wrong here. This code works fine in a plain hmtl file. I am just looking to be pointed in the correct direction (noob with wp). Thanks!

    <link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-smoothness/jquery-ui-1.8.23.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css" />

<script src="jqgrid/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jqgrid/js/jquery.jqGrid.src.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery(function(){
	jQuery("#list").jqGrid({
...
</script>
<body>
<table id="list"></table> <div id="pager"></div>
</body>
Viewing 3 replies - 1 through 3 (of 3 total)
  • projwest

    (@projwest)

    11 years, 5 months ago

    I am also trying to get JQgrid to show up in a post also. I have written a plugin with php and a shortcode to accomplish this. I had to put the script calls in the header.

    The grid shows up with the correct column headers but the data will not show up.

    Thread Starter enjaydo

    (@enjaydo)

    11 years, 5 months ago

    After learning about the structure of WP, I ended up putting the necessary scripts and css in my themes/scripts (or themes/js, depending on the theme) and themes/css folders respectively. All the themes I worked with already had jQuery, so I just needed to add the JQGrid scripts. Then I added references for the JQGrid css and scripts in the theme header: 

    <link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_template_directory_uri(); ?>/css/ui-smoothness/jquery-ui-1.8.23.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_template_directory_uri(); ?>/css/ui.jqgrid.css" />

<?php
  wp_enqueue_script("jquery");
  wp_enqueue_script("jqgridm", get_template_directory_uri() . "/scripts/i18n/grid.locale-en.js", array( "jquery" ));
  wp_enqueue_script("jqgrids", get_template_directory_uri() . "/scripts/jquery.jqGrid.src.js", array( "jquery" ));

  wp_head();
?>

    Afterwards, I could just put this right in the post:

    <script type="text/javascript">
jQuery(function() {
  jQuery("#tableid").jqGrid({
    url:'/json/json.php',
    datatype: "json",
    colNames:['a', 'b', 'c', 'd', 'e'],
    colModel:[
      {name:'a',index:'a', width:50},
      {name:'b',index:'b', width:225},
      {name:'c',index:'c', width:60},
      {name:'d',index:'d', width:75},
      {name:'e',index:'e', width:75, align:"right" }
    ],
    pager: '#pager',
    rowNum:100,
    sortname: 'e',
    sortorder: "asc",
    viewrecords: true,
    gridview: true,
    height: '100%',
    width: '100%',
    caption:"Title",
    loadComplete: function(reload) {
      jQuery("#myGridID").trigger("reloadGrid");
    }
  });
});
</script>

<body>
<table id="tableid"></table> <div id="pager"></div>
</body>

    I am using php to generate the data as json for the grid, and putting those in a json folder in my root www dir. My approach sounds a bit different than yours, but figured I would share my working solution.

    The only problem I have now is getting the grids to scale with the rest of the page, which I’m sure I’ll figure out when I get back around to it.

    If you want to share more details about what you are doing, I can see if I can offer any suggestions. I’ve been debating building a plugin for parametrized jqgrids, but that’s months out at this point if I decide to do it. Thanks!

    Digital Raindrops

    (@adeptris)

    11 years, 4 months ago

    Hi enjaydo,
    Did you manage to get this working with WordPress tables.

    I am looking to do something for quick editing custom post types in the admin section, as a table row structured view.

    Regards

    David

    e-mail: david.cox@digitalraindrops.net

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Using JQGrid in Posts’ is closed to new replies.