开始使用 文档 演示/教程 独立组件 社区
全部分类 实体操作 脚本控件

分页控件

  一个简单易用,样式精美的分页控件,用于前端,通过列表绑定事件,删除事件可轻松的实现对数据进行分页处理,解决页面数据过多的问题。

Pager(config,page,fun_load,fun_error, is_cookie)
config

请求参数

page

页面参数

fun_load

页面加载事件

fun_error

加载错误事件 

is_cookie

是否保存cookie

html代码

<head>

    <title></title>

    <link href="/_css/common.css" rel="stylesheet" type="text/css" />

    <script src="/_js/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script src="/_js/Valid.js" type="text/javascript"></script>

    <script src="/_js/common.js" type="text/javascript"></script>

    <script src="download.js" type="text/javascript"></script>

</head>

<body>

<div class="pagefooter">

    <a href="javascript:void(0)" class="bt_normal bt_del">删除</a>

    <div class="pageDiv"></div>

</div>

</body>

list_bind(html, json)

加载数据后执行操作

示例:

var pager = new Pager({type: "list",
   apidoc_type: $('.txt_type').attr('_id'),
   key: text == _default ? "" : text},
   { obj: $('.pageDiv'),
   url: '/handler/sys/ApiDoc.ashx',
   size:10,
   total:10,
   index:1,
   }, function (json){
      var html = '';
      $.each(json.list, function (i, item) {
         html += set_row(item, i);
      });
      var list_bind = function (html, json) { alert("列表绑定") };
});

展示效果:

封装--示例:

fun_pager(_url,
   { type: "list", object_type: type, date: date, key: key, task_user: $('.serach_user').attr('_id') },
   set_row, {
   del_param: { url: _url },
   list_bind: function (html, json) {
      alert("列表绑定事件")
   }
});

展示效果:

callback()

加载数据后执行操作

示例:

var pager = new Pager({type: "list",
   apidoc_type: $('.txt_type').attr('_id'),
   key: text == _default ? "" : text},
   { obj: $('.pageDiv'),
   url: '/handler/sys/ApiDoc.ashx',
   size:10,
   total:10,
   index:1,
   }, function (json){
      var html = '';
      $.each(json.list, function (i, item) {
         html += set_row(item, i);//设置行html代码
      });
      var content = $('.con .content');
      content.find('ul').remove();
      content.find('ol').after(html);
      var callback = function(){
         $('ul li a.bt_update').click(function () {
            alert("加载数据后执行的操作");
         })
      }
      callback();
   }
});

展示效果:

封装--示例:

fun_pager(_url,
   { type: "list", object_type: type, date: date, key: key, task_user: $('.serach_user').attr('_id') },
    set_row,{
   del_param: { url: _url },
   callback: function () {
      $('ul li a.bt_update').click(function () {
         alert("加载数据后执行的操作");
      });
   }
});

展示效果:

info_del(items)

删除函数

示例:

var pager = new Pager({type: "list",
   apidoc_type: $('.txt_type').attr('_id'),
   key: text == _default ? "" : text},
   { obj: $('.pageDiv'),
   url: '/handler/sys/ApiDoc.ashx',
   size:10,
   total:10,
   index:1,
   }, function (json){
      var html = '';
      $.each(json.list, function (i, item) {
         html += set_row(item, i);
      });
      var content = $('.con .content');
      content.find('ul').remove();
      content.find('ol').after(html);
      var items = new Array();
      content.find("ul .combox.checked").each(function () {
         items.push({
            id: $(this).parent().parent().attr('_id'),
            name: $(this).parent().siblings('.info_title').text()
         });
      });
      var info_del = function(items){
         content.find('.bt_del').click(function (){
            alert(" 删除操作");
         })
      }
      info_del (items);
});

展示效果

封装——示例

fun_pager(_url, { type: "list", object_type: type, date: date, key: key, task_user: $('.serach_user').attr('_id') }, set_row, {
  del_param: { url: _url },
   info_del: function (item) { alert("删除函数")};
});

展示效果

button_active()

选择事件

示例

var pager = new Pager({type: "list",
  apidoc_type: $('.txt_type').attr('_id'),
  key: text == _default ? "" : text},
  { obj: $('.pageDiv'),
  url: '/handler/sys/ApiDoc.ashx',
  size:10,
  total:10,
  index:1,
  }, function (json){
    var html = '';
    $.each(json.list, function (i, item) {
      html += set_row(item, i);
    });
    var content = $('.con .content');
    content.find('ul').remove();
    content.find('ol').after(html);
    function button_active() { alert("选中事件") };
    function button_default() { alert("取消选中事件") };
    fun_checkbox(content.find('ul li .combox'), function () {
      if (content.find('ul li .combox').length == content.find('ul li .combox.checked').length) {
        content.find('ol li .combox').addClass('checked');
      }
      button_active();
    }, function () {
      content.find('ol li .combox').removeClass('checked');
      if (content.find('ul li .combox.checked').length == 0) {
        button_default();
      }
  });
});

展示效果

封装——示例

fun_pager(_url, { type: "list", object_type: type, date: date, key: key, task_user: $('.serach_user').attr('_id') }, set_row, {
   del_param: { url: _url },
  button_active: function (item) { alert("复选框选择事件")};
});

展示效果

button_default()

取消选择事件

示例

var pager = new Pager({type: "list",
  apidoc_type: $('.txt_type').attr('_id'),
  key: text == _default ? "" : text},
  { obj: $('.pageDiv'),
  url: '/handler/sys/ApiDoc.ashx',
  size:10,
  total:10,
  index:1,
  }, function (json){
    var html = '';
    $.each(json.list, function (i, item) {
      html += set_row(item, i);
    });
    var content = $('.con .content');
    content.find('ul').remove();
    content.find('ol').after(html);
    function button_active() { alert("选中事件") };
    function button_default() { alert("取消选中事件") };
    fun_checkbox(content.find('ul li .combox'), function () {
      if (content.find('ul li .combox').length == content.find('ul li .combox.checked').length) {
        content.find('ol li .combox').addClass('checked');
      }
      button_active();
    }, function () {
      content.find('ol li .combox').removeClass('checked');
      if (content.find('ul li .combox.checked').length == 0) {
        button_default();
      }
  });
});

展示效果

封装——示例

fun_pager(_url, { type: "list", object_type: type, date: date, key: key, task_user: $('.serach_user').attr('_id') }, set_row, {
  del_param: { url: _url },
  button_default: function () { alert("取消选中事件")}
});

展示效果

开始使用| 文档| 演示/教程| 独立组件| 社区 快递查询 Copyright © 2016 - 2017 tiaoceng.com All Rights Reserved