最近做grid展示。用到了flexgrid,在网上搜索了一番。在加上自己的修改。最终出来了自己的东西。先上图,再贴代码吧
<br> <table border="0" style="width:95%" cellspacing="0" cellpadding="3" class="small" align="center"> <tr> <td class="Big" ><span class="big3"><img src="/eform/resource/images/menu/big/wf_mine.png" width="32"> 用户列表</span> 姓名<input id="nickName" type="text" name="nickName" size="15"> 邮箱<input id="userEmail" type="text" name="userEmail" size="15"> 用户名 <input id="userName" type="text" name="userName" size="15"> <input type="button" id="btnQuery" name="btnQuery" value="查询用户"> <input type="button" id="btnAdd" name="btnAdd" value="添加用户"> <input type="button" id="btnDelete" name="btnDelete" value="删除用户"> <input type="button" id="btnEdit" name="btnEdit" value="修改用户"> <input type="button" id="btnView" name="btnView" value="查看用户"> <input type="button" id="btnUnlock" name="btnUnlock" value="解锁用户"> <input type="button" id="btnLock" name="btnLock" value="锁定用户"> <input type="button" id="btnExport" name="btnExport" value="导出用户"> <input type="button" id="btnImport" name="btnImport" value="导入用户"> <input type="button" id="btnTemplate" name="btnTemplate" value="下载模板 "> </td> </tr> </table> <br> <form id="listDataForm" name="listDataForm" action="/eform/system/user/index.xos" method="post"> <table id="tablelistdata" style="width:95%" class="TableList" align="center"> <thead> <tr class="TableHeader" id="bodydataheader"> <td width="15" axis="-1" class="TableCorner"><input id="chkallselect" type="checkbox" name="chkallselect" class="noborder" ></td> <td width="30%" axis="0" class="TableCorner" id="userName_0" onclick="sortFunction('userName','asc');">用户名 </td> <td width="15%" axis="1" class="TableCorner" id="nickName_0" onclick="sortFunction('nickName','asc');">姓名</td> <td width="50%" axis="2" class="TableCorner" id="userEmail_0" onclick="sortFunction('userEmail','asc');">邮箱</td> <td width="5%" axis="3" class="TableCorner">锁定</td> </tr> </thead> <tbody id="bodylistdata"> <tr class="TableLine1 "> <td width="15"><input id="chk_402880933f5fc093013f5fc09d95044b" class="itemchk noborder" type="checkbox" value="402880933f5fc093013f5fc09d95044b"></td> <td align="left" >carl.song</td> <td align="left" > </td> <td align="left" > </td> <td align="left" >否</td> </tr> <tr class="TableLine1 TableRowHover"> <td width="15"><input id="chk_4028809340d4a9860140d4ab21910001" class="itemchk noborder" type="checkbox" value="4028809340d4a9860140d4ab21910001"></td> <td align="left" >sysadmin</td> <td align="left" > </td> <td align="left" > </td> <td align="left" >否</td> </tr> <tr class="TableLine1 "> <td width="15"><input id="chk_40288093412fcc5a01412fccfa040002" class="itemchk noborder" type="checkbox" value="40288093412fcc5a01412fccfa040002"></td> <td align="left" >carl.liu</td> <td align="left" > </td> <td align="left" > </td> <td align="left" >否</td> </tr> <tr class="TableLine1 TableRowHover"> <td width="15"><input id="chk_40288093412fd12d01412fd2e6300002" class="itemchk noborder" type="checkbox" value="40288093412fd12d01412fd2e6300002"></td> <td align="left" >carl.wang</td> <td align="left" > </td> <td align="left" > </td> <td align="left" >否</td> </tr> <tr class="TableLine1 "> <td width="15"><input id="chk_40288093412fda4501412fdb20970001" class="itemchk noborder" type="checkbox" value="40288093412fda4501412fdb20970001"></td> <td align="left" >carl.ye</td> <td align="left" > </td> <td align="left" > </td> <td align="left" >否</td> </tr> <tr class="TableLine1 TableRowHover"> <td width="15"><input id="chk_40288093412fda4501412fdd73070002" class="itemchk noborder" type="checkbox" value="40288093412fda4501412fdd73070002"></td> <td align="left" >kevin.ye</td> <td align="left" > </td> <td align="left" > </td> <td align="left" >否</td> </tr> </tbody> <tfoot id="footlistdata"> <tr class="TableFooter"> <td align="left" colspan="5" id="pagemessage"> </td> </tr> </tfoot> </table> </form>
function sortFunction(asortid,asortorder){ //jQuery("#"+asortid).empty(); jQuery("#userName_0").attr("onclick","sortFunction('userName','asc')"); jQuery("#userName_0").html("用户名 "); jQuery("#nickName_0").attr("onclick","sortFunction('nickName','asc')"); jQuery("#nickName_0").html("姓名"); jQuery("#userEmail_0").attr("onclick","sortFunction('userEmail','asc')"); jQuery("#userEmail_0").html("邮箱"); if(asortorder=='asc'){ jQuery("#"+asortid+"_0").attr("onclick","sortFunction('"+asortid+"','desc')"); jQuery("#"+asortid+"_0").html(jQuery("#"+asortid+"_0").html()+' <img src="/eform/resource/themes/10/images/ddn.png">'); } else{ jQuery("#"+asortid+"_0").attr("onclick","sortFunction('"+asortid+"','asc')"); jQuery("#"+asortid+"_0").html(jQuery("#"+asortid+"_0").html()+' <img src="/eform/resource/themes/10/images/uup.png">'); } jQuery("#pagemessage").flexOptions({sortname: asortid,sortorder:asortorder}); jQuery("#pagemessage").flexReload(); } function exportFunction(){ var iform=_$("listDataForm"); iform.action="/eform/system/user/exportdata.xos"; iform.submit(); } var urlWindowGroup=null; function closeWindow(){ if(urlWindowGroup!=null){ urlWindowGroup.close(); window.location='/eform/system/user/index.xos'; } } function importFunction(){ urlWindowGroup= new UI.URLWindow({ width: 400, maxWidth:400, height: 200, maxHeight:200, id:'importUserData', shadow: true, theme: "mac_os_x", url: '/eform/system/user/excel.xos'}); urlWindowGroup.center().show().activate(); } function downFunction(){ var iform=_$("listDataForm"); iform.action="/eform/system/user/down.xos"; iform.submit(); } jQuery(function() { jQuery(":button").button(); jQuery(":text").textbox(); jQuery("#btnQuery").click(function(){queryFunction();}); jQuery("#btnAdd").click(function(){newFunction();}); jQuery("#btnDelete").click(function(){deleteFunction();}); jQuery("#btnEdit").click(function(){editFunction();}); jQuery("#btnView").click(function(){viewFunction();}); jQuery("#btnUnlock").click(function(){unlockFunction();}); jQuery("#btnLock").click(function(){lockFunction();}); jQuery("#btnExport").click(function(){exportFunction();}); jQuery("#btnImport").click(function(){importFunction();}); jQuery("#btnTemplate").click(function(){downFunction();}); jQuery("#chkallselect").change(function(){ var ickeck=this.checked; jQuery("input.itemchk").each(function(j){ this.checked=ickeck; }); }); var maiheight = document.documentElement.clientHeight; var otherpm = 150; //GridHead,toolbar,footer,gridmargin var gh = maiheight - otherpm; var option = { height : gh, //flexigrid插件的高度,单位为px total:6, page:1, pages:1, rp:20, url: '/eform/system/user/ajax.xos', path:'/eform/', dataType: 'json', width:'97%', usepager:true, errormsg : '连接错误', pagetext : '页', pagestat : '显示记录从{from}到{to},总数 {total} 条', outof : '的', findtext : '查询', firsttext : '第一页', prevtext : '前一页', nexttext : '下一页', lasttext : '最后页', refresh : '刷新', procmsg : '正在处理数据,请稍候 ...', nomsg : '没有数据需要显示', alertTitle: '系统提示', cleartitle: '清空', colModel : [{ name : 'userName' },{ name : 'nickName' },{ name : 'userEmail' },{ name : 'islock' }], buttons: [], searchitems: [ { id:'nickName', name: 'nickName'}, { id:'userEmail', name: 'userEmail'}, { id:'userName', name: 'userName' } ], coldata:'bodylistdata',headerdata:'bodydataheader', autoload: false, //自动加载,即第一次发起ajax请求 hideOnSubmit: true //是否在回调时显示遮盖 }; jQuery("#pagemessage").flexigrid(option); }); function queryFunction(){ jQuery("#pagemessage").flexReload(); }
主体flexgrid代码:
/* * Flexigrid for jQuery - v1.1 * * Copyright (c) 2008 Paulo P. Marinas (code.google.com/p/flexigrid/) * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * */ (function ($) { /* * jQuery 1.9 support. browser object has been removed in 1.9 */ var browser = $.browser; if (!browser) { function uaMatch( ua ) { ua = ua.toLowerCase(); var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) || /(webkit)[ \/]([\w.]+)/.exec( ua ) || /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) || /(msie) ([\w.]+)/.exec( ua ) || ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) || []; return { browser: match[ 1 ] || "", version: match[ 2 ] || "0" }; }; var matched = uaMatch( navigator.userAgent ); browser = {}; if ( matched.browser ) { browser[ matched.browser ] = true; browser.version = matched.version; } // Chrome is Webkit, but Webkit is also Safari. if ( browser.chrome ) { browser.webkit = true; } else if ( browser.webkit ) { browser.safari = true; } } /*! * START code from jQuery UI * * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * * http://docs.jquery.com/UI */ if(typeof $.support.selectstart != 'function') { $.support.selectstart = "onselectstart" in document.createElement("div"); } if(typeof $.fn.disableSelection != 'function') { $.fn.disableSelection = function() { return this.bind( ( $.support.selectstart ? "selectstart" : "mousedown" ) + ".ui-disableSelection", function( event ) { event.preventDefault(); }); }; } /* END code from jQuery UI */ $.addFlex = function (t, p) { if (t.grid) return false; //return if already exist p = $.extend({ //apply default properties height: 200, //default height//flexigrid插件的高度,单位为px width: 'auto', //auto width//宽度值,auto表示根据每列的宽度自动计算 striped: true, //apply odd even stripes//是否显示斑纹效果,默认是奇偶交互的形式 novstripe: false, minwidth: 30, //min width of columns//列的最小宽度 minheight: 20, //min height of columns//列的最小高度 resizable: false, //allow table resizing//resizable table是否可伸缩 url: false, //URL if using data from AJAX//ajax url,ajax方式对应的url地址 method: 'POST', //data sending method// data sending method,数据发送方式 dataType: 'json', //type of data for AJAX, either xml or json// type of data loaded,数据加载的类型,xml,json errormsg: 'Connection Error',//错误提升信息 cleartitle:'clear', usepager: false,//是否分页 nowrap: true,//是否不换行 page: 1, //current page 默认当前页 total: 1, //total pages 总页面数 useRp: false, //use the results per page select box 是否可以动态设置每页显示的结果数 rp: 25, //results per page 每页默认的结果数 rpOptions: [10,15, 25, 30], //allowed per-page values //可选择设定的每页结果数 title: false,//是否包含标题 pagestat: 'Displaying {from} to {to} of {total} items',//显示当前页和总页面的样式 pagetext: 'Page', outof: 'of', findtext: 'Find', firsttext:'', prevtext:'', nexttext:'', lasttext:'', coldata:'bodylistdata', headerdata:'bodydataheader', params: [], //allow optional parameters to be passed around searchitems:[], procmsg: 'Processing, please wait ...',//正在处理的提示信息 query: '',//搜索查询的条件 qtype: '',//搜索查询的类别 qop: "Eq", //搜索的操作符 nomsg: 'No items',//无结果的提示信息 minColToggle: 1, //minimum allowed column to be hidden showToggleBtn: true, //show or hide column toggle popup hideOnSubmit: true,//显示遮盖 autoload: true,//自动加载 blockOpacity: 0.5,//透明度设置 preProcess: false, addTitleToCell: false, // add a title attr to cells with truncated contents dblClickResize: false, //auto resize column by double clicking onDragCol: false,//拖拽列事件 onToggleCol: false,//合并列事件 onChangeSort: false,//改变排序 onDoubleClick: false,//双击事件 onSuccess: false, onError: false, onSubmit: false, //using a custom populate function showcheckbox: false,//是否显示checkbox rowhandler: false, //是否启用行的扩展事情功能 path:'', rowbinddata: false, alertTitle:'System Message', __mw: { //extendable middleware function holding object datacol: function(p, col, val) { //middleware for formatting data columns var _col = (typeof p.datacol[col] == 'function') ? p.datacol[col](val) : val; //format column using function if(typeof p.datacol['*'] == 'function') { //if wildcard function exists return p.datacol['*'](_col); //run wildcard function } else { return _col; //return column without wildcard } } }, getGridClass: function(g) { //get the grid class, always returns g return g; }, gridClass: "flexigrid", datacol: {}, //datacol middleware object 'colkey': function(colval) {} colResize: true, //from: http://stackoverflow.com/a/10615589 colMove: true, onrowchecked: false }, 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=null ; g= { hideLoading: function() { $('.pReload', t).removeClass('loading'); // if (p.hideOnSubmit) $(g.block).remove(); $('.pPageStat', t).html(p.errormsg); this.loading = false; }, addData: function (data) { //parse data if (p.dataType == 'json') { data = $.extend({rows: [], page: 0, total: 0}, data); } if (p.preProcess) { data = p.preProcess(data); } if (p.usepager) { $('.pReload', t).removeClass('loading'); } this.loading = false; if (!data) { if (p.usepager) $('.pPageStat', t).html(p.errormsg); if (p.onSuccess) p.onSuccess(this); return false; } p.total = data.total; if (p.total === 0) { $('#bodylistdata').empty(); $('#bodylistdata').html('<tr class="TableLine1"><td align="left" colspan="'+(p.colModel.length+1)+'">'+p.nomsg+'</td></tr>'); //$(t).empty(); p.pages = 0; p.page = 0; this.buildpager(); if (p.onSuccess) p.onSuccess(this); // if (p.hideOnSubmit) { // $(g.block).remove(); // } $('#chkallselect').prop("disabled", true); return false; } p.pages = Math.ceil(p.total / p.rp); p.page = data.page; if (p.usepager)this.buildpager(); //build new body var ths = $('#'+p.headerdata+' td'); var tbhtml = []; // tbhtml.push("<tbody>"); if(data.error&&data.error!=''){ $.messageBox.alert({title:p.alertTitle,content:data.error,type:'error'}); return false; } $.each(data.rows, function (i, row) { tbhtml.push("<tr "); tbhtml.push("id=\"row",row.id,"\" "); if (row.name) tbhtml.push(" name=\"",row.name,"\" "); if (row.color) { tbhtml.push(" style=\" background:",row.color,"\" "); } else { if (i % 2==0) tbhtml.push(" class=\"TableLine1 TableRowHover\" "); else tbhtml.push(" class=\"TableLine1\" "); } // if (p.rowbinddata) { // tbhtml.push(" ch=\"", row.cell.join("_FG$SP_"), "\" "); // } tbhtml.push(">"); var trid = row.id; $(ths).each( //add cell function (j) { tbhtml.push("<td "); var idx = $(this).attr('axis'); var div = []; if (idx == "-1") { div.push("<input type=\"checkbox\" id=\"chk_", row.id, "\" class=\"itemchk\" value=\"", row.id, "\"/>"); }else { var divInner=null; // If the json elements aren't named (which is typical), use numeric order if (typeof row.cell[idx] != "undefined") { divInner = (row.cell[idx] !== null) ? row.cell[idx] : ' '; //null-check for Opera-browser } else { divInner = row.cell[p.colModel[idx].name]; } divInner = p.__mw.datacol(p, $(this).attr('abbr'), divInner); //use middleware datacol to format cols if (this.process) { divInner = this.process(divInner, trid); } div.push(divInner); } // tbhtml.push(" abbr=\"",$(this).attr('abbr'),"\" "); tbhtml.push(">", div.join(""), "</td>"); }); tbhtml.push("</tr>"); }); $("#"+p.coldata).empty(); // alert(tbhtml.join("")); $("#"+p.coldata).html(tbhtml.join("")); tbhtml=null; this.addCellProp(); this.addRowProp(); // tbody = null; data = null; i = null; $('#chkallselect').prop("disabled", false); if (p.onSuccess) { p.onSuccess(this); } // if (p.hideOnSubmit) { // $(g.block).remove(); // } if (browser.opera) { $(t).css('visibility', 'visible'); } }, buildpager: function () { //rebuild pager based on new properties if(p.page==0&&p.pages==0&&p.total==0){ $('#_input', t).val(1); $('.pcontrol span', t).html(1); $('.pPageStat', t).html(p.nomsg); }else{ $(':input', t).val(p.newp); $('.pcontrol span', t).html(p.pages); 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); $('.pPageStat', t).html(stat); // $('#chkallselect').prop("disabled", false); } }, populate: function () { //get latest data 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', t).html(p.procmsg); $('.pReload', t).addClass('loading'); // $(g.block).css({ // top: t.offsetTop // }); // if (p.hideOnSubmit) { // $(t).prepend(g.block); // } if (browser.opera) { $(t).css('visibility', 'hidden'); } if (!p.newp) { p.newp = 1; } if (p.page > p.pages) { p.page = p.pages; } var param = [{ name: 'page', value: p.newp }, { name: 'pageSize', value: p.rp }, { name: 'orderBy', value: p.sortname }, { name: 'sortorder', value: p.sortorder }]; if(p.searchitems){//add search condition carl.song 2013-06-19 var sitems=p.searchitems; for(var pi=0;pi<sitems.length;pi++){ var sitem=sitems[pi]; var tparams=null; // tparams.push({name:'",sitem.name,"',value:'"); var squery =$('#'+sitem.id).val(); squery=jQuery.trim(squery); if(squery!=""){ tparams={name:sitem.name,value:squery}; } // var tparam=tparams.join(" "); if(tparams!=null) param[param.length]=tparams; // tparam=null; tparams=null; } } // alert(param.toString()); $.ajax({ type: p.method, url: p.url, data: param, dataType: p.dataType, success: function (data) { // alert(data); g.addData(data); }, error: function (XMLHttpRequest, textStatus, errorThrown) { try { if (p.onError) p.onError(XMLHttpRequest, textStatus, errorThrown); } catch (e) {} } }); }, doSearch: function () { if(p.searchitems){ var sitems=p.searchitems; for(var i=0;i<sitems.length;i++){ var sitem=sitems[i]; var query =$('#'+sitem.id,g.tDiv).val(); if(sitem.reg){ if(!sitem.reg.test(query)){ $.messageBox.alert({title:p.alertTitle,content:sitem.message,type:'error'}); return ; } } } } 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, 10) - 1; } break; case 'next': if (p.page < p.pages) { p.newp = parseInt(p.page, 10) + 1; } break; case 'last': p.newp = p.pages; break; case 'input': var nv = parseInt($('#_input', t).val(), 10); if (isNaN(nv)) { nv = 1; } if (nv < 1) { nv = 1; } else if (nv > p.pages) { nv = p.pages; } $('#_input', t).val(nv); p.newp = nv; break; } if (p.newp == p.page) { return false; } if (p.onChangePage) { p.onChangePage(p.newp); } else { this.populate(); } }, cellProp: function(n, ptr, pth) { var tdDiv = document.createElement('div'); if (pth != null) { if (p.sortname == $(pth).attr('abbr') && p.sortname) { this.className = 'sorted'; } $(tdDiv).css({ textAlign: pth.align, width: $('div:first', pth)[0].style.width }); if (pth.hide) $(this).css('display', 'none'); } 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; // alert(this.innerHTML); var prnt = $(this).parent()[0]; var pid = false; if (prnt.id) pid = prnt.id.substr(3); if (pth != null) { if (pth.process) { pth.process(tdDiv, pid); } } $("input.itemchk", tdDiv).each(function() { $(this).click(function() { if (this.checked) { $(ptr).addClass("trSelected"); } else { $(ptr).removeClass("trSelected"); } if (p.onrowchecked) { p.onrowchecked.call(this); } }); }); $(this).empty().append(tdDiv).removeAttr('width'); //wrap content // g.addTitleToCell(tdDiv); //add editable event here 'dblclick',如果需要可编辑在这里添加可编辑代码 }, addCellProp: function () { // var $gF = this.cellProp; // $('tbody tr td',t).each(function () { // var id=$(this).children(0).html(); //// alert(); //// alert(id); // if(p.showcheckbox&&id.indexOf("itemchk")<=0){ // var ctd = jQuery('<td/>'); // var ctdch = jQuery('<input type="checkbox" id="chk_'+$(this).children(0).attr("id")+'" class="itemchk" value="'+$(this).children(0).attr("id")+'"/>'); // ctdch.addClass("noborder"); // ctd.addClass("cth").attr({ width: "15"}).append(ctdch); // $(this).prepend(ctd); // } // //// var n = $('td', $(this).parent()).index(this); //// var pth = $('th:eq(' + n + ')', g.hDiv).get(0); //// var ptr = $(this).parent(); //// $gF.call(this, n, ptr, pth); // }); // $gF=null; }, addRowProp: function () { $('#'+p.coldata+' tr').each( function() { var _this=$(this); $(this).find("input.itemchk").change(function(e){ if (this.checked) { _this.addClass("TableRowActive"); }else { _this.removeClass("TableRowActive"); } if (p.onrowchecked) { p.onrowchecked.call(this); } }); } ); if (p.rowhandler) { p.rowhandler(this); } if (browser.msie && browser.version < 7.0) { $(this).hover(function () { $(this).addClass('TableRowActive'); }, function () { $(this).removeClass('TableRowActive'); }); } }, checkAllOrNot: function(parent) { var ischeck = this.checked; $("input.itemchk", t).each(function() { this.checked = ischeck; var $tr= $(this).parent().parent(); $tr.toggleClass("trSelected",ischeck); //Raise Event if (p.onrowchecked) { p.onrowchecked.call(this); } }); }, pager: 0 }; g = p.getGridClass(g); //get the grid class // alert(p.usepager); //add td & row properties if ((p.url == false || p.url == "")) { g.addCellProp(); g.addRowProp(); }else if(p.autoload==false){ g.addCellProp(); g.addRowProp(); } // add pager if (p.usepager) { var html='<div class="pFirst pButton" style="cursor:pointer;" title="'+p.firsttext+'" ><img src="'+p.path+'/resource/images/pages/page-first.png"></div>'; html=html+'<div class="pPrev pButton" style="cursor:pointer;" title="'+p.prevtext+'"><img src="'+p.path+'/resource/images/pages/page-prev.png"></div>'; html=html+' <div class="btnseparator"></div><div class="pButton"> <span class="pcontrol">'; html=html+ p.pagetext+'<input type="text" id="_input" name="_input" class="BigInput ui-corner-all" size="4" value="1" /> ' + p.pagetext+ ' '+ p.outof+'<span> 1 </span></span></div>'; html=html+'<div class="btnseparator"></div> '; html=html+'<div class="pNext pButton" style="cursor:pointer;" title="'+p.nexttext+'"><img src="'+p.path+'/resource/images/pages/page-next.png"></div>'; html=html+'<div class="pLast pButton" style="cursor:pointer;" title="'+p.lasttext+'"><img src="'+p.path+'/resource/images/pages/page-last.png"></div>'; html=html+' <div class="btnseparator"></div> '; html=html+' <div class="pReload pButton" style="cursor:pointer;" title="'+p.refresh+'"><img src="'+p.path+'/resource/images/pages/refresh.png"></div> '; html=html+' <div class="btnseparator"></div> '; html=html+' <div class="pButton"><span class="pPageStat"></span></div> '; $(t).append(html); $('.pReload',t).click(function () { g.populate(); }); $('.pFirst', t).click(function () { g.changePage('first'); }); $('.pPrev', t).click(function () { g.changePage('prev'); }); $('.pNext', t).click(function () { g.changePage('next'); }); $('.pLast', t).click(function () { g.changePage('last'); }); $('.pcontrol input', t).keydown(function (e) { if (e.keyCode == 13) { g.changePage('input'); } }).change(function () { g.changePage('input'); }); if (browser.msie && browser.version < 7) $('.pButton', t).hover(function () { $(this).addClass('pBtnOver'); }, function () { $(this).removeClass('pBtnOver'); }); g.buildpager(); } $(g.pDiv).append("<div style=\"clear:both\"></div>"); //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(function () { $.addFlex(t, p); }); } else { $.addFlex(this, p); } }); }; //end flexigrid $.fn.flexReload = function (p) { // function to reload grid return this.each(function () { if (this.grid && this.p.url) this.grid.populate(); }); }; //end flexReload $.fn.ChangePage = function(type) { return this.each(function() { if (this.grid) { this.grid.changePage(type); } }); }; $.fn.flexOptions = function (p) { //function to update general options return this.each(function () { if (this.grid) $.extend(this.p, p); }); }; //end flexOptions $.fn.GetOptions = function() { if (this[0].grid) { return this[0].p; } return null; }; $.fn.flexAddData = function (data) { // function to add data to grid return this.each(function () { if (this.grid) this.grid.addData(data); }); }; })(jQuery);
相关推荐
6. **插件和扩展**:通过插件机制,开发者可以轻松扩展其功能,满足特定业务需求。 二、使用FlexGrid 1. **安装与引入**:首先,你需要下载FlexGrid的最新版,解压后将库文件(通常包括CSS样式文件和JavaScript...
- FlexGrid 允许开发者通过扩展插件或者编写自定义代码来添加额外的功能,比如添加拖放排序、自定义编辑器等。这需要一定的 JavaScript 编程能力。 8. **性能优化**: - 在处理大数据集时,性能优化是关键。...
除了基本功能,开发者还可以利用 FlexGrid 的 API 进行扩展,例如集成第三方图表库进行数据分析,或者使用 AJAX 实现实时数据更新。 总结来说,FlexGrid 是一款强大的 jQuery 表格插件,适合在需要展示和操作大量...
7. **扩展性**:通过编写自定义的插件和扩展,开发者可以进一步增强FlexGrid的功能,满足特定的项目需求。 在压缩包文件名列表中,我们看到只有一个文件名为“flexigrid”。这通常是指该压缩包包含FlexGrid的库文件...
8. **扩展性**:FlexGrid通常支持通过插件或API扩展其功能,如导出数据、导入数据、行列合并等。 在JSP环境下,使用FlexGrid的步骤大致如下: 1. **引入库文件**:将解压后的`flexgrid-jsp`文件中的JavaScript和...
10. **API丰富**:提供详尽的API和事件,使得开发者可以深入定制和扩展控件的功能。 在提供的压缩包中,"DLL工具.exe"可能是一个用于操作动态链接库(DLL)的实用工具,帮助开发者管理和修复与C1FlexGrid相关的DLL...
在VB(Visual Basic)编程环境中,FlexGrid控件是一个常用且功能强大的组件,它用于在Windows应用...在实际应用中,还可以根据需求扩展这些功能,比如添加排序、过滤或其他高级查询条件,以满足各种业务场景的需求。
通过对源码的研究,我们可以学习到如何扩展flexgrid的功能,或者针对特定项目进行性能优化。 总结,jQuery flexgrid以其强大的功能和灵活性,成为了网页开发中的得力助手。通过深入学习和实践,我们可以熟练掌握这...
它以其灵活性、可扩展性和强大的功能而受到开发者青睐。在这个实例中,我们将深入探讨如何利用Flexgrid实现异步增删改操作,并通过弹出div的形式来呈现。 1. **Flexgrid基本概念** Flexgrid是一款基于JavaScript的...
5. **增强功能**:Wijmo.js提供了许多扩展功能,如行选择、分页、过滤器等,我们可以根据需求进行添加,以丰富FlexGrid的功能。 在提供的文件"FlexGridIntro.sln"和"FlexGridIntro"中,包含了使用FlexGrid和...
FlexGrid增强类是一种针对Visual Basic (VB) 中的FlexGrid控件进行优化和扩展的工具。FlexGrid控件是Microsoft Windows应用程序开发中常用的表格控件,它允许开发者创建多行多列的数据展示区域,用于数据的显示和...
在Windows应用程序开发中,ActiveX控件是一种强大的工具,它允许开发者在应用程序中嵌入各种功能组件。本文将深入探讨如何在视图窗口中动态创建...同时,掌握动态创建控件的技巧也有助于提高代码的可扩展性和可维护性。
通过创建一个打印类,开发者可以封装这些复杂操作,使得代码更易维护和扩展。在示例中,可能包含的打印类方法有`PrintGrid`,用于实际的打印操作,`SetupPrinter`用于初始化打印机设置,以及`DrawPage`可能用于绘制...
VSFlexGrid Pro支持ADO和OLE DB,支持统一的字符编码以及DAO数据的 存取,提供多重数据连接的选择。 ADO/OLEDB、DAO可连接到二维、三维 数组或其他VSFlexGrid控件,用户也可创建用户自己的数据源类。...
类似Excel的高级功能,C1FlexGrid可以扩展支持自定义函数,如SUMIFS、AVERAGEIF等。这需要在代码中实现这些函数的逻辑,并将其与公式解析过程相结合。 7. **性能优化**: 当公式涉及到大量单元格或复杂计算时,...
此外,`flexgrid等几个控件研究`这个文件可能包含了作者对其他控件的研究和应用,这有助于扩展你的VB6.0编程知识,理解不同控件的协同工作方式,提高程序设计能力。 总的来说,这个示范工程是学习和掌握`FlexGrid`...
在IT行业中,尤其是在Windows应用程序开发领域,FlexGrid控件是一个常用的选择,...同时,对于有经验的开发者来说,它可以作为一个快速实现可编辑表格功能的基础,可以在此基础上进行扩展和定制,以适应更复杂的需求。
FlexGrid控件是Windows Forms应用程序中...通过灵活地配置和扩展,你可以创建出功能强大的数据展示界面,提供用户友好的体验。记得在实际开发中,要考虑到性能、用户体验和数据安全等因素,确保系统的稳定和高效运行。
通过分析这些文件,我们可以推测这个改进的FlexGrid可能包括了自定义的编辑功能(GridEdit),可能有更高级的行光标导航,以及可能扩展了原生FlexGrid的视觉效果和用户交互。开发人员可以通过研究这些源代码来学习...