编辑单元格时如何在 YUI 中显示字符数？

Question

在 YUI 数据表中，我想限制用户可以在其中一个单元格中键入的字符数。我知道如何使用格式化程序正确显示金额，但是有没有一种简单的方法可以更改编辑器框以显示“124/500”字符数限制？

Answer 1

您必须创建自定义 CellEditor 并重写 renderForm 方法如下

(function() {
    var Ylang   = YAHOO.lang,
        Ywidget = YAHOO.widget;

    YAHOO.namespace("yoshi");

    var yoshi = YAHOO.yoshi;

    yoshi.CustomInputText = function(settings) {
        yoshi.CustomInputText.superclass.constructor.call(this, settings);

        this.initializer(settings);
    }

    YAHOO.extend(yoshi.CustomInputText, Ywidget.TextboxCellEditor, {
         _LABEL_CLASS:"yoshi-label",
         min:null,
         max:null,
         initializer:function(settings) {
             this.min = (settings && settings.min) || null;
             this.max = (settings && settings.max) || null;
         },
         renderForm:function() {
             var pElement;
             if(Ylang.isValue(this.min) || Ylang.isValue(this.max)) {
                 pElement = document.createElement("p");

                 var minLabel = "";
                 if(Ylang.isValue(this.min)) {
                     minLabel = "min[" + this.min +  "]";
                 }

                 var maxLabel = "";
                 if(Ylang.isValue(this.max)) {
                     minLabel = "max[" + this.max +  "]";
                 }

                 pElement.innerHTML = minLabel + maxLabel;
                 pElement.className = this._LABEL_CLASS;

                 this.getContainerEl().appendChild(pElement);
             }

             yoshi.CustomInputText.superclass.renderForm.call(this);
         }
    })
})();

注意我定义了一个特定的_LABEL_CLASS，您可以在其中提供自定义CSS类

.yoshi-label {
    /* Set up custom CSS right here */
}

现在创建列设置时

var yoshi = YAHOO.yoshi;

editor:new yoshi.CustomInputText({min:124,max:500});