Question

name : {

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

 }

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

Answer 1

目前Jtable插件中没有此类功能，但您可以通过在jquery.jtable.js文件中添加代码来添加它，只需按照以下步骤操作：

第1步：搜索_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'
}

Answer 2

在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');

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

2 个答案: