dhtmlx学习之dhtmlxgrid（二）-----setNumberFormat的用法

最新推荐文章于 2022-07-12 17:08:51 发布

an_feng

最新推荐文章于 2022-07-12 17:08:51 发布

阅读量684

点赞数

分类专栏： dhtmlx 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/an_feng/article/details/84382551

版权

dhtmlx 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最终实现效果图：

我的初步代码：

<!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，大功告成！