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 })(); 