1. 程式人生 > >一個easyui擴充套件控制元件的例子

一個easyui擴充套件控制元件的例子

(function($){
	$.parser.plugins.push("editgrid");
	$.fn.editgrid=function(options,param){
        //如果傳入的options為字串,則呼叫的是元件的方法
		if(typeof options == "string"){
			var method = $.fn.editgrid.methods[options];
			if(method){//判斷方法是否存在
				return method(this,param);//如果方法存在,則呼叫方法
			} else {
                //如果方法不存在,可在此處提示或輸出
            }
		}
        //通過程式碼定義元件
		options = options || {};
		return this.each(function(){//可能存在多個元件,需對每一個元件進行定義
			var opts = $.extend({},$.fn.datagrid.parseOptions(this),options);//獲得父級元件的options並與傳入的配置整合
			$.fn.datagrid.call($(this),$.extend(true,{
                //一下為自定義屬性\事件等
				onDblClickRow:function(index){
					var records = $(this).editgrid('getRows');
					for(var i = 0;i<records.length;i++){
						if(i==index){					
							$(this).editgrid('beginEdit',i);
							var editors = $(this).editgrid('getEditors',index);
							if(editors && editors.length > 0){
								editors[0].target.focus();
							}
						} else {
							$(this).editgrid('endEdit',i);
						}
					}
				},
				onAfterEdit:function(index){
					$(this).editgrid('updateRow',{index:index,row:{}});
				}
			},opts));
		});
	};
	$.fn.editgrid.methods = $.extend({},$.fn.datagrid.methods,{//繼承父級元件的方法,並增加或修改
		//完成編輯
		finishEdit:function(grid){
			var records = grid.editgrid('getRows');
			for(var i = 0;i<records.length;i++){
				grid.editgrid('endEdit',i);
			}
		},
		//新增記錄
		addRecord:function(grid,record){
			var records = grid.editgrid("getRows");
			if(records){
				for(var i = 0;i<records.length;i++){
					grid.editgrid('endEdit',i);
				}
			}
			var index = records.length;
			grid.editgrid('insertRow',{
				index:index,
				row:record||{}
			});
			grid.editgrid('beginEdit',index);
			var editors = grid.editgrid('getEditors',index);
			if(editors && editors.length > 0){
				editors[0].target.focus();
			}
			
		},
		//刪除選定的記錄
		removeSelectedRecords:function(grid){
			while(true){
				var record = grid.editgrid('getSelected');
				if(record == null){
					return;
				}
				grid.editgrid("deleteRow",grid.editgrid('getRowIndex',record));
			}
		}
	});
})(jQuery);