WordPress.org

Ready to get started?Download WordPress

Forums

Using JQGrid in Posts (4 posts)

  1. enjaydo
    Member
    Posted 1 year 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>
  2. projwest
    Member
    Posted 1 year 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.

  3. enjaydo
    Member
    Posted 1 year 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!

  4. Digital Raindrops
    Member
    Posted 1 year 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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.