也来说说jQuery的grid插件Flexigrid的几点重要改进
之所以选择Flexigrid作为我们的grid，三个重要原因：
1.我们选择了jQuery作为基础js lib；
2.要能全面控盘，也就是说只要需要，可以在没有很强的js牛人参与的情况下，能自行扩充；
3.性能和browser兼容性要好
Ok，下面来谈谈我的几点关键改进（这里忽略参考来的，仅谈自己的扩展和改进，并且仅探讨几个关键改进，细小的就不谈了）
1.兼容复杂的JSON格式。
我们都知道，不可能所有的POJO都是完全扁平的，比如Booking类，里面的定义可能是这样的：
public class Booking implements Serializable {private Long id;private User user;private Hotel hotel;@DateTimeFormat(pattern = "MM-dd-yyyy")private Date checkinDate;@DateTimeFormat(pattern = "MM-dd-yyyy")private Date checkoutDate;private String creditCard;private String creditCardName;private int creditCardExpiryMonth;private int creditCardExpiryYear;private boolean smoking;private int beds;...}{"total":1,"page":1,"rows":[{"id":34,"total":300,"description":"70 Park Avenue Hotel, Feb 10, 2011 to Feb 11, 2011","user":{"name":"Keith","password":null,"username":"keith"},"checkinDate":1297267200000,"checkoutDate":1297353600000,"nights":1,"hotel":{"address":"70 Park Avenue","name":"70 Park Avenue Hotel","id":9,"state":"NY","country":"USA","price":300,"city":"NY","zip":"10011"},"creditCard":null,"smoking":false,"beds":0,"creditCardName":null,"creditCardExpiryMonth":0,"creditCardExpiryYear":0,"amenities":null}]}for (j = 0; j < p.colModel.length; j++) {var cm = p.colModel[j];var selectedName = cm.name;// properties set but not in data, reset to ''if (data.rows[i][selectedName] == null) {data.rows[i][selectedName] = '';}// push the current row data to array tdVal$.each(data.rows[i], function(name, value) { if (selectedName == name) { if (cm.render) { val = cm.render(value);} else {val = value;}tdVal.push(val); }});}colModel : [{display: 'id', name : 'id', width : 10, align: 'left'},{display: 'Hotel Name', name : 'hotel.name', width : 150, sortable : true, align: 'left'},{display: 'Hotel Address', name : 'hotel.address', width : 200, sortable : true, align: 'center'},{display: 'Hotel City', name : 'hotel.city', width : 80, align: 'left'},{display: 'Hotel State', name : 'hotel.state', width : 80, align: 'left'},{display: 'Check in Date', name : 'checkinDate', width : 100, align: 'left'},{display: 'Check out Date', name : 'checkoutDate', width : 100, align: 'right'},//sum{display: 'Action', name : 'cancel', width : 50, align: 'center', render: renderCancelIt}//using custom render]for (j=0;j<p.colModel.length;j++){var cm = p.colModel[j];if(cm.summary) isSummary = true;//10/02/2011 enhanced by bright for support complex properties by rewrite this part//using eval for getting the value no matter how complex it isval = eval("data.rows[" + i +"]." + cm.name);if (val==null) val = "";if (cm.render) {//07/02/2011 by bright: let custom render more powerful//val = cm.render(value);val = cm.render(val, row);}tdVal.push(val);}}function getMoreInfo(content, currentRow){var str = "id=" + currentRow.id + ";name=" + currentRow.name;return '<input type="button" name="doit" value="More Info" onclick="alert(\'' + str + '\')">';}appendSummaryFooter: function(tbody){var data = [];for (j=0;j<p.colModel.length;j++){var cm = p.colModel[j];var summary = cm.summary;if(summary){var vals = []; var trs = $(".flexigrid .bDiv table tbody tr"); if(trs.length > 0){ for(var x=0; x<trs.length; x++){var v = $("td:eq("+j+")",trs[x]).text();vals.push(v);} }var resultValue = 0.00;var fixed = 0;if(typeof(summary)=="function"){resultValue = summary(vals);}else if(summary.indexOf("average")==0){var parts = summary.split(":");fixed = (parts[1] != null) ? parts[1] : 0;var cnt = 0;$(vals).each(function(i,value){cnt++;resultValue += parseFloat(value);});resultValue = resultValue / cnt;resultValue = resultValue.toFixed(fixed);}else if(summary.indexOf("sum")==0){var parts = summary.split(":");fixed = (parts[1] != null) ? parts[1] : 0;$(vals).each(function(i,value){resultValue += parseFloat(value);});resultValue = resultValue.toFixed(fixed);}//push to the reslut arraydata.push(resultValue);}else{data.push("");}}if(data){var footer = $('<tr id="trSummary" style="background:gray"></tr>');$(data).each(function(i,v){var div = $('<div style="text-align: right;">' + v + '</div>'); $(footer).append($('<td align="right"></td>').append(div)); });$(tbody).append(footer); }}$(t).append(tbody);//06012011 add by Bright Zhengif(isSummary){this.appendSummaryFooter(tbody);}{display: 'Price_a', name : 'price', width : 60, align: 'right',summary: 'average:2'},//sum{display: 'Price_s', name : 'price', width : 60, align: 'right',summary: 'sum:0'},//average{display: 'Price_c', name : 'price', width : 60, align: 'right',summary: customSum},//custom//custom summary functionfunction customSum(arrayOfValue){var resultValue = 0.00;$(arrayOfValue).each(function(i,value){resultValue += parseFloat(value);});return resultValue.toFixed(3);}// create model if anyif (p.colModel) {中添加if (p.showRowNum){ var th = document.createElement('th'); $(th).attr('width', '50').attr('align', 'center'). attr('id', 'gridRowNumColumn'); $(th).text('行号'); $(tr).append(th).attr('axis', 'colRowNum');;}不知道最后显示的时候为什么出现下面截图的样子了，js技术很菜，照着网上的改的，出不来http://dl.iteye.com/upload/attachment/559631/ba64ed08-d142-34a7-93a2-9120639b0db0.pngif (p.showRowNum){var currentNum = pageStartNum + i + 1;var td = $("<td align="center">" + currentNum + "</td>");$(td).attr("width","30") .attr("id","gridRowNum") .css({"font-weight" : "bold" });$(tr).append(td);}这段代码，并且在// create model if anyif (p.colModel) {中添加if (p.showRowNum){ var th = document.createElement('th'); $(th).attr('width', '50').attr('align', 'center'). attr('id', 'gridRowNumColumn'); $(th).text('行号'); $(tr).append(th).attr('axis', 'colRowNum');;}不知道最后显示的时候为什么出现下面截图的样子了，js技术很菜，照着网上的改的，出不来http://dl.iteye.com/upload/attachment/559631/ba64ed08-d142-34a7-93a2-9120639b0db0.png// create model if anyif (p.colModel) {中添加if (p.showRowNum){ var th = document.createElement('th'); $(th).attr('width', '50').attr('align', 'center'). attr('id', 'gridRowNumColumn'); $(th).text('行号'); $(tr).append(th).attr('axis', 'colRowNum');;}不知道最后显示的时候为什么出现下面截图的样子了，js技术很菜，照着网上的改的，出不来http://dl.iteye.com/upload/attachment/559631/ba64ed08-d142-34a7-93a2-9120639b0db0.png