dhtmlXGridObject增加可编辑的时间列并且日期控件显示中文

需求:

dhtmlx中grid表格中增加时间列,并且该列支持修改,并且要弹出中文时间下拉框;

解决方案:

增加时间列:在setColTypes方法中设置列类型为dhxCalendarA或者dhxCalendar(本文使用dhxCalendarA),二者具体有啥区别暂时不清楚,有兴趣的可以查下并在下方留言告知。

弹出中文时间下拉框:重写calendar相关js,具体代码会在下面给出。

相关css、js引入






重写js相关代码

dhtmlXCalendarObject.prototype.langData["cn"] = {
	dateformat: '%d.%m.%Y',
        monthesFNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
        monthesSNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
        daysFNames: ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"],
        daysSNames: ["日","一","二","三","四","五","六"],
	weekstart: 0
}

//设置自动调整日历控件为中文位置
eXcell_dhxCalendarA.prototype.edit=function(){
    this.grid._grid_calendarA.loadUserLanguage("cn");
    var scrollTop = document.documentElement.scrollTop;
    var a=this.grid.getPosition(this.cell);
    this.grid._grid_calendarA._show(!1,!1);
    //设置控件位置
    if (document.documentElement.clientHeight - (a[1] - scrollTop) < (24 + 200)){
        this.grid._grid_calendarA.setPosition(a[0]*1,a[1]*1-200);
    }else{ //-this.cell.offsetWidth
        this.grid._grid_calendarA.setPosition(a[0]*1,a[1]*1);
    }

    this.grid.callEvent("onCalendarShow",[this.grid._grid_calendarA,this.cell.parentNode.idd,this.cell._cellIndex]);
    this.grid._grid_calendarA._last_operation_calendar=!1;this.cell._cediton=!0;
    this.val=this.cell.val;this._val=this.cell.innerHTML;
    var b=this.grid._grid_calendarA.draw;
    this.grid._grid_calendarA.draw=
        function(){};this.grid._grid_calendarA.setDateFormat(this.grid._dtmask||"%d/%m/%Y");
    this.grid._grid_calendarA.setDate(this.val);this.grid._grid_calendarA.draw=b;this.grid._grid_calendarA.draw();this.cell.atag=!this.grid.multiLine&&(_isKHTML||_isMacOS||_isFF)?"INPUT":"TEXTAREA";this.obj=document.createElement(this.cell.atag);this.obj.style.height=this.cell.offsetHeight-(_isIE?4:2)+"px";this.obj.className="dhx_combo_edit";this.obj.wrap="soft";this.obj.style.textAlign=this.cell.align;this.obj.onclick=
        function(a){(a||event).cancelBubble=!0};this.obj.onmousedown=function(a){(a||event).cancelBubble=!0};this.obj.value=this.getValue();this.cell.innerHTML="";this.cell.appendChild(this.obj);if(_isFF&&(this.obj.style.overflow="visible",this.grid.multiLine&&this.obj.offsetHeight>=18&&this.obj.offsetHeight<40))this.obj.style.height="36px",this.obj.style.overflow="scroll";this.obj.onselectstart=function(a){a||(a=event);return a.cancelBubble=!0};this.obj.focus();this.obj.focus()
};

js设置列类型

var gridbox = new dhtmlXGridObject('gridbox');
gridbox.setColTypes("ch,ro,ro,combo,ro,ro,dhxCalendarA");

至此 ,问题解决!!!

你可能感兴趣的:(dhtmlx)