雅星娱乐注册:基于BootStrap Metronic开发框架经验小

时间: 作者:的直

  

[bootstrap,metronic,jstree,bootstrap分页,metronic分页]基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用

  

在上篇基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理,介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局、菜单等内容,本篇继续这一主题,介绍页面内容常用到的数据分页处理,以及Bootstrap插件JSTree的使用。

  

  

在数据的界面显示当中,表格数据的展示以及分页是非常常见的处理操作,利用Bootstrap的样式布局,以及JQuery的Ajax数据处理,就能很好实现数据的动态展示和分页处理。

  

  

1、列表展示和分页处理1)数据的列表展示  

  

在很多页面里面,我们一般都需要对数据库记录进行列表展示并进行分页。

  

  

  

  

左侧的树列表下面小节介绍,右边就是我们一般的数据查询显示区域,分为查询内容和数据列表两部分,查询内容,我们一般放在一个表单里面进行处理,用户触发查询的时候,我们对事件进行处理,并从MVC后台的控制器里面请求对应的数据返回给页面前端,对数据进行显示和分页处理即可。

  

  

如菜单页面的查询代码如下所示。

  

  
  
  
  
  
    
    
  
  
  
  
    
    
  
  
  
  
    
    
  
  
  
  
    
    
  
  
  
  
  

我们在页面的JS代码里面,处理页面初始化后,对数据进行查询的处理操作,如下脚本所示。

  

  
  
  //页面初始化  $(function () {  initJsTree(); //初始化树  BindEvent(); //绑定事件处理  Search(currentPage);//初始化第一页数据  InitDictItem(); //初始化字典信息  });
  
  

而数据的显示部分,HTML代码如下所示。主要就是显示了表头内容,表格的主体内容grid_body则有脚本动态构建并显示  

  
  
                                
显示名称排序功能ID菜单可见Web连接地址Web菜单图标系统编号操作
  
  
      
      
      

    而数据的显示,是在页面准备完成后,通过Search脚本函数进行处理,处理的时候,先序列号表单的条件和分页的条件信息,传入MVC控制器,获取对应的列表数据,在界面上进行动态绑定即可完成整个处理过程了。具体代码截图如下所示。

      

      

      

      

    而其中的代码  

      
      
      tr += getActionHtml(item.ID);
      
      

    则是通过脚本生成一些操作按钮,界面如下所示。

      

      

      

      

    2)数据分页处理  

      

    我们页面显示的数据一般不是固定的记录,因此分页也是很必要的处理,可以提高性能,也可以提高用户的友好体验,其中的数据分页是采用了Bootstrap的插件Bootstrap Paginator进行处理的。这个控件用的很多,是一个很强大的分页插件。 (责任编辑:admin)

    推荐图片Related

    相关文章Related

    查看更多热门新闻
    

    首页 | js代码 | jQuery特效 | 其他代码 | 关于我们

    Copyright © 2010-2019 菲娱国际平台 版权所有

    系统要求:本站自适应各终端浏览器分辨率

    请使用Google、Firefox、IE9、百度浏览器登录网站

    网站地图 | RSS订阅 | 菲娱国际平台