1 (function(){
 2     $.parser.plugins.push("yearbox");//注册扩展组件
 3     $.fn.yearbox = function (options, param) {//定义扩展组件
 4         //当options为字符串时,说明执行的是该插件的方法。
 5         if (typeof options == "string") {
 6             return $.fn.combogrid.apply(this, arguments);
 7         }
 8         options = options || {};
 9         var currentYear = new Date().getFullYear();
10 
11         //当该组件在一个页面出现多次时,this是一个集合,故需要通过each遍历。
12         return this.each(function () {
13             var jq = $(this);
14 
15             //$.fn.combogrid.parseOptions(this)作用是获取页面中的data-options中的配置
16             var opts = $.extend({
17                 minYear: 1900, // 最小年份
18                 maxYear: 2099, // 最大年份
19                 initYear: currentYear, // 初始年
20                 initCount: 10, // 初始年个数
21                 value: currentYear// 默认选中的年份
22             }, $.fn.combogrid.parseOptions(this), options);
23 
24             var data = [];
25             for (var i = opts.initYear; i <= (opts.initYear + opts.initCount); i++) {
26                 data.push({id: i});
27             }
28 
29             //把配置对象myopts放到$.fn.combobox这个函数中执行。
30             var myopts = $.extend(true, {
31                    height: 26,
32                    width: 150,
33                 data: data,
34                 showHeader: false,
35                 fitColumns:true,
36                 border: false,
37                 idField: 'id',
38                 columns: [[
39                     {field: 'id', width: 150}
40                 ]]
41             }, opts);
42             $.fn.combogrid.call(jq, myopts);
43             var grid = $.fn.combogrid.call(jq, 'grid');
44             var gridPanel = $.fn.datagrid.call(grid, 'getPanel');
45            $(gridPanel).find('td').css('border', 'none');
46           $(gridPanel).find('.datagrid-body').on('scroll', function (e) {
47                if (!e.isTrigger && this.scrollTop === 0) { // 触顶加载
48                  var currentMinYear = data[0].id;
49                 if (currentMinYear - 1 >= opts.minYear) {
50                       $.fn.datagrid.call(grid, 'insertRow', {
51                             index: 0,    // 索引从0开始
52                          row: {id: currentMinYear - 1}
53                       });
54                      var h = $(gridPanel).find('td').last().height();
55                        $(this).scrollTop(h);
56                   }
57                 } else if (this.scrollTop + this.clientHeight === this.scrollHeight) { // 触底加载
58                     var currentMaxYear = data[data.length - 1].id;
59                   if (currentMaxYear + 1 <= opts.maxYear) {
60                        $.fn.datagrid.call(grid, 'appendRow', {
61                            id: currentMaxYear + 1
62                        });
63                     }
64                }
65                 $(gridPanel).find('td').css('border', 'none');
66             });
67         });
68     };
69 })();

更多相关文章

  1. 认识DHTML中的“行为”组件
  2. 利用js、jQuery和css实现环形进度条组件封装
  3. tomahawk JSF组件扩展组件(一)
  4. 采用HTML5的开源组件绘制复杂图形
  5. 通过html5 touch事件封装手势识别组件
  6. qmlcanvas,类Html5 canvas的组件
  7. 替换wordpress WP_POSTS表中post_date字段的年份(4位数)
  8. react系列(一)JSX语法、组件概念、生命周期介绍
  9. 如何从Vue.js中的变量名加载组件?

随机推荐

  1. 《疯狂Android讲义》学习笔记二
  2. 基于 Android NDK 的学习之旅-----目录
  3. Android 为联系人添加图片
  4. 最牛逼android上的图表库MpChart(二) 折线
  5. Android之ShortCut[Broadcast方式]
  6. Android基本组件TextView和EditView
  7. 【Android的从零单排开发日记】之入门篇(
  8. Android中文翻译组 - 简介
  9. Android(安卓)Studio中AspectJ的简单使用
  10. Android(安卓)Design Support Library(2)-