最终实现效果图:
我的初步代码:
<!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,大功告成!
相关推荐
dhtmlXGrid是dhtmlx前台JS组件里应用最多的表格插件,被认为是最好的组件,专业人事做过一系列测试,在众多插件中,此表格表现的效率是最高的
二、 dhtmlxgrid 配置部分 12 2.1 表格操作API 12 2.2 表格样式API 19 三、 数据处理部分 30 3.1 dhtmlxgrid 数据加载部分 30 四、 Dhtmlxgrid操作 39 4.1 dhtmlxgrid 行操作 39 4.2 dhtmlxgrid 列操作 48 4.3 ...
本篇还有dhtmlxgird没有的复选框选中整行的效果,dhtmlxgrid多行选中使用的是 [Ctrl+鼠标]、[Shift+鼠标],在国内大部分的体验操作都是第一列放复选框的操作,因此本篇已将其优化; But,本篇还是存在一些小bug待大家...
dhtmlxGrid取一列方法dhtmlxGrid取一列方法dhtmlxGrid取一列方法dhtmlxGrid取一列方法dhtmlxGrid取一列方法dhtmlxGrid取一列方法dhtmlxGrid取一列方法dhtmlxGrid取一列方法dhtmlxGrid取一列方法
本篇还有dhtmlxgird没有的复选框选中整行的效果,dhtmlxgrid多行选中使用的是 [Ctrl+鼠标]、[Shift+鼠标],在国内大部分的体验操作都是第一列放复选框的操作,因此本篇已将其优化; 经测验基本需求符合,但是本篇还是...
dhtmlxgrid 帮助文档
亲测,为dhtmlxgrid专业版,全套js,实用表格技术,需要的就下载。
非常强大的js Grid,dhtmlxgrid 1.4专业版,支持分页功能。
dhtmlxgrid专业版的分页功能dhtmlxgrid_pgn.js
dhtmlxGrid 表格插件-在网页上实现Excel表功能,这个插件功能挺多,当然包括的示例也比较多,包括了Accordion折叠展开特效、... 压缩包中含有两个版本的dhtmlxGrid,一个是09年的,一个是16年的5.0版本,按需使用吧。
dhtmlxGrid配套API,内有专业版和普通的API,很详实,需要的就下吧。
绝对真实,亲测,包含Grid分页控件, var grid = body.attachGrid(); grid.setImagePath("assets/dhtmlx/imgs/"); grid.setHeader("姓名,性别");...如需要学习如何破解DHtmlx,有偿联系(QQ:191817533)-人民币:100元
dhtmlxGrid dhtmlxGrid dhtmlxGrid
dhtmlxGrid操作 dhtmlxGrid行操作
一个学习dhtmlx的文档,dhtmlx包含很多用于显示数据的js功能包
dhtmlxGrid.zip dhtmlxGrid.zip
DHTMLX grid复制以及分页栏跳转,支持grid的复制和分页跳转JS
dhtmlxGrid v.4.2.1包括js和例子dhtmlxGrid v.4.2.1 Standard edition (c) Dinamenta, UAB.