我想让第一行只读 - 我已经完成了 - 并且包括数据输入要求的占位符值，例如yyyy-mm-dd的日期格式。我可以向所有单元格添加占位符值（通过设置Placeholder属性），但无法弄清楚如何将占位符添加到单个单元格。在此先感谢您的帮助。
var placeHolders = {
"course_id": "ABC ",
"class_date": "YYYY-MM-DD",
"sponsor_name": "ICPAS",
"title": "How to",
"subject": "Audit",
"description": "Auditing 101",
"hours_preparation": "2.0",
"hours_presentation": "2.0",
"hours_semester": "2.0",
"hours_quarter": "2.0",
"hours_earned": "2.0",
"price": "25.00",
"link": "www.bastute.com"
};
var data = [];
var greenRenderer = function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.backgroundColor = 'green';
};
var data = [];
function strip_tags(input, allowed) {
// + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
});
};
var safeHtmlRenderer = function (instance, td, row, col, prop, value, cellProperties) {
var escaped = Handsontable.helper.stringify(value);
escaped = strip_tags(escaped, '<em><b><strong><a><big>'); //be sure you only allow certain HTML tags to avoid XSS threats (you should also remove unwanted HTML attributes)
td.innerHTML = escaped;
return td;
};
function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
if (parseInt(value, 10) < 0) { //if row contains negative number
td.className = 'negative'; //add class "negative"
}
if (!value || value === '') {
td.style.background = '#EEE';
}
};
Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer); //maps function to lookup string
var container = document.getElementById('hot');
var hot = new Handsontable(container,
{
data: [],
dataSchema: {course_id: null, class_date: null, sponsor_name: null, title: null, subject: null, description: null, hours_preparation: null, hours_presentation: null, hours_semester: null, hours_quarter: null, hours_earned: null, price: null, link: null},
columns: [{
data: "course_id",
placeholder: placeHolders.course_id
},{
data: "class_date",
placeholder: placeHolders.class_date
},{
data: "sponsor_name",
placeholder: placeHolders.sponsor_name
},{
data: "title",
placeholder: placeHolders.title
},{
data: "subject",
placeholder: placeHolders.subject
},{
data: "description",
placeholder: placeHolders.description
},{
data: "hours_preparation",
placeholder: placeHolders.hours_preparation
},{
data: "hours_presentation",
placeholder: placeHolders.hours_presentation
},{
data: "hours_semester",
placeholder: placeHolders.hours_semester
},{
data: "hours_quarter",
placeholder: placeHolders.hours_quarter
},{
data: "hours_earned",
placeholder: placeHolders.hours_earned
},{
data: "price",
placeholder: placeHolders.price
},{
data: "link",
placeholder: placeHolders.link
} ],
startRows: 25,
startCols: 13,
currentRowClassName: 'currentRow',
currentColClassName: 'currentCol',
autoColumnSize: true,
autoRowSize: true,
autoWrapCol: true,
autoWrapRow: true,
rowHeaders: true,
colWidths: [50,50,50,50,50,50,50,50,50,50,50,50,50],
colHeaders: ["Course<br/>Id", "Class<br/>Date", "Sponsor<br/>Name", "<br/>Title", "<br/>Subject", "<br/>Description", "Hours<br/>Preparation", "Hours<br/>Presentation", "Hours<br/>Semester", "Hours<br/>Quarter", "Hours<br/>Earned", "<br/>Price", "<br/>Link"],
stretchH: 'all',
maxRows: 25,
minRows: 25,
minSpareRows: 1,
contextMenu: true,
contextMenuCopyPaste: {
swfPath: "assets/ZeroClipboard.swf"
},
onSelection: function (row, col, row2, col2) {
var meta = this.getCellMeta(row2, col2);
if (meta.readOnly) {
this.updateSettings({fillHandle: false});
}
else {
this.updateSettings({fillHandle: true});
}
},
cells: function (row, col, prop) {
var cellProperties = {};
if (row === 26 || this.instance.getData()[row][col] === 'readOnly') {
cellProperties.readOnly = true; //make cell read-only if it is first row or the text reads 'readOnly'
}
else {
cellProperties.renderer = "negativeValueRenderer"; //uses lookup map
}
return cellProperties;
},
columns: [
{data: "course_id", type: 'text', renderer: safeHtmlRenderer},
//'text' is default, you don't actually have to declare it
{data: "class_date", type: 'date', renderer: safeHtmlRenderer},
{data: "sponsor_name", type: 'text', renderer: safeHtmlRenderer},
{data: "title", type: 'text', renderer: safeHtmlRenderer},
{data: "subject", type: 'text', renderer: safeHtmlRenderer},
{data: "description", type: 'text', renderer: safeHtmlRenderer},
{data: "hours_preparation", type: 'numeric', renderer: safeHtmlRenderer},
{data: "hours_presentation", type: 'numeric', renderer: safeHtmlRenderer},
{data: "hours_semester", type: 'numeric', renderer: safeHtmlRenderer},
{data: "hours_quarter", type: 'numeric', renderer: safeHtmlRenderer},
{data: "hours_earned", type: 'numeric', renderer: safeHtmlRenderer},
{data: "price", type: 'numeric', renderer: safeHtmlRenderer},
{data: "link", type: 'text', renderer: safeHtmlRenderer}
]
});
答案 0 :(得分：0)
我认为您想要的是设置占位符的标准方法，如下所示：
如果查看HOT文档，您会发现对于像您这样的高级任务，设置columns选项非常重要。这是一个对象数组，其中每个对象都是具有其属性的列。在您的情况下，您需要将属性placeholder设置为您想要的字符串，或者根据您决定需要的函数将其设置为函数。
下面是我为每列设置不同占位符的示例。