最终实现效果图:
我的初步代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Dhtml Grid</title> <link rel="STYLESHEET" type="text/css" href="<%=path %>/js/dhtml/dhtmlx.css"> </head> <body> <div id="mygrid_container" style="width:600px;height:150px;"></div> <script src="<%=path %>/js/jquery-1.5.1.js"></script> <script src="<%=path %>/js/dhtml/dhtmlxcommon.js"></script> <script src="<%=path %>/js/dhtml/dhtmlx.js"></script> <script type="text/javascript"> var mygrid; $(document).ready(function(){ mygrid = new dhtmlXGridObject("mygrid_container"); mygrid.setImagePath("<%=path%>/image/dhtml/"); mygrid.setHeader("name, age,birthday,price"); mygrid.setInitWidths("100,50,*,100"); mygrid.setColAlign("left,right,center"); mygrid.setColSorting("str,int,date"); mygrid.setColTypes("edtxt,ed,dhxCalendar,ron"); mygrid.enableMultiselect(true); mygrid.setSkin("dhx_skyblue"); mygrid.attachEvent("onRowSelect",doOnRowSelected); mygrid.init(); <!--格式化数字,第二个参数是列号,从0开始--> mygrid.setNumberFormat("0,000.00",3,",","."); mygrid.loadXML('<%=path%>/student/dhtmlListStudent.do?vmTemplate=index2.vm'); }); </script> </body> </html>
结果,大失所望,竟然没有setNumberFormat这个方法,查看官方文档才知道,setNumberFormat这个方法只有在专业版里才支持,而我用的是标准版。知道了原因,自然要想解决办法。
基于目前网络上的资源,最新的能够下载到的专业版是dhtmlx-2.5-pro.rar,下载链接已经放上。对比了一下我自己的3.5标准版,发现关于setNumberFormat,标准版里缺少几个方法,
setNumberFormat : function(mask, cInd, p_sep, d_sep) { var yJ = mask.replace(/[^0\,\.]*/g, ""); var pfix = yJ.indexOf("."); if (pfix > -1) pfix = yJ.length - pfix - 1; var Jd = yJ.indexOf(","); if (Jd > -1) Jd = yJ.length - pfix - 2 - Jd; if (typeof p_sep != "string") p_sep = this.i18n.decimal_separator; if (typeof d_sep != "string") d_sep = this.i18n.group_separator; var pref = mask.split(yJ)[0]; var Om = mask.split(yJ)[1]; this._maskArr[cInd] = [pfix, Jd, pref, Om, p_sep, d_sep] }, _aplNFb : function(data, ind) { var a = this._maskArr[ind]; if (!a) return data; var ndata = parseFloat(data.toString().replace(/[^0-9]*/g, "")); if (data.toString().substr(0, 1) == "-") ndata = ndata * -1; if (a[0] > 0) ndata = ndata / Math.pow(10, a[0]); return ndata }, _aplNF : function(data, ind) { var a = this._maskArr[ind]; if (!a) return data; var c = (parseFloat(data) < 0 ? "-" : "") + a[2]; data = Math.abs(Math.round(parseFloat(data) * Math.pow(10, a[0] > 0 ? a[0] : 0))).toString(); data = (data.length < a[0] ? Math.pow(10, a[0] + 1 - data.length).toString().substr(1, a[0] + 1) + data.toString() : data).split("").reverse(); data[a[0]] = (data[a[0]] || "0") + a[4]; if (a[1] > 0) for (var j = (a[0] > 0 ? 0 : 1) + a[0] + a[1]; j < data.length; j += a[1]) data[j] += a[5]; return c + data.reverse().join("") + a[3] },
那么,此时,我们需要做的就是把这几个方法拷贝到dhtmlxgrid.js中的相同位置。
最后,我们在页面中引入dhtmlxgrid.js,大功告成!