0

我对大约 30-40 个不同类型的字段使用 jeditable，这就是为什么我必须编写一些块

$(".editable-...type of element...").editable(method, {parameters})

对于我在表单中拥有的不同类型的元素（字符串、整数、不同的下拉菜单）。例如，这是字符串的一个：

$(".editable-jedit-string").editable("/Controller/Method",
    {
        submitdata: {
            ItemId: '@ViewData["ItemId"]'
        },
        cssclass: 'inherit',
        indicator: 'wird gespeichert...',
        style: 'display:inline',
        height: '15px',
        width: '150px',
        placeholder: '<span class="muted">Zum Bearbeiten doppelklicken...</span>',
        tooltip: 'Zum Bearbeiten doppelklicken...',
        event: 'dblclick',
        submit: '<button class="btn btn-mini btn-primary btn-forced-margin" type="submit" >OK</button>'
    });

和下拉

**$(".editable-jedit-string-welle")**.editable("/Controller/Method",
    {
        submitdata: {
            ItemId: '@ViewData["ItemId"]'
        },
        **data: " {'A':'A','B':'B','C':'C'}",**
        type: "select",
        cssclass: 'inherit',
        indicator: '<span class="muted">wird gespeichert...</span>',
        style: 'display:inline',
        height: '15px',
        **width: '15px',**
        placeholder: '<span class="muted">Zum Bearbeiten doppelklicken...</span>',
        tooltip: 'Zum Bearbeiten doppelklicken...',
        event: 'dblclick',
        submit: '<button class="btn btn-mini btn-primary btn-forced-margin" type="submit" >OK</button>'
    });

因此，大多数参数一直重复，而有些参数（我在这里尝试将它们加粗，但它们用星号表示......）是不同的。

我的问题是，如何使代码更紧凑？我有大约 6 个这样的声明，我认为可以重构代码以使其看起来更好。

我可以为所有可重复元素（按钮声明、标签、样式）创建参数，但是我仍然必须声明 .editable() 六次...我想知道是否可以声明 $(.class).editable () 一次然后改变里面的参数吗？这样，我可以先声明所有可重复的参数，然后遍历元素并添加额外的数据......

任何想法表示赞赏！

4

2 回答 2

0

您可以先使用所有默认选项创建一个对象，然后用于$.extend()合并更改/新属性。

var myDefaults = {
    submitdata: {
        ItemId: '@ViewData["ItemId"]'
    },
    cssclass: 'inherit',
    indicator: 'wird gespeichert...',
    style: 'display:inline',
    height: '15px',
    width: '150px',
    placeholder: '<span class="muted">Zum Bearbeiten doppelklicken...</span>',
    tooltip: 'Zum Bearbeiten doppelklicken...',
    event: 'dblclick',
    submit: '<button class="btn btn-mini btn-primary btn-forced-margin" type="submit" >OK</button>'
};

$(".selector").editable("/Controller/Method", $.extend(true, {}, myDefaults, {
    data: " {'A':'A','B':'B','C':'C'}",
    width: '15px'
});

$.extend() 语法有点棘手，所以你可以使用.bind()来滚动你自己的。

// create a function with your default parameters for $.extend()
var editableParams = $.extend.bind({}, true, {}, myDefaults); 

// usage
$(".selector").editable("/Controller/Method", editableParams({
    data: " {'A':'A','B':'B','C':'C'}",
    width: '15px'
});

演示在http://jsfiddle.net/6GQ9Y/

$.extend()http://api.jquery.com/jQuery.extend/上的文档

.bind()参考（和垫片）：https ://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

更新

上面的 .bind() 方法基本上只是一种创建新函数的奇特方式。然而，它似乎在IE 8 和更早版本中不受支持。使用以下代码可以实现相同的“快捷方式”：

function editableParams(options) {
    return $.extend(true, {}, myDefaults, options);
}
于 2013-04-16T07:06:29.417 回答
0

您可以将公共属性提取到公共对象中。

var defaultEditableConfig = {
    width: 15px,
    height: 15px,
    ...
}

进而

$('.editable-class').editable($.extend({}, defaultEditableConfig, {
    data: { 'A' : 'a', 'B' : 'b' }
});

当然，您可以将其包装在实用方法或其他东西中，以便使用以下签名更轻松地调用：

makeEditable(jQueryElementString, options);
于 2013-04-16T07:09:00.963 回答