如何在 jtable 字段中添加占位符答案

【问题标题】：How can I add placeholder in jtable field如何在 jtable 字段中添加占位符
【发布时间】：2016-06-13 12:54:05
【问题描述】：

name : {

    title : 'Name',
    width : '12%',
    sorting : true,
    searchable : true

 }

在这里我想添加一个占位符，建议按名称搜索。

【问题讨论】：

请查看How to ask question，以便更好地提出您的问题。

标签： jquery jquery-jtable

【解决方案1】：

如果是formCreated，您可以为该字段添加attr('placeholder','Whatever you want...')。

例子：

formCreated: function (event, data) {
            data.form.width('400px'),
            data.form.find('input[name="field_name"]').attr('placeholder','Put here your message');

【讨论】：

【解决方案2】：

Jtable插件目前没有该功能，可以通过在jquery.jtable.js文件中添加代码来添加，步骤如下：

第一步：搜索_normalizeFieldOptions，你会得到以下代码

_normalizeFieldOptions: function (fieldName, props) {
        if (props.listClass == undefined) {
            props.listClass = '';
        }
        if (props.inputClass == undefined) {
            props.inputClass = '';
        }
        //add if condition here for placeholder change

        //Convert dependsOn to array if it's a comma seperated lists
        if (props.dependsOn && $.type(props.dependsOn) === 'string') {
            var dependsOnArray = props.dependsOn.split(',');
            props.dependsOn = [];
            for (var i = 0; i < dependsOnArray.length; i++) {
                props.dependsOn.push($.trim(dependsOnArray[i]));
            }
        }
    },

您需要为占位符添加一个if条件，只需将以下代码替换为上面的代码

_normalizeFieldOptions: function (fieldName, props) {
    if (props.listClass == undefined) {
        props.listClass = '';
    }
    if (props.inputClass == undefined) {
        props.inputClass = '';
    }
    if (props.placeholder == undefined) {
        props.placeholder = '';
    }//- for placeholder change


    //Convert dependsOn to array if it's a comma seperated lists
    if (props.dependsOn && $.type(props.dependsOn) === 'string') {
        var dependsOnArray = props.dependsOn.split(',');
        props.dependsOn = [];
        for (var i = 0; i < dependsOnArray.length; i++) {
            props.dependsOn.push($.trim(dependsOnArray[i]));
        }
    }
},

这段代码是什么意思？这是因为如果选项中没有定义占位符，那么它将被视为空字符串。

第 2 步：现在您需要在文本框字段中添加占位符。所以搜索_createTextInputForField，你会得到如下代码

_createTextInputForField: function (field, fieldName, value) {
    var $input = $('<input class="' + field.inputClass + '" id="Edit-' + fieldName + '" type="text" name="' + fieldName + '"></input>'); //change this line for placeholder
    if (value != undefined) {
        $input.val(value);
    }

    return $('<div />')
        .addClass('jtable-input jtable-text-input')
        .append($input);
},

改变占位符函数的第一行

var $input = $('<input class="' + field.inputClass + '" placeholder="' + field.placeholder + '" id="Edit-' + fieldName + '" type="password" name="' + fieldName + '"></input>');

第 3 步：对 _createTextAreaForField 重复第 2 步 - 将占位符添加到 Textarea 字段

就是这样！现在您可以添加占位符选项：

name : {
    title : 'Name',
    width : '12%',
    sorting : true,
    searchable : true,
    placeholder:'placeholder text'
}

【讨论】：