ifm/WebRoot/js/jquery/grid/grid.js

(function($){
	$.addFlex = function(t,p) {
		if (t.grid) return false;
		
		p = $.extend({
			height: 200, //default height
			width: 'auto', //auto width
			striped: true, //apply odd even stripes
			novstripe: false,
			showTip:false,
			minwidth: 30, //min width of columns
			minheight: 80, //min height of columns
			fontsize : 12,
			resizable: true, //resizable table
			cloumnchange: true,	//列宽度是否可拉伸
			singleSelect: true,
			url: false, //ajax url
			method: 'POST', // data sending method
			dataType: 'json', // type of data loaded
			errormsg: '连接错误',
			usepager: false, //
			usepagerNoCount:false,//分页不统计总记录
			hidehead: true, //隐藏显示头
			nowrap: false, //固定table
			page: 1, //current page
			total: 1, //total pages
			useRp: true, //use the results per page select box
			rp: 15, // results per page
			rpOptions: [10,15,20,25,40],
			title: false,
			pagestat: '显示 {from}到{to},总共{total} 条记录',
			procmsg: '处理中，请稍候...',
			query: '',
			qtype: '',
			nomsg: '当前暂无相关信息！',
			showCount:true,
			showInputPage:true,
			minColToggle: 1, //minimum allowed column to be hidden
			showToggleBtn: true, //show or hide column toggle popup
			hideOnSubmit: true,
			autoload: true,
			showSelectRp:true,
			blockOpacity: 0.5,
			onToggleCol: false,
			onChangeSort: false,
			addEmpty: false,	//补足空格
			onSuccess: false,
			onSubmit: false // using a custom populate function
		}, p);
		
		$(t)
		.show() //show if hidden
		.attr({cellPadding: 0, cellSpacing: 0, border: 0})  //remove padding and spacing
		.removeAttr('width'); //remove width properties	
		
		//create grid class
		var g = {
			hset : {},
			rePosDrag: function () {
				var cdleft = 0 - this.hDiv.scrollLeft;
				if (this.hDiv.scrollLeft > 0) {
					cdleft -= Math.floor(p.cgwidth / 2);
				}
				$(g.cDrag).css({top: g.hDiv.offsetTop + 1});
				var cdpad = this.cdpad;
				
				$('div',g.cDrag).hide();
				
				$('thead tr:first th:visible', this.hDiv).each(function() {
						var n = $('thead tr:first th:visible',g.hDiv).index(this);
						var cdpos = parseInt($('div',this).width());
						var ppos = cdpos;
						if (cdleft == 0) {
							cdleft -= Math.floor(p.cgwidth / 2);
						}
						
						cdpos = cdpos + cdleft + cdpad;
						
						$('div:eq(' + n + ')',g.cDrag).css({'left': cdpos + 'px'}).show();
						
						cdleft = cdpos;
					});
			},
			fixHeight: function (newH) {
					newH = false;
					if (!newH) newH = $(g.bDiv).height();
					var hdHeight = $(this.hDiv).height();
					$('div',this.cDrag).each(function () {
							$(this).height(newH+hdHeight);
						});
					
					var nd = parseInt($(g.nDiv).height());
					
					if (nd > newH) {
						$(g.nDiv).height(newH).width(200);
					} else {
						$(g.nDiv).height('auto').width('auto');
					}
					
					$(g.block).css({height: newH, marginBottom: (newH * -1)});
					
					var hrH = g.bDiv.offsetTop + newH;
					if (p.height != 'auto' && p.resizable) {
						hrH = g.vDiv.offsetTop;
					}
					$(g.rDiv).css({height: hrH});
			},
			dragStart: function (dragtype, e, obj) {
				if (dragtype == 'colresize') {
					$(g.nDiv).hide();
					$(g.nBtn).hide();
					var n = $('div',this.cDrag).index(obj);
					var ow = $('th:visible div:eq(' + n + ')', this.hDiv).width();
					$(obj).addClass('dragging').siblings().hide();
					$(obj).prev().addClass('dragging').show();
					
					this.colresize = {startX: e.pageX, ol: parseInt(obj.style.left), ow: ow, n: n };
					$('body').css('cursor', 'col-resize');
				} else if (dragtype == 'vresize') {
					var hgo = false;
					$('body').css('cursor', 'row-resize');
					if (obj) {
						hgo = true;
						$('body').css('cursor', 'col-resize');
					}
					this.vresize = {h: p.height, sy: e.pageY, w: p.width, sx: e.pageX, hgo: hgo};
				} else if (dragtype == 'colMove') {
					$(g.nDiv).hide();$(g.nBtn).hide();
					this.hset = $(this.hDiv).offset();
					this.hset.right = this.hset.left + $('table',this.hDiv).width();
					this.hset.bottom = this.hset.top + $('table',this.hDiv).height();
					this.dcol = obj;
					this.dcoln = $('th',this.hDiv).index(obj);
					
					this.colCopy = document.createElement("div");
					this.colCopy.className = "colCopy";
					this.colCopy.innerHTML = obj.innerHTML;
					if ($.browser.msie) {
						this.colCopy.className = "colCopy ie";
					}
					
					$(this.colCopy).css({
						position: 'absolute',
						'float': 'left',
						display: 'none',
						textAlign: obj.align
					});
					$('body').append(this.colCopy);
					$(this.cDrag).hide();
				}
				
				$('body').noSelect();
			},
			dragMove: function (e) {
				if (this.colresize) {
					var n = this.colresize.n;
					var diff = e.pageX - this.colresize.startX;
					var nleft = this.colresize.ol + diff;
					var nw = this.colresize.ow + diff;
					if (nw > p.minwidth) {
						$('div:eq('+n+')',this.cDrag).css('left', nleft);
						this.colresize.nw = nw;
					}
				} else if (this.vresize) {
					var v = this.vresize;
					var y = e.pageY;
					var diff = y - v.sy;
					
					if (!p.defwidth) {
						p.defwidth = p.width;
					}
					
					if (p.width != 'auto' && !p.nohresize && v.hgo) {
						var x = e.pageX;
						var xdiff = x - v.sx;
						var newW = v.w + xdiff;
						if (newW > p.defwidth) {
							this.gDiv.style.width = newW + 'px';
							p.width = newW;
						}
					}
					
					var newH = v.h + diff;
					if ((newH > p.minheight || p.height < p.minheight) && !v.hgo) {
						this.bDiv.style.height = newH + 'px';
						p.height = newH;
						this.fixHeight(newH);
					}
					v = null;
				} else if (this.colCopy) {
					$(this.dcol).addClass('thMove').removeClass('thOver');
					if (e.pageX > this.hset.right || e.pageX < this.hset.left || e.pageY > this.hset.bottom || e.pageY < this.hset.top) {
						//this.dragEnd();
						$('body').css('cursor', 'move');
					} else {
						$('body').css('cursor', 'pointer');
					}
					$(this.colCopy).css({top: e.pageY + 10, left: e.pageX + 20, display: 'block'});
				}
			},
			dragEnd: function () {
				if (this.colresize) {
					var n = this.colresize.n;
					var nw = this.colresize.nw;
					
					$('th:visible div:eq(' + n + ')', this.hDiv).css('width', nw);
					$('tr',this.bDiv).each(function() {
							$('td:visible div:eq(' + n + ')', this).css('width', nw);
						});
					this.hDiv.scrollLeft = this.bDiv.scrollLeft;
					
					$('div:eq(' + n + ')',this.cDrag).siblings().show();
					$('.dragging',this.cDrag).removeClass('dragging');
					this.rePosDrag();
					this.fixHeight();
					this.colresize = false;
				} else if (this.vresize) {
					this.vresize = false;
				} else if (this.colCopy) {
					$(this.colCopy).remove();
					if (this.dcolt != null) {
						if (this.dcoln > this.dcolt) {
							$('th:eq(' + this.dcolt + ')', this.hDiv).before(this.dcol);
						} else {
							$('th:eq(' + this.dcolt + ')', this.hDiv).after(this.dcol);
						}
						
						this.switchCol(this.dcoln, this.dcolt);
						$(this.cdropleft).remove();
						$(this.cdropright).remove();
						this.rePosDrag();
					}
					
					this.dcol = null;
					this.hset = null;
					this.dcoln = null;
					this.dcolt = null;
					this.colCopy = null;
					
					$('.thMove',this.hDiv).removeClass('thMove');
					$(this.cDrag).show();
				}
				$('body').css('cursor', 'default');
				$('body').noSelect(false);
			},
			toggleCol: function(cid,visible) {
				var ncol = $("th[axis='col" + cid + "']", this.hDiv)[0];
				var n = $('thead th', g.hDiv).index(ncol);
				var cb = $('input[value=' + cid + ']', g.nDiv)[0];
				
				if (visible == null) {
					visible = ncol.hide;
				}
				
				if ($('input:checked', g.nDiv).length < p.minColToggle && !visible) return false;
				
				if (visible) {
					ncol.hide = false;
					$(ncol).show();
					cb.checked = true;
				} else {
					ncol.hide = true;
					$(ncol).hide();
					cb.checked = false;
				}
					
				$('tbody tr',t).each(function(){
						if (visible)
							$('td:eq(' + n + ')', this).show();
						else
							$('td:eq(' + n + ')', this).hide();
					});
				
				this.rePosDrag();
				
				if (p.onToggleCol) p.onToggleCol(cid, visible);
				
				return visible;
			},
			switchCol: function(cdrag, cdrop) {
				$('tbody tr', t).each(function() {
						if (cdrag > cdrop)
							$('td:eq(' + cdrop + ')', this).before($('td:eq(' + cdrag + ')', this));
						else
							$('td:eq(' + cdrop + ')', this).after($('td:eq(' + cdrag + ')', this));
					});
					
					if (cdrag > cdrop)
						$('tr:eq(' + cdrop + ')', this.nDiv).before($('tr:eq(' + cdrag + ')', this.nDiv));
					else
						$('tr:eq(' + cdrop + ')', this.nDiv).after($('tr:eq(' + cdrag + ')', this.nDiv));
						
					if ($.browser.msie && $.browser.version < 7.0) $('tr:eq(' + cdrop + ') input', this.nDiv)[0].checked = true;
					
					this.hDiv.scrollLeft = this.bDiv.scrollLeft;
			},
			scroll: function() {
					this.hDiv.scrollLeft = this.bDiv.scrollLeft;
					this.rePosDrag();
			},
			addData: function (data) {
				if (p.preProcess) {
					data = p.preProcess(data);
				}
				var len = data.rows.length;
				var callbackrow = data.rows;
				this.rows = data.rows;
				if (p.usepager) {
					$('.pReload', this.pDiv).removeClass('loading');
				}
				this.loading = false;
				
				if (!data) {
					$('.pPageStat', this.pDiv).html(p.errormsg);
					return false;
				}
				
				var tbody = document.createElement('tbody');
				
				if (p.dataType == 'xml')
					p.total = +$('rows total',data).text();
				else
					p.total = data.total;	
				if (p.total == 0) {
					if (p.gridNoCount) {
						p.gridNoCount();//无记录回调函数
					}
					$('tr, a, td, div', t).unbind();
					$(t).empty();
					p.pages = 1;
					p.page = 1;
					this.buildpager();
					$('.pPageStat',this.pDiv).html(p.nomsg);
					
					var gtitle = $(":first", g.mDiv).html();
					if (gtitle.indexOf(p.nomsg) > -1) {
						$('#gridnomsg').empty().remove();
					}
					
					if (p.title == $(":first", g.mDiv).html()) {
						$(":first",g.mDiv).html(p.title + '<span id="gridnomsg" style="color:red">-->' + p.nomsg + '</span>');
					} else {
						$(":first",g.mDiv).html($(":first",g.mDiv).html() + '<span id="gridnomsg" style="color:red">-->' + p.nomsg + '</span>');
					}
					return false;
				}
				if (p.total > 0) {
					$('#gridnomsg').empty().remove();
					$(":first",g.mDiv).html($(":first",g.mDiv).html());
				}
				
				if (!p.usepagerNoCount) {
					p.pages = Math.ceil(p.total / p.rp);
					if (p.dataType == 'xml') {
						p.page = +$('rows page', data).text();
					} else {
						p.page = data.page;
					}
				} else {
					p.page = data.page;
				}
				
				this.buildpager();
				//遍历JSON数据集合
				if (p.dataType == 'json') {
					$.each(data.rows, function(i, row){
						var tr = document.createElement('tr'); //创建行
						tr.hh = i; //添加各行变色效果
						if (i % 2 && p.striped) {
							tr.className = 'erow';
						}
						
						//添加行ID
						if (row.id) {
							tr.id = 'row' + row.id;
						}
						
						//add cell 遍历JSON单个对象row, 依次添加到列中
						$('thead tr:first th', g.hDiv).each(function(){
							var td = document.createElement('td');   //创建行
							var idx = $(this).attr('axis').substr(3); //对单元格在概念上分类
							var colAlign = $(this).attr('colAlign');
							td.align = "" + colAlign;
							var colMapping = $(this).attr('mapping');
							var alt = $(this).attr("alt"); //确定需要显示提示的属性
							var value = eval("row." + colMapping);
							if (typeof(value) == 'undefined') {
								value = "";
							}
							td.innerHTML = value;//row.cell[idx];
							if (typeof(alt) != 'undefined')
								$(td).attr("alt", alt);
							$(tr).append(td);
							td = null;
						});
						
						if ($('thead', this.gDiv).length < 1) {
							//handle if grid has no headers
							for (idx = 0; idx < cell.length; idx++) {
								var td = document.createElement('td');
								td.innerHTML = row.cell[idx];
								$(tr).append(td);
								td = null;
							}
						}
						
						$(tbody).append(tr);
						tr = null;
					});
					
					if (p.addEmpty) { //判断是否需要补足空格
						if (p.rp > data.rows.length) { //添加补足空格
							for (var i = data.rows.length; i < p.rp; i++) {
								var trs = document.createElement('tr');
								trs.hh = i;
								if (i % 2 && p.striped) 
									trs.className = 'erow';
								//if (row.id) tr.id = 'row' + row.id;
								
								$('thead tr:first th', g.hDiv).each(function(){
									var td = document.createElement('td');
									$(trs).append(td);
									td = null;
								});
								
								$(tbody).append(trs);
								trs = null;
							}
						}
					}
				} else if (p.dataType == 'xml') {
					i = 1;
					
					$("rows row", data).each(function(){
						i++;
						
						var tr = document.createElement('tr');
						if (i % 2 && p.striped) 
							tr.className = 'erow';
						
						var nid = $(this).attr('id');
						if (nid) 
							tr.id = 'row' + nid;
						
						nid = null;
						
						var robj = this;
						
						$('thead tr:first th', g.hDiv).each(function(){
							var td = document.createElement('td');
							var idx = $(this).attr('axis').substr(3);
							td.align = this.align;
							td.innerHTML = $("cell:eq(" + idx + ")", robj).text();
							$(tr).append(td);
							td = null;
						});
						
						if ($('thead', this.gDiv).length < 1) {
							//handle if grid has no headers
							$('cell', this).each(function(){
								var td = document.createElement('td');
								td.innerHTML = $(this).text();
								$(tr).append(td);
								td = null;
							});
						}
						
						$(tbody).append(tr);
						tr = null;
						robj = null;
					});
				}
				
				$('tr',t).unbind();

				$(t).empty();
				$(t).append(tbody);
				
				this.addCellProp();
				this.addRowProp();
				
				//this.fixHeight($(this.bDiv).height());
				
				this.rePosDrag();
				
				tbody = null; data = null; i = null;
				
				if (p.onSuccess) p.onSuccess();
				if (typeof p.gridCallBack == 'function') p.gridCallBack(len, callbackrow, p, g, t);
				
				if (p.hideOnSubmit) $(g.block).remove();//$(t).show();
				
				this.hDiv.scrollLeft = this.bDiv.scrollLeft;
				if ($.browser.opera) $(t).css('visibility', 'visible');
			},
			changeSort: function(th) { //change sortorder
				if (this.loading) return true;
				
				$(g.nDiv).hide();$(g.nBtn).hide();
				
				if (p.sortname = $(th).attr('abbr')) {
					if (p.sortorder == 'asc') p.sortorder = 'desc';
					else p.sortorder = 'asc';						
				}
				
				$(th).addClass('sorted').siblings().removeClass('sorted');
				$('.sdesc',this.hDiv).removeClass('sdesc');
				$('.sasc',this.hDiv).removeClass('sasc');
				$('div',th).addClass('s' + p.sortorder);
				p.sortname = $(th).attr('abbr');
				
				if (p.onChangeSort)
					p.onChangeSort(p.sortname, p.sortorder);
				else
					this.populate();
			},
			buildpager: function(){ //rebuild pager based on new properties
				if (!p.usepager) {
					return;
				}
				
				if (!p.usepagerNoCount) {
					$('.pcontrol input', this.pDiv).val(p.page);
					$('.pcontrol span:first', this.pDiv).val(p.page);
					$('.pcontrol span:last', this.pDiv).html(p.pages);
					$('.pcontrol span:first', this.pDiv).html(p.page);
				} else {
					if (p.total <= p.rp) {
						$('.pNext', g.pDiv).removeClass('pNext pButton').addClass('pNoNext pButton');
					} else {
						if ($('.pNext', g.pDiv).size() == 0) {
							$('.pNoNext', g.pDiv).removeClass('pNoNext pButton').addClass('pNext pButton');
						}
					}
					$('.pcontrol span:first', this.pDiv).html(p.page);
				}
				
				var r1 = (p.page-1) * p.rp + 1;
				var r2 = r1 + p.rp - 1;
				
				if (p.total < r2) r2 = p.total;
				
				var stat = p.pagestat;
				
				stat = stat.replace(/{from}/, r1);
				stat = stat.replace(/{to}/, r2);
				stat = stat.replace(/{total}/, p.total);
				
				$("#totalView span", this.pDiv).html(p.total + '<input type="hidden" id="totaldata" value=' + p.total + '>');
				$('.pPageStat', this.pDiv).html(stat);
			},
			setTitle:function(title){
				$(":first", g.mDiv).html(title);
				p.title = title;
			},
			populate: function () {
				if (this.loading) return true;
				if (p.onSubmit) {
					var gh = p.onSubmit();
					if (!gh) return false;
				}
				
				this.loading = true;
				if (!p.url) return false;
				$('.pPageStat',this.pDiv).html(p.procmsg);
				if(p.usepager){
				$('.pReload',this.pDiv).addClass('loading');
				}
				$(g.block).css({top:g.bDiv.offsetTop});
				
				if (p.hideOnSubmit) $(this.gDiv).prepend(g.block); //$(t).hide();
				
				if ($.browser.opera) $(t).css('visibility','hidden');
				if (!p.newp) p.newp = 1;
				if (p.page>p.pages) p.page = p.pages;
				//var param = {page:p.newp, rp: p.rp, sortname: p.sortname, sortorder: p.sortorder, query: p.query, qtype: p.qtype};
				var param = [
					{ name: 'page', value: p.newp },
					{ name: 'rp', value: p.rp },
					{ name: 'sortname', value: p.sortname },
					{ name: 'sortorder', value: p.sortorder },
					{ name: 'query', value: p.query },
					{ name: 'qtype', value: p.qtype }
				];
				if (p.params) {
					for (var pi = 0; pi < p.params.length; pi++) {
						param[param.length] = p.params[pi];
					}
				}
				
				$.ajax({
						type: p.method,
						url: p.url,
						data: param,
						dataType: p.dataType,
						success: function(data){g.addData(data);},
						error: function(data,status) {
							huimv.showError(data.responseText);
						}
					});
			},
			doSearch: function () {
				p.query = $('input[name=q]',g.sDiv).val();
				p.qtype = $('select[name=qtype]',g.sDiv).val();
				p.newp = 1;
				
				this.populate();
			},
			changePage: function (ctype){ //change page
				if (this.loading) return true;
				
				switch (ctype) {
					case 'first':
						p.newp = 1;
						break;
					case 'prev':
						if (p.page>1) p.newp = parseInt(p.page) - 1;
						break;
					case 'next': 
						if (!p.usepagerNoCount) {
							if (p.page < p.pages)
								p.newp = parseInt(p.page) + 1;
							else
								p.newp = parseInt(p.page); 
						} else {
							if (p.total > p.rp) {
								p.newp = parseInt(p.page) + 1;
							}
						}
						break;
					case 'last':
						p.newp = p.pages;
						break;
					case 'input':
						var nv = parseInt($('.pcontrol input', this.pDiv).val());
						if (isNaN(nv)) nv = 1;
						if (nv < 1) nv = 1;
						else if (nv > p.pages) nv = p.pages;
						$('.pcontrol input', this.pDiv).val(nv);
						p.newp = nv;
						break;
				}
				
				if (p.newp == p.page) {
					return false;
				}
				
				if (p.params) {
					for (var pi = 0; pi < p.params.length; pi++) {
						if (p.params[pi].name == 'isReturn') {
							p.params[pi].value = '';
							break;
						}
					}
				}
				
				if (p.onChangePage)
					p.onChangePage(p.newp);
				else
					this.populate();
			},
			addCellProp: function(){
				var rowIndex = 0;
				var rowPostion = 0;
				$('tbody tr td', g.bDiv).each(function(i){
					var tdDiv = document.createElement('div');
					var n = $('td', $(this).parent()).index(this);
					var pth = $('th:eq(' + n + ')', g.hDiv).get(0);
					
					if (pth != null) {
						if (p.sortname == $(pth).attr('abbr') && p.sortname) {
							this.className = 'sorted';
						}
						$(tdDiv).css({
							textAlign: $(pth).attr('colAlign'),
							width: $('div:first', pth)[0].style.width,
							fontSize: p.fontsize
						});
						
						var alt = $(this).attr("alt");
						if (typeof(alt) != 'undefined') 
							$(tdDiv).attr("title", this.innerHTML);
						
						if (pth.hide) 
							$(this).css('display', 'none');
					}
					
					$(tdDiv).css('line-height', '19px');
					
					if (p.nowrap == false)
						$(tdDiv).css('white-space', 'normal');
					
					if (this.innerHTML == '')
						this.innerHTML = '&nbsp;';
					
					//tdDiv.value = this.innerHTML; //store preprocess value
					tdDiv.innerHTML = this.innerHTML;
					var prnt = $(this).parent()[0];
					var pid = false;
					if (prnt.id) 
						pid = prnt.id.substr(3);
					
					var hh = $(this).parent().attr("hh");
					// if(i>((rowIndex+1)*p.colModel.length))
					// 	 rowIndex++ ;
					
					// if(i>=((rowIndex+1)*p.colModel.length))
					// 	 rowPostion++ ;
					if (pth != null) {
						if (pth.process) {
							if (hh < g.rows.length) {
								pth.process(tdDiv, g.rows[hh], hh, pid, p.params, p.newp, p.total, p.title, p.type, p.jgbh);
							} else {
								//pth.process(tdDiv, '', hh, pid, p.params, p.newp, p.total, p.title);
							}
						};
					}
					
					$(this).empty().append(tdDiv).removeAttr('width'); //wrap content
					//add editable event here 'dblclick'
				});
			},
			getCellDim: function (obj) {
				// get cell prop for editable event
				var ht = parseInt($(obj).height());
				var pht = parseInt($(obj).parent().height());
				var wt = parseInt(obj.style.width);
				var pwt = parseInt($(obj).parent().width());
				var top = obj.offsetParent.offsetTop;
				var left = obj.offsetParent.offsetLeft;
				var pdl = parseInt($(obj).css('paddingLeft'));
				var pdt = parseInt($(obj).css('paddingTop'));
				return {ht: ht, wt: wt, top: top, left: left, pdl: pdl, pdt: pdt, pht: pht, pwt: pwt};
			},
			addRowProp: function() {
				$('tbody tr',g.bDiv).each(function () {
					$(this).click(function (e) { 
						var obj = (e.target || e.srcElement);
						if (obj.href || obj.type) return true;
						$(this).toggleClass('trSelected');
						if (p.singleSelect) {
							$(this).siblings().removeClass('trSelected');
						}
					}).mousedown(function (e) {
						if (e.shiftKey) {
							$(this).toggleClass('trSelected');
							g.multisel = true;
							this.focus();
							$(g.gDiv).noSelect();
						}
					}).mouseup(function () {
						if (g.multisel) {
							g.multisel = false;
							$(g.gDiv).noSelect(false);
						}
					}).hover(
						function (e) {
							if (g.multisel) {
								$(this).toggleClass('trSelected');
							}
						},
						function () {}
					).dblclick(function () {
						if (typeof p.dblClicks == 'function') p.dblClicks(g.rows[$(this).attr("hh")]);
					});
					
					if ($.browser.msie && $.browser.version < 7.0) {
						/**
						$(this).hover(
							function () { $(this).addClass('trOver'); },
							function () { $(this).removeClass('trOver'); }
						);
						**/
					}
				});
			},
			pager: 0
		};

		if (p.colModel) {
			var thead = document.createElement('thead'); //创建列表标题
			var tr = document.createElement('tr'); //行
			
			//遍历数据模型
			for (var i = 0; i < p.colModel.length; i++) {
				var cm = p.colModel[i];
				
				//创建列
				var th = document.createElement('th');
				th.innerHTML = cm.display;//列标题名称
				
				//添加JSON对象映射属性名
				if (cm.name)
					$(th).attr('mapping', cm.name);
				if (cm.name && cm.sortable)
					$(th).attr('abbr', cm.name);
				
				//th.idx = i;
				$(th).attr('axis', 'col' + i);
				
				//居中设置
				if (cm.align) {
					$(th).attr('colAlign', cm.align);
					th.align = 'center';
				}
				
				if (cm.titleAlign) {
					th.align = cm.titleAlign;
				} else {
					th.align = 'center';
				}
				
				//列宽设置
				if (cm.width) 
					$(th).attr('width', cm.width);
				
				//注释说明，用来给图片提示用的
				if (cm.alt) {
					$(th).attr('alt', cm.name);
				}
				
				//列的隐藏显示
				if (cm.hide) {
					th.hide = true;
				}
				
				//添加过程处理
				if (cm.process) {
					th.process = cm.process;
				}
				
				$(tr).append(th);
			}
			$(thead).append(tr);
			$(t).prepend(thead);
		}

		//init divs
		g.gDiv = document.createElement('div'); //创建全局容器
		g.mDiv = document.createElement('div'); //创建标题容器
		g.hDiv = document.createElement('div'); //create header container
		g.bDiv = document.createElement('div'); //create body container
		g.vDiv = document.createElement('div'); //create grip
		g.rDiv = document.createElement('div'); //create horizontal resizer
		g.cDrag = document.createElement('div'); //create column drag
		g.block = document.createElement('div'); //creat blocker
		g.nDiv = document.createElement('div'); //create column show/hide popup
		g.nBtn = document.createElement('div'); //create column show/hide button
		g.iDiv = document.createElement('div'); //create editable layer
		g.tDiv = document.createElement('div'); //create toolbar
		g.sDiv = document.createElement('div');
		
		if (p.usepager) g.pDiv = document.createElement('div'); //create pager container
		g.hTable = document.createElement('table');
		
		//set gDiv
		g.gDiv.className = 'flexigrid';
		g.gDiv.id = 'test1';
		if (p.width!='auto') g.gDiv.style.width = p.width + 'px';
		
		//add conditional classes
		if ($.browser.msie)
			$(g.gDiv).addClass('ie');
		
		if (p.novstripe)
			$(g.gDiv).addClass('novstripe');

		$(t).before(g.gDiv);
		$(g.gDiv).append(t);
		
		//set toolbar
		if (p.buttons) {
			g.tDiv.className = 'tDiv';
			var tDiv2 = document.createElement('div');
			tDiv2.className = 'tDiv2';
			
			for (var i = 0; i < p.buttons.length; i++) {
				var btn = p.buttons[i];
				if (!btn.separator) {
					var btnDiv = document.createElement('div');
					btnDiv.className = 'fbutton';
					btnDiv.innerHTML = "<div><span>" + btn.name + "</span></div>";
					if (btn.bclass)
						$('span',btnDiv).addClass(btn.bclass).css({paddingLeft:20});
					btnDiv.onpress = btn.onpress;
					btnDiv.name = btn.name;
					if (btn.onpress) {
						$(btnDiv).click(function(){
							this.onpress(this.name, g.gDiv);
						});
					}
					$(tDiv2).append(btnDiv);
					if ($.browser.msie&&$.browser.version < 7.0) {
						$(btnDiv).hover(function(){$(this).addClass('fbOver');},function(){$(this).removeClass('fbOver');});
					}
				} else {
					$(tDiv2).append("<div class='btnseparator'></div>");
				}
			}
			
			$(g.tDiv).append(tDiv2);
			$(g.tDiv).append("<div style='clear:both'></div>");
			$(g.gDiv).prepend(g.tDiv);
		}
		
		//set hDiv
		g.hDiv.className = 'hDiv';
		
		$(t).before(g.hDiv);
		
		//set hTable
		g.hTable.cellPadding = 0;
		g.hTable.cellSpacing = 0;
		$(g.hDiv).append('<div class="hDivBox"></div>');
		$('div',g.hDiv).append(g.hTable);
		var thead = $("thead:first", t).get(0);
		if (thead) $(g.hTable).append(thead);
		thead = null;
		
//		if (!p.colmodel) var ci = 0;
		var ci = 0;
		
		$('thead tr:first th', g.hDiv).each(function(){
			var thdiv = document.createElement('div');
			
			if ($(this).attr('abbr')) {
				$(this).click(function(e){
					if (!$(this).hasClass('thOver')) return false;
					var obj = (e.target || e.srcElement);
					if (obj.href || obj.type) return true;
					g.changeSort(this);
				});
				
				if ($(this).attr('abbr') == p.sortname) {
					this.className = 'sorted';
					thdiv.className = 's'+p.sortorder;
				}
			}
			
			if (this.hide) $(this).hide();
			
			if (!p.colmodel) {
				$(this).attr('axis', 'col' + ci++);
			}
			
			$(thdiv).css({textAlign: this.align, width: this.width + 'px', fontSize: p.fontsize});
			thdiv.innerHTML = this.innerHTML;
			
			$(this).empty().append(thdiv).removeAttr('width')
			.mousedown(function(e){
				g.dragStart('colMove',e,this);
			})
			.hover(function(){
				if (!g.colresize && !$(this).hasClass('thMove') && !g.colCopy)
					$(this).addClass('thOver');
				
				if ($(this).attr('abbr') != p.sortname && !g.colCopy && !g.colresize && $(this).attr('abbr'))
					$('div',this).addClass('s' + p.sortorder);
				else if ($(this).attr('abbr') == p.sortname && !g.colCopy && !g.colresize && $(this).attr('abbr')) {
					var no = '';
					if (p.sortorder == 'asc') no = 'desc';
					else no = 'asc';
					$('div', this).removeClass('s' + p.sortorder).addClass('s' + no);
				}
				
				if (g.colCopy) {
					var n = $('th', g.hDiv).index(this);
					
					if (n == g.dcoln) return false;
					
					if (n < g.dcoln) $(this).append(g.cdropleft);
					else $(this).append(g.cdropright);
					
					g.dcolt = n;
				} else if (!g.colresize) {
					var nv = $('th:visible', g.hDiv).index(this);
					var onl = parseInt($('div:eq(' + nv + ')', g.cDrag).css('left'));
					var nw = parseInt($(g.nBtn).width()) + parseInt($(g.nBtn).css('borderLeftWidth'));
					nl = onl - nw + Math.floor(p.cgwidth / 2);
					
					$(g.nDiv).hide();$(g.nBtn).hide();
					
					$(g.nBtn).css({'left': nl, top: g.hDiv.offsetTop}).show();
					
					var ndw = parseInt($(g.nDiv).width());
					
					$(g.nDiv).css({top: g.bDiv.offsetTop});
					
					if ((nl+ndw) > $(g.gDiv).width())
						$(g.nDiv).css('left', onl - ndw + 1);
					else
						$(g.nDiv).css('left', nl);
						
					if ($(this).hasClass('sorted'))
						$(g.nBtn).addClass('srtd');
					else
						$(g.nBtn).removeClass('srtd');
				}
			}, function(){
				$(this).removeClass('thOver');
				if ($(this).attr('abbr') != p.sortname) $('div', this).removeClass('s' + p.sortorder);
				else if ($(this).attr('abbr') == p.sortname) {
					var no = '';
					if (p.sortorder == 'asc') no = 'desc';
					else no = 'asc';
					
					$('div', this).addClass('s' + p.sortorder).removeClass('s' + no);
				}
				if (g.colCopy) {
					$(g.cdropleft).remove();
					$(g.cdropright).remove();
					g.dcolt = null;
				}
			});
		});

		//set bDiv
		g.bDiv.className = 'bDiv';
		$(t).before(g.bDiv);
		$(g.bDiv).css({ height: (p.height == 'auto') ? 'auto' : p.height + "px"}).scroll(function (e) {g.scroll();}).append(t);
		
		if (p.height == 'auto') {
			$('table', g.bDiv).addClass('autoht');
		}
		
		//add td properties
		g.addCellProp();
		
		//add row properties
		g.addRowProp();
		
		//set cDrag
		
		var cdcol = $('thead tr:first th:first', g.hDiv).get(0);
		
		if (cdcol != null) {
			g.cDrag.className = 'cDrag';
			g.cdpad = 0;
			
			g.cdpad += (isNaN(parseInt($('div',cdcol).css('borderLeftWidth'))) ? 0 : parseInt($('div',cdcol).css('borderLeftWidth')));
			g.cdpad += (isNaN(parseInt($('div',cdcol).css('borderRightWidth'))) ? 0 : parseInt($('div',cdcol).css('borderRightWidth')));
			g.cdpad += (isNaN(parseInt($('div',cdcol).css('paddingLeft'))) ? 0 : parseInt($('div',cdcol).css('paddingLeft')));
			g.cdpad += (isNaN(parseInt($('div',cdcol).css('paddingRight'))) ? 0 : parseInt($('div',cdcol).css('paddingRight')));
			g.cdpad += (isNaN(parseInt($(cdcol).css('borderLeftWidth'))) ? 0 : parseInt($(cdcol).css('borderLeftWidth')));
			g.cdpad += (isNaN(parseInt($(cdcol).css('borderRightWidth'))) ? 0 : parseInt($(cdcol).css('borderRightWidth')));
			g.cdpad += (isNaN(parseInt($(cdcol).css('paddingLeft'))) ? 0 : parseInt($(cdcol).css('paddingLeft')));
			g.cdpad += (isNaN(parseInt($(cdcol).css('paddingRight'))) ? 0 : parseInt($(cdcol).css('paddingRight')));
	
			$(g.bDiv).before(g.cDrag);
			
			var cdheight = $(g.bDiv).height();
			var hdheight = $(g.hDiv).height();
			
			$(g.cDrag).css({top: -hdheight + 'px'});
			
			$('thead tr:first th',g.hDiv).each(function(){
				var cgDiv = document.createElement('div');
				$(g.cDrag).append(cgDiv);
				if (!p.cgwidth) p.cgwidth = $(cgDiv).width();
				if (p.cloumnchange)
					$(cgDiv).css({height: cdheight + hdheight})
					.mousedown(function(e){g.dragStart('colresize', e, this);});
				else
					$(cgDiv).css({height: cdheight + hdheight});
				if ($.browser.msie && $.browser.version < 7.0) {
					g.fixHeight($(g.gDiv).height());
					$(cgDiv).hover(
						function () {
							g.fixHeight();
							$(this).addClass('dragging');
						}, function () {
							if (!g.colresize) $(this).removeClass('dragging');
						}
					);
				}
			});
			//g.rePosDrag();
		}
		
		//add strip
		if (p.striped) {
			$('tbody tr:odd',g.bDiv).addClass('erow');
		}
		
		if (p.resizable && p.height !='auto') {
			g.vDiv.className = 'vGrip';
			$(g.vDiv).mousedown(function (e) { g.dragStart('vresize',e);}).html('<span></span>');
			$(g.bDiv).after(g.vDiv);
		}
		
		if (p.resizable && p.width !='auto' && !p.nohresize) {
			g.rDiv.className = 'hGrip';
			$(g.rDiv).mousedown(function(e){g.dragStart('vresize', e, true);}).html('<span></span>').css('height', $(g.gDiv).height());
			if ($.browser.msie && $.browser.version < 7.0) {
				$(g.rDiv).hover(function(){$(this).addClass('hgOver');},function(){$(this).removeClass('hgOver');});
			}
			$(g.gDiv).append(g.rDiv);
		}
		
		// add pager
		if (p.usepager) {
			g.pDiv.className = 'pDiv';
			g.pDiv.innerHTML = '<div class="pDiv2"></div>';
			$(g.bDiv).after(g.pDiv);
			
			var html = '';
			if (p.usepagerNoCount) {
				html = ' <div class="pGroup"> '
						+'	<div class="pReload pButton"><span></span></div> '
						+' </div>  '
						+' <div class="pGroup"> '
						+'<div class="btnseparator"></div><div class="pPrev pButton"><span></span></div> '
						+'</div> '
						+'<div class="pGroup"> '
						+'<span class="pcontrol"><span style="color:red;font-size:12px;">1</span></span> '
						+'</div>  '
						+'<div class="pGroup"> '
						+' <div class="pNext pButton"><span></span></div> '
						+'</div>  ';
			} else {
				html = '<div class="pGroup"> '
						+'<span id="totalView" style="top: 5px;position: relative;overflow: visible;">共<span style="color:red;font-size:12px;">1</span>条</span>'
						+'</div>  '
						//+' <div class="pGroup"> '
						//+'	<div class="btnseparator"></div><div class="pReload pButton"><span></span></div> '
						//+' </div>  '
						+' <div class="pGroup"> '
						//+'<div class="pFirst pButton"><span></span></div> '
						+'<div class="pPrev pButton"><span></span></div>  '
						+'</div> '
						+'<div class="pGroup"> '
						+'<span class="pcontrol"><span style="color:red;font-size:12px;">1</span>/<span style="font-size:12px;">1</span></span> '
						+'</div>  '
						+'<div class="pGroup"> '
						+'<div class="pNext pButton"><span></span></div> '
						//+' <div class="pLast pButton"><span></span></div> '
						+'<span class="pcontrol"><input type="text" size="1" value="1" /></span> '
						+'</div> ';
			}
			$('div', g.pDiv).html(html);
			$('.pReload', g.pDiv).click(function(){g.populate();});
			$('.pFirst', g.pDiv).click(function(){g.changePage('first');});
			$('.pPrev', g.pDiv).click(function(){g.changePage('prev');});
			$('.pNext', g.pDiv).click(function(){g.changePage('next');});
			$('.pLast', g.pDiv).click(function(){g.changePage('last');});
			$('.pcontrol input', g.pDiv).keydown(function(e){
				if (e.keyCode == 13) {
					g.changePage('input');
				}
			});
			if (!p.showInputPage) {
				$('.pcontrol input', g.pDiv).hide();
			}
			if ($.browser.msie&&$.browser.version<7) {
				$('.pButton',g.pDiv).hover(function(){$(this).addClass('pBtnOver');},function(){$(this).removeClass('pBtnOver');});
			}
			if (p.useRp) {
				var opt = "";
				for (var nx = 0; nx < p.rpOptions.length; nx++) {
					if (p.rp == p.rpOptions[nx]) {
						sel = 'selected="selected"';
					} else {
						sel = '';
					}
					opt += "<option value='" + p.rpOptions[nx] + "' " + sel + " >" + p.rpOptions[nx] + "&nbsp;&nbsp;</option>";
				}
				if (p.showSelectRp) {
					$('.pDiv2',g.pDiv).prepend("<div class='pGroup'><span>每页显示数 </span><select name='rp'>" + opt + "</select></div>");
				}
				
				$('select',g.pDiv).change(function(){
					if (p.onRpChange) {
						p.onRpChange(+this.value);
					} else {
						p.newp = 1;
						p.rp = +this.value;
						g.populate();
					}
				});
			}
			if (p.showTip) {
				$('.pDiv2',g.pDiv).prepend(' <div class="pGroup"> '
						+'<span style="top: 5px;position: relative;overflow: visible;">' +
								'上一行:<font style="font-size:12px;font-weight:bold;">↑</font> &nbsp;|&nbsp;' +
								'下一行:<font style="font-size:12px;font-weight:bold;">↓</font>&nbsp;|&nbsp;' +
								'前页:<font style="font-size:12px;font-weight:bold;">pageUp</font>&nbsp;|&nbsp;' +
								'后页:<font style="font-size:12px;font-weight:bold;">pagedown</font>&nbsp;|&nbsp;' +
								'选中:<font style="font-size:12px;font-weight:bold;">1~9</font> 或 <font style="font-size:12px;font-weight:bold;">Enter</font>&nbsp;|&nbsp;' +
								'退出:<font style="font-size:12px;font-weight:bold;">Esc</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>'
						+' </div> <div class="btnseparator"></div>');
			}
			//add search button
			if (p.searchitems) {
				//$('.pDiv2',g.pDiv).prepend("<div class='pGroup'> <div class='pSearch pButton'><span></span></div> </div>  <div class='btnseparator'></div>");
				$('.pSearch',g.pDiv).click(function(){$(g.sDiv).slideToggle('fast',function(){$('.sDiv:visible input:first',g.gDiv).trigger('focus');});});
				//add search box
				g.sDiv.className = 'sDiv';
				
				sitems = p.searchitems;
				
				var sopt = "";
				for (var s = 0; s < sitems.length; s++) {
					if (p.qtype == '' && sitems[s].isdefault == true) {
						p.qtype = sitems[s].name;
						sel = 'selected="selected"';
					} else {
						sel = '';
					}
					sopt += "<option value='" + sitems[s].name + "' " + sel + " >" + sitems[s].display + "&nbsp;&nbsp;</option>";
				}
				
				if (p.qtype == '') {
					p.qtype = sitems[0].name;
				}
				
				$(g.sDiv).append("<div class='sDiv2'>快速搜索 <input type='text' size='30' name='q' class='qsbox' /> <select name='qtype'>" + sopt + "</select> <input type='button' value='重置' /></div>");
				
				$('input[name=q],select[name=qtype]',g.sDiv).keydown(function(e){if(e.keyCode==13) g.doSearch();});
				$('input[value=重置]',g.sDiv).click(function(){$('input[name=q]',g.sDiv).val(''); p.query = ''; g.doSearch();});
				$(g.bDiv).after(g.sDiv);
			}
		}
		$(g.pDiv,g.sDiv).append("<div style='clear:both'></div>");
		
		// add title
		if (p.title) {
			g.mDiv.className = 'mDiv';
			//g.mDiv.innerHTML = '<div style="COLOR: #645a44;">'+p.title+'</div>'+'<div class="pDiv"><div class="pDiv2">'+html+'</div></div>';
			g.mDiv.innerHTML = '<div style="COLOR: #645a44;">'+p.title+'</div>';
			$(g.gDiv).prepend(g.mDiv);
			//$(g.mDiv).append('<div class="pDiv"><div class="pDiv2">'+html+'</div></div>');
			if (p.showTableToggleBtn) {
				$(g.mDiv).append('<div class="ptogtitle" title="Minimize/Maximize Table"><span></span></div>');
				$('div.ptogtitle',g.mDiv).click(function(){
					$(g.gDiv).toggleClass('hideBody');
					$(this).toggleClass('vsble');
				});
			}
			//g.rePosDrag();
		}
		
		//setup cdrops
		g.cdropleft = document.createElement('span');
		g.cdropleft.className = 'cdropleft';
		g.cdropright = document.createElement('span');
		g.cdropright.className = 'cdropright';
		
		//add block
		g.block.className = 'gBlock';
		var gh = $(g.bDiv).height();
		var gtop = g.bDiv.offsetTop;
		$(g.block).css({
			width: g.bDiv.style.width,
			height: gh,
			background: 'white',
			position: 'relative',
			marginBottom: (gh * -1),
			zIndex: 1,
			top: gtop,
			left: '0px'
		});
		$(g.block).fadeTo(0,p.blockOpacity);
		
		// add column control
		if ($('th',g.hDiv).length) {
			g.nDiv.className = 'nDiv';
			g.nDiv.innerHTML = "<table cellpadding='0' cellspacing='0'><tbody></tbody></table>";
			$(g.nDiv).css({
				marginBottom: (gh * -1),
				display: 'none',
				top: gtop
			}).noSelect();
			
			var cn = 0;
			
			$('th div',g.hDiv).each(function(){
				var kcol = $("th[axis='col" + cn + "']",g.hDiv)[0];
				var chk = 'checked="checked"';
				if (kcol.style.display=='none') chk = '';
				
				$('tbody',g.nDiv).append('<tr><td class="ndcol1"><input type="checkbox" ' + chk +' class="togCol" value="' + cn + '" /></td><td class="ndcol2">' + this.innerHTML + '</td></tr>');
				cn++;
			});
			
			if ($.browser.msie && $.browser.version<7.0) {
				$('tr',g.nDiv).hover(
					function () {$(this).addClass('ndcolover');},
					function () {$(this).removeClass('ndcolover');}
				);
			}
			
			$('td.ndcol2',g.nDiv).click(function(){
				if ($('input:checked',g.nDiv).length <= p.minColToggle && $(this).prev().find('input')[0].checked) return false;
				return g.toggleCol($(this).prev().find('input').val());
			});
			
			$('input.togCol',g.nDiv).click(function(){
				if ($('input:checked',g.nDiv).length < p.minColToggle && this.checked == false) return false;
				$(this).parent().next().trigger('click');
			});
			
			if (p.hidehead) {
				$(g.gDiv).prepend(g.nDiv);
				
				$(g.nBtn).addClass('nBtn').html('<div></div>').attr('title','隐藏/显示 列').click(function(){
					$(g.nDiv).toggle();
					return true;
				});
			}
			
			if (p.showToggleBtn) {
				$(g.gDiv).prepend(g.nBtn);
			}
		}
		
		// add date edit layer
		$(g.iDiv).addClass('iDiv').css({display:'none'});
		$(g.bDiv).append(g.iDiv);
		
		// add flexigrid events
		$(g.bDiv).hover(function(){$(g.nDiv).hide();$(g.nBtn).hide();},function(){if (g.multisel) g.multisel = false;});
		$(g.gDiv).hover(function(){},function(){$(g.nDiv).hide();$(g.nBtn).hide();});
		
		//add document events
		$(document).mousemove(function(e){g.dragMove(e);}).mouseup(function(e){g.dragEnd();}).hover(function(){},function (){g.dragEnd();});
		
		//browser adjustments
		if ($.browser.msie&&$.browser.version < 7.0) {
			$('.hDiv,.bDiv,.mDiv,.pDiv,.vGrip,.tDiv, .sDiv',g.gDiv).css({width: '100%'});
			$(g.gDiv).addClass('ie6');
			if (p.width != 'auto') $(g.gDiv).addClass('ie6fullwidthbug');
		}
		
		g.rePosDrag();
		g.fixHeight();
		
		//make grid functions accessible
		t.p = p;
		t.grid = g;
		
		// load data
		if (p.url&&p.autoload) {
			g.populate();
		}
		return t;		
	};

	var docloaded = false;
	
	$(document).ready(function(){docloaded = true;});
	
	$.fn.flexigrid = function(p) {
		return this.each(function(){
				if (!docloaded) {
					$(this).hide();
					var t = this;
					// 此段 $(document).ready 在 Firefox 中有问题，故先注释
//					$(document).ready(function(){
						$.addFlex(t, p);
//					});
				} else {
					$.addFlex(this, p);
				}
			});
	};

	$.fn.gridReload = function(p) {
		return this.each(function(){
				if (this.grid && this.p.url) {
					this.grid.populate();
				}
			});
	};
	
	$.fn.gridSearch = function(p) {
		return this.each(function() {
				this.p.newp = 1;
				if (this.grid) {
					$.extend(this.p,p);
				}
				this.grid.populate();
			});
	};
	
	$.fn.setTitle = function(title) {
		return this.each( function() {
				if (this.grid) {
					this.grid.setTitle(title);
				}
			});
	};
	
	$.fn.updateOptions = function(p) {
		return this.each( function() {
				if (this.grid) {
					$.extend(this.p,p);
				}
			});
	};
	
	$.fn.flexToggleCol = function(cid,visible) {
		return this.each( function() {
				if (this.grid) {
					this.grid.toggleCol(cid,visible);
				}
			});
	};
	
	$.fn.flexAddData = function(data) {
		return this.each( function() {
				if (this.grid) {
					this.grid.addData(data);
				}
			});
	};
	
	$.fn.noSelect = function(p) {
		if (p == null) {
			prevent = true;
		} else {
			prevent = p;
		}

		if (prevent) {
			return this.each(function(){
					if ($.browser.msie || $.browser.safari) {
						$(this).bind('selectstart', function(){return false;});
					} else if ($.browser.mozilla) {
						$(this).css('MozUserSelect', 'none');
						$('body').trigger('focus');
					} else if ($.browser.opera) { 
						$(this).bind('mousedown', function(){return false;});
					} else {
						$(this).attr('unselectable', 'on');
					}
				});
		} else {
			return this.each(function(){
					if ($.browser.msie || $.browser.safari) {
						$(this).unbind('selectstart');
					} else if ($.browser.mozilla) {
						$(this).css('MozUserSelect','inherit');
					} else if ($.browser.opera) {
						$(this).unbind('mousedown');
					} else {
						$(this).removeAttr('unselectable', 'on');
					}
				});
		}
	};
})(jQuery);