0

我正在使用jquery-datatables-editable并尝试设置在更新时发布的值。
根据文档，这可以通过设置sName属性（属于aoColumns）来完成。
我尝试按照示例进行操作，都在 aoColumns 和 aoColumnDefs 中定义，但都没有成功。

有任何想法吗？
代码示例；

鉴于：

<?php
<div>
    <button id="p_btnAddNewRow">Add</button>
    <button id="p_btnDeleteRow">Delete</button>

    <div id="p-container">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="p-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Notes</th>
                </tr>
            </thead>
            <tbody>
                <?php
                if (isset($p['primary']) && is_array($p['primary']) && (count($p['primary']) > 0)) {
                    foreach ($p['primary'] as $primary) {
                ?>
                <tr id="<?php echo $primary->id; ?>">
                    <td><?php echo $primary->code; ?></td>
                    <td><?php echo $primary->name; ?></td>
                    <td><?php echo $primary->notes; ?></td>
                </tr>
                <?php
                    }
                }
                ?>
            </tbody>
        </table>
    </div>
</div>
?>

JS；

<script type="text/javascript">

var pTable;
$(function() {
    pTable = $('#primary-audiences-table').dataTable().makeEditable({
        sAddNewRowFormId: "p_formAddNewRow",
        sAddNewRowButtonId: "p_btnAddNewRow",
        sAddURL: "/templates/ptable/add",
        fnOnNewRowPosted: function(data) {
                            if(data.indexOf("Error", 0) == 0) {
                                //Show error message
                                return false;
                            } else {
                                //Show success message and add row
                                return true;
                            }
                        },
        sUpdateURL: "/templates/ptable/edit",
        sDeleteRowButtonId: "p_btnDeleteRow",
        sDeleteURL: "/templates/ptable/delete",
        "aoColumns": [
                        {
                            sName: 'code',
                            indicator: 'Saving ID...',
                            tooltip: 'Double Click to edit',
                            type: 'textarea',
                            submit: 'Save changes'
                        },
                        {
                            sName: 'name',
                            indicator: 'Saving name...',
                            tooltip: 'Double Click to edit',
                            type: 'textarea',
                            submit: 'Save changes'
                        },
                        {
                            sName: 'notes',
                            indicator: 'Saving notes...',
                            tooltip: 'Double Click to edit',
                            type: 'textarea',
                            submit: 'Save changes'
                        }
                ]
    });
});

示例响应（$_POST 的 print_r）：

(
    [value] => test
    [id] => 2784
    [rowId] => 0
    [columnPosition] => 0
    [columnId] => 0
    [columnName] => ID <- should be **code**
)
4

1 回答 1

0

我找到了答案：给程序员多喝咖啡（就是我）并正确阅读文档！！

sName属性关联到dataTables扩展，而不是makeEditable扩展。文档中的示例确实显示了这一点，但我未能正确阅读；我的错。

因此，正确的写法是；

<script type="text/javascript">

var pTable;
$(function() {
    pTable = $('#primary-audiences-table').dataTable({
        aoColumns: [ {"sName": "code"}, {"sName": "name"}, {"sName": "notes"} ]
    }).makeEditable({
        sAddNewRowFormId: "p_formAddNewRow",
        sAddNewRowButtonId: "p_btnAddNewRow",
        sAddURL: "/templates/ptable/add",
        fnOnNewRowPosted: function(data) {
                            if(data.indexOf("Error", 0) == 0) {
                                //Show error message
                                return false;
                            } else {
                                //Show success message and add row
                                return true;
                            }
                        },
        sUpdateURL: "/templates/ptable/edit",
        sDeleteRowButtonId: "p_btnDeleteRow",
        sDeleteURL: "/templates/ptable/delete",
        "aoColumns": [
                        {
                            indicator: 'Saving ID...',
                            tooltip: 'Double Click to edit',
                            type: 'textarea',
                            submit: 'Save changes'
                        },
                        {
                            indicator: 'Saving name...',
                            tooltip: 'Double Click to edit',
                            type: 'textarea',
                            submit: 'Save changes'
                        },
                        {
                            indicator: 'Saving notes...',
                            tooltip: 'Double Click to edit',
                            type: 'textarea',
                            submit: 'Save changes'
                        }
                ]
    });
});

</script>
于 2012-12-05T08:52:57.323 回答