怎么样用扩展的方式来扩展OperaMasksUI的grid
前面我写了一篇文章来扩展OpreaMasksUI的grid的排序功能和显示详情的功能，不清楚的可以看下我博客的另外一篇文章：http://dingchao-lonton.iteye.com/admin/blogs/1345088，但是我修改的时候污染了原来的代码，我觉得这种方式很不好，所以我就用jquery ui的widget factory提供的继承方式来扩展，这样原来的代码可以保持干净；
?
javasscript代码如下：
?
?
/* * $Id: om-grid.js,v 1.97 2012/01/04 03:28:04 zhoufazhi Exp $ * operamasks-ui omGrid @VERSION * * Copyright 2011, AUTHORS.txt (http://ui.operamasks.org/about) * Dual licensed under the MIT or GPL Version 2 licenses. * http://ui.operamasks.org/license * * http://ui.operamasks.org/docs/ * * Depends: * jquery.ui.widget.js * jquery.ui.core.js * jquery.ui.mouse.js * jquery.ui.resizable.js * om-grid.js */ /** * @name omGridExtend * @author ding chao * @class 表格组件。扩展自om.omGrid，增加了排序和显示详情功能<br/><br/> * <b>示例：</b><br/> * <pre> * <script type="text/javascript" > * $('#grid').omGridExtend({ *//是否显示详情 *showDetail:true, *singleSelect:false, * dataSource : 'griddata.do?method=fast', * colModel : [ {header : 'ID', name : 'id', width : 100, align : 'center'}, * {header : '地区', name : 'city', width : 120, align : 'center'}, * {header : '地址', name : 'address', align : 'center', width : 'autoExpand'} ], *onRowClick:function(index,row){ * *}, *onRowSelect:function(){ * *}, *onRowDeselect:function(){ * *}, *//当详情展开的时候调用的回调 *onDetailExpand:function(rowData,row){ * *}, *//初始化的时候以哪一个字段排序 *sortName:'address', *//排序方式 *sortOrder:'desc', *method:'get', *onRowCheck:function(index){ * *} * }); * </script> * * <table id="mytable"/> * </pre> * */;(function($) { $.widget('om.omGridExtend',$.om.omGrid, { options:/** @lends omGridExtend#*/{/** *是否显示详情 *@default false *@type Boolean *@example *$('.selector').omGrid({showDetail : false}); */showDetail:false,/** *详情展开的时候是否重新加载 *@default true *@type Boolean *@example *$('.selector').omGrid({detailExpandReload : false}); */detailExpandReload:true, /** *详情展开时候的回调函数 *@default function(rowData,detailContainer){} *@type Function *@example *$('.selector').omGrid({onDetailExpand : function(rowData,detailContainer){}}); */onDetailExpand : function(rowData,detailContainer){},/** *初始化的时候以哪个字段作为排序字段 *@default null *@type String *@example *$('.selector').omGrid({sortName : 'address'}); */sortName:null,/** *排序方式 enmu{"desc","asc"} *@default asc *@type String *@example *$('.selector').omGrid({sortName : 'address'}); */sortOrder:'asc' }, //private methods _create:function(){//call super method$.om.omGrid.prototype._create.call(this); this._bindHeadClickEnvent();this._bindDetailEvent(); }, _buildTableHead:function(){ var op=this.options, el=this.element, grid = el.closest('.om-grid'), cms=op.colModel, allColsWidth = 0, //colModel的宽度 indexWidth = 0, //colModel的宽度 checkboxWidth = 0, //colModel的宽度 autoExpandColIndex = -1; thead=$('<thead></thead'); tr=$('<tr></tr>').appendTo(thead);this.detailColSpan = 0;//渲染显示明细列if(op.showDetail){var cell = $('<th></th>').attr({axis:'detailCol',align:'center'}).addClass('unsort detailCol').append($('<div style="text-align:center;width:25px;"></div'));tr.append(cell); indexWidth=25;this.detailColSpan++;} //渲染序号列 if(op.showIndex){ var cell=$('<th></th').attr({axis:'indexCol',align:'center'}).addClass('unsort indexCol').append($('<div style="text-align:center;width:25px;"></div')); tr.append(cell); indexWidth=25;this.detailColSpan++; } //渲染checkbox列 if(!op.singleSelect){ var cell=$('<th></th').attr({axis:'checkboxCol',align:'center'}).addClass('unsort checkboxCol').append($('<div style="text-align:center;width:17px;"><span cellSpacing="0"></table></div>'); el.parent().before(hDiv); $('table',hDiv).append(thead); //修正各列的列宽 if(autoExpandColIndex != -1){ //说明有某列要自动扩充 var tableWidth=grid.width()-20, //usableWidth=tableWidth-allColsWidth-indexWidth-checkboxWidth; usableWidth=tableWidth-thead.width(); toBeExpandedTh=tr.find('th[axis="col'+autoExpandColIndex+'"] div'); if(usableWidth<=0){ toBeExpandedTh.css('width',60); }else{ toBeExpandedTh.css('width',usableWidth); } }else if(op.autoFit){ //var tableWidth=el.width(), // usableWidth=tableWidth-indexWidth-checkboxWidth; var tableWidth=grid.width()-20, usableWidth=tableWidth-thead.width(), percent=1+usableWidth/allColsWidth, toFixedThs=tr.find('th[axis^="col"] div'); for (var i=0,len=cms.length;i<len;i++) { var col=toFixedThs.eq(i); col.css('width',parseInt(col.width()*percent)); } } this.thead=thead; thead = null; },_bindHeadClickEnvent:function(){var self = this,op = this.options;this.thead.delegate('th:not(.unsort)','click',function(event){var abbr = $(this).attr('abbr');op.sortName = abbr;$('th>div',self.thead).removeClass('sasc').removeClass('sdesc');op.sortOrder === 'asc' ? (op.sortOrder = 'desc',$('>div',this).addClass('sdesc')):(op.sortOrder = 'asc',$('>div',this).addClass('sasc'));self._populate();}); },_renderDatas:function(from,to){ var self=this, el=this.element, op=this.options, grid=el.closest('.om-grid'), gridHeaderCols=$('.hDiv thead tr:first th',grid), rows=this.pageData.data.rows, colModel=op.colModel, rowClasses=op.rowClasses, tbody=$('tbody',el).empty(), isRowClassesFn= (typeof rowClasses === 'function'), pageData = this.pageData,start=(pageData.nowPage-1)*op.limit; $.each(rows,function(i, rowData) { var rowCls = isRowClassesFn? rowClasses(i,rowData):rowClasses[i % rowClasses.length]; var tr=$('<tr></tr>').addClass('om-grid-row').addClass(rowCls).attr('rowindex',i); var rowValues=self._buildRowCellValues(colModel,rowData,i); $(gridHeaderCols).each(function(){ var axis = $(this).attr('axis'),wrap=false,html;if(axis == 'detailCol'){ html = '<span name="code"><!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>基本功能</title> <script type="text/javascript" src="../../jquery.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.resizable.js"></script> <script type="text/javascript" src="../../ui/om-grid.js"></script><script type="text/javascript" src="../../ui/om-grid-extend.js"></script> <link rel="stylesheet" type="text/css" href="../../themes/default/om-all.css" /> <link rel="stylesheet" type="text/css" href="../common/css/demo.css" /> <!-- view_source_begin --> <script type="text/javascript"> $(document).ready(function() { $('#grid').omGridExtend({//是否显示详情showDetail:true,singleSelect:false, dataSource : 'griddata.do?method=fast', colModel : [ {header : 'ID', name : 'id', width : 100, align : 'center'}, {header : '地区', name : 'city', width : 120, align : 'center'}, {header : '地址', name : 'address', align : 'center', width : 'autoExpand'} ],onRowClick:function(index,row){},onRowSelect:function(){},onRowDeselect:function(){},//当详情展开的时候调用的回调onDetailExpand:function(rowData,row){},//初始化的时候以哪一个字段排序sortName:'address',//排序方式sortOrder:'desc',method:'get',onRowCheck:function(index){} }); }); </script> <!-- view_source_end --></head><body> <!-- view_source_begin --> <table id="grid"></table> <!-- view_source_end --> <input type = "button" id = "get" value ="get" > <div id="view-desc"> 设置dataSource和colModel属性，在table元素中渲染表格。 </div></body></html> 1 楼 mfkvfn 2012-02-02 这样做比较好。其实排序功能是比较常见的，之所以我们没把排序做到omGrid中去，是因为我们设计时这个omGrid是一个基础组件，将作为其它grid组件的基类。而有些grid是不可以排序的，比如treeGrid（演示例见http://demo.operamasks.org/bpdemos/index.faces?userdata=treeGrid）、分组统计表格（演示示例见http://demo.operamasks.org/bpdemos/index.faces?userdata=groupSummaryGrid）、统计表格（演示示例见http://demo.operamasks.org/bpdemos/index.faces?userdata=pivotGrid）。所以如果基类有这些功能的话，子类把它去掉不好。