SpreadJS 是一款基于 HTML5 和 jQuery 技术的插件支持自定义单元格类型,本文主要介绍如何使用自定义单元格类型和Jquery UI实现中文日期选择器。
1.下载JQuery UI的Datepicker
2.修改源码实现中文日期选择器
this.regional[""] = { // Default regional settings
closeText: "Done", // Display text for close link
//prevText: "Prev", // Display text for previous month link
//nextText: "Next", // Display text for next month link
prevText: "上一月",
nextText: "下一月",
currentText: "Today", // Display text for current month link
//monthNames: ["January","February","March","April","May","June","July","August","September","October","November","December"], // Names of months for drop-down and formatting
monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月", ],
monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], // For formatting
dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], // For formatting
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], // For formatting
//dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"], // Column headings for days starting at Sunday
dayNamesMin: ["日", "一", "二", "三", "四", "五", "六", ],
weekHeader: "Wk", // Column header for week of the year
//dateFormat: "mm/dd/yy", // See format options on parseDate
dateFormat: "yy年mm月dd日", // See format options on parseDate
firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
isRTL: false, // True if right-to-left language, false if left-to-right
showMonthAfterYear: false, // True if the year select precedes month, false for month then year
yearSuffix: "" // Additional text to append to the year in the month headers
};
3.在SpreadJS创建CustomCellType
var ns = GcSpread.Sheets;
function DatePickerCellType() {
}
DatePickerCellType.prototype = new ns.CustomCellType();
DatePickerCellType.prototype.createEditorElement = function (context) {
//Create input presenter.
return document.createElement("input");
};
4.实现CustomCellType的activateEditor和deactivateEditor方法
DatePickerCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect, context) {
//Initialize input editor.
if (editorContext) {
$editor = $(editorContext);
ns.CustomCellType.prototype.activateEditor.apply(this, arguments);
$editor.datepicker();
$editor.css("position", "absolute");
$editor.attr("gcUIElement", "gcEditingInput");
$(".ui-datepicker").attr("gcUIElement", "gcEditingInput");
}
}
DatePickerCellType.prototype.deactivateEditor = function (editorContext, context) {
//Remove input editor when end editor status.
if (editorContext) {
var element = editorContext;
$(element).datepicker("hide");
$(element).datepicker("destroy");
}
ns.CustomCellType.prototype.deactivateEditor.apply(this, arguments)
};
5.实现setEditorValue和getEditorValue方法
DatePickerCellType.prototype.setEditorValue = function (editor, value, context) {
//Sync value from Cell value to editor value.
$(editor).datepicker("setDate", value);
};
DatePickerCellType.prototype.getEditorValue = function (editor, context) {
//Sync value from editor value to cell value.
return $(editor).datepicker("getDate");
};
6.实现updateEditor方法
DatePickerCellType.prototype.updateEditor = function (editorContext, cellStyle, cellRect, context) {
if (editorContext) {
$editor = $(editorContext);
$editor.css("width", cellRect.width - 1);
$editor.css("height", cellRect.height - 3);
}
};
7.在SpreadJS中调用
$(document).ready(function () {
var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 1 });
var sheet = spread.getActiveSheet();
sheet.isPaintSuspended(true);
sheet.setValue(0, 1, "DatePicker", ns.SheetArea.colHeader);
sheet.getColumn(1).cellType(new DatePickerCellType()).width(100).formatter("yyyy年MM月dd日");
sheet.isPaintSuspended(false);
});
效果截图:
示例下载:
这就是你想要的SpreadJS,快来官网了解并下载它吧!