jquery easyui 使用带分页的combogrid用法

Posted 2023-05-14

我现在有一个json串和一个input标签：

var json = 'goods':['goodsName':'马铃薯','goodsPrice':'12.0000','goodsNumber':'5','goodsName':'AfD','goodsPrice':'23.0000','goodsNumber':'6'] ;

<input id="Text1" type="text" />

然后想把他作为combogrid的数据源，具体的javascript怎么写？？刚刚才学javascript很多不懂，请详细，谢谢

你好！！

jquery easyui中的combogrid比较特殊，算是combo和grid的组合，所以虽然combogrid本身没有提供相应的方法，但是你提出的这个问题可以从grid方面入手解决。

下面是代码：

html:
        <input id="Text1" type="text" />

javascript:
        $(function()
            var json = 'goods':['goodsName':'马铃薯','goodsPrice':'12.0000','goodsNumber':'5','goodsName':'AfD','goodsPrice':'23.0000','goodsNumber':'6'] ;
            
            $('#Text1').combogrid(
                    panelWidth:500,
                    idField:'goodsNumber',
                    textField:'goodsName',
                    columns:[[
                            field:'goodsName',title:'Code',width:60,
                            field:'goodsPrice',title:'Name',width:100,
                            field:'goodsNumber',title:'Address',width:120
                    ]]
            );
            
            var g = $('#Text1').combogrid('grid');
            g.datagrid('loadData', json.goods);
            
        );

 

希望对你有帮助！！

追问

太感谢您的回答了！！对我很有帮助，还想问一个问题：做出来之后的效果是

样式要怎么加进去啊？？？我已经找到了整一个css文件夹，包括combogrid.css还有图片等

追答

使用easyui带的样式··· 有个叫easyui.css吧··

参考技术A var json = 'goods':['goodsName':'马铃薯','goodsPrice':'12.0000','goodsNumber':'5','goodsName':'AfD','goodsPrice':'23.0000','goodsNumber':'6'] ;
$('#Text1').combogrid(
    panelWidth:450,
    value:'5',
    idField:'goodsNumber',
    textField:'goodsName',    
,
    columns:[[
        field:'goodsNumber',title:'goodsNumber',width:60,
        field:'goodsName',title:'goodsName',width:100,
        field:'goodsPrice',title:'goodsPrice',width:120 
        ]]
);

不知道url:变量作为数据源是否合适，一般url都是指向一个后台get操作链接获取json数据。

追问

大侠，您这样写不行啊，没有数据源……不清楚你说的get操作是什么

追答

url就是一个网址，访问这个网址将得到一段json数据。

追问

有没有更加简单的方法？？实在不懂，有没有代码啊？
我看网上有些写
$('Text1').combogrid('dataload' , json ) ; 也是不行的

追答

不知道你的具体环境，不知道如何解释了，建议你去参考jquery easyui 官方的demo中的方法。

参考技术B 　　1.在jquery.easyUI.js 要实现分页，必须在后台action中声明两个变量：page(当前第几页),rows(每页显示多少条信息),否者easyUI前台传递不了分页参数。这两个属性不能该名字，因为在easyUI里面定义死了。
　　2.返回的时候，要返回Map类型的,map结果集里面put两个属性：1.totle(总过有几页),2.rows(查询到的结果集)。

带分页的Wordpress自定义循环

<?php
$blog = new WP_Query();
$args = array(
    'posts_per_page' => 5,
    'paged' => $paged
);
$blog->query($args);
if($blog->have_posts()):
    while ($blog->have_posts()):
        $blog->the_post(); // Sets up the post
?>
<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
<?php the_excerpt() ?>
<?php
    endwhile;
/* -----------------------
    FUNCTION IS BELOW
----------------------- */
wp_pagination_nav($blog, $paged);
wp_reset_query();
endif;
?>
<?php
/* --------------------------------------
  ADD PAGINATION FUNCTION TO YOUR
  FUNCTIONS.PHP FILE
-------------------------------------- */
function wp_pagination_nav($loop, $paged){
  if($loop->max_num_pages>1):
      echo '<div class="pagination">';
      if ($paged > 1):
        echo '<a href="?paged='.($paged-1).'"><</a> ';
      endif;
 
      for($i=1;$i<=$loop->max_num_pages;$i++){
        if($paged==$i || ($i==1 && $paged == 0)){
          $class = "selected";
        } else {
          $class = '';
        }
        echo '<a href="?paged='.$i.'" class="'.$class.'">'.$i.'</a> ';
      }
 
      if($paged < $loop->max_num_pages):
        $nextpage = $paged+1;
        if($paged == 0) $nextpage = 2;
        echo '<a href="?paged='.$nextpage.'">></a> ';
      endif;
      echo '<div class="clear"></div></div>';
  endif;
}
?>