(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 + '-->' + p.nomsg + ''); } else { $(":first",g.mDiv).html($(":first",g.mDiv).html() + '-->' + p.nomsg + ''); } 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 + ''); $('.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 = ' '; //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 = "