listManager使用详解

原文链接http://www.lovejavascript.com/#!zone/blog/content.html?id=9

插件首页：http://www.lovejavascript.com/#!plugIn/listManager/index.html

首先介绍一下该插件的使用场景和实现功能

使用场景

   适用于管理平台的数据展示列表，通过该插件可以更简约的实现一些前端交互及与列表相关的功能实现。

功能实现

   1、列项的宽度调整

   2、列位置的顺序调整

   3、列的展示与隐藏

   4、本地存储机制，插件会对用户已经调整的宽度、列的展现状态等信息进行存储，再次进入时会根据存储

   5、根据列进行排序，支持单列与多列的排序

   6、分页功能，含常用的分页功能

   7、国际化，默认支持中英文两种语言，可通过配置项进行其它语种的设定。进行回显。

以上的介绍可能过于文字化，接下来依次对这些功能进行code展示。

 

   最简易的实现
   $('table').listManager();
   对的，就是这么简单的一句代码就可以实现刚才功能介绍中所示的1-4项。
   这四项都是插件默认支持的项，其它项则需要借助于配置项。

  

配置项介绍：

  配置分为两种;具体的参数项请参考http://www.lovejavascript.com/#!plugIn/listManager/index.html中的参数说明。

  针对于单表的配置：以参数传递的形式进行配置。

  ex: $('table').listManager({i18n: 'en-us'})

  针对于全局表格的配置：通过全局配置变量listManagerConfig或$.fn.listManager.defaults进行设定。

  ex: window.listManagerConfig = {i18n: 'en-us'};
  ex: $.fn.listManager.defaults = {i18n: 'en-us'};

 

功能介绍中的前四项为纯粹的前端特效，后三项为存在数据交互，正因为这种差异，后三项需要进行配置才可以使用。 下面进行分别介绍

国际化实现：

   国际化相对于前四项的纯前端特效而言，需要进行一些简单的配置。
   通过参数i18n进行配置使用的语种，默认使用的是中文简体
   通过textConfig配置插件中的文本信息及各语种所对应的文字，自带中文简体与美式英语两个语种的文本。
   如仅需要中英两种语种，只需对参数i18n进行配置即可。
   如需扩展可对textConfig进行配置，textConfig所支持的默认项如下，依照默认项的格式进行配置将会对默认项进行覆盖。

   ex: $('table').listManager({
             i18n: 'en-us',
            'config-action': {
                'zh-cn':'配置表格',
                'en-us':'The configuration form'
            }
            ,'first-page': {
                'zh-cn':'首页',
                'en-us':'first'
            }
            ,'previous-page': {
                'zh-cn':'上一页',
                'en-us':'previous'
            }
            ,'next-page': {
                'zh-cn':'下一页',
                'en-us':'next '
            }
            ,'last-page': {
                'zh-cn':'尾页',
                'en-us':'last '
            }
            ,'dataTablesInfo':{
                'zh-cn':'此页显示 {0}-{1} 共{2}条',
                'en-us':'this page show {0}-{1} count {2}'
            }
            ,'goto-first-text':{
                'zh-cn':'跳转至',	
                'en-us':'goto '
            }
            ,'goto-last-text':{
                'zh-cn':'页',
                'en-us':'page '
            }
       });

分页功能实现：

  分页功能默认处于关闭状态，通过参数supportAjaxPage:true进行开启，除止之外还需要配置pageCallback，通过参数名称就可以看出来这是在触发分页后的一个回调函数，当然也可以叫做分页事件。该配置项接收分页事件，在这个函数中会传入一个参数，该 参数包含一些必要的分页信息。

具体配置如下:  

  ex: $('table').listManager({
  supportAjaxPage: true,
    pageCallback: function(query){
    //query 中包含当前的分页信息:cPage(当前页),pSize(每页显示条数)
        //在该callback中 对列表数进行重新请求 并对列表及分页进行数据重填
        //1、请求后端数据
        // $.ajax() ....
        //2、列表数据重填
        var thtml = ''; //拼装好的数据
        var _tbody = $('table tbody');
         _tbody.html(thtml)           
        //3、分页数据重新渲染
        this.resetPageData(table, pageData);
        /*
      其中pageData，需要通过返回数据进行设置，存在四个值，如下所示：  
        pageDate = {        
            tPage: 10,//总页数
            cPage: 1,//当前页	
            pSize: 10,//每页显示条数
            tSize: 100//总条数
        }
        */
    }
  });

排序功能实现：

   排序与分页类似，不再进行描述，配置如下：

   ex: $('table').listManager({
  supportSorting: true,
isCombSorting: true,
    sortUpText:'up',   //配置升序排序的文本信息
    sortDownText:'down', //配置降序排序的文本信息
    sortingCallback: function(query){
    //query 中包含当前的排序信息
        //格式为{th-name: sortUpText/sortDownText}  th-name为th上配置的th-name，
        //在该callback中 对列表数进行重新请求 并对列表及分页进行数据重填
        //1、请求后端数据
        // $.ajax() ....
        //2、列表数据重填
        var thtml = ''; //拼装好的数据
        var _tbody = $('table tbody');
         _tbody.html(thtml)           
        //3、分页数据重新渲染
        this.resetPageData(table, pageData);
        /*
      其中pageData，需要通过返回数据进行设置，存在四个值，如下所示：  
        pageDate = {        
            tPage: 10,//总页数
            cPage: 1,//当前页	
            pSize: 10,//每页显示条数
            tSize: 100//总条数
        }
        */
    }
  });

评论

2 楼 baukh789 2017-10-23  

该文过期
已升级为GridManager
http://gridmanager.lovejavascript.com/api/index.html

1 楼 baukh789 2017-10-23  

已升级为GridManager
http://gridmanager.lovejavascript.com/api/index.html