jQuery DataTables Editable - 如果值为空，则只读

Question

我正在使用jQuery DataTables Editable来编辑表格中的数据（使用jQuery 1.7.2）。这些数据是从一个Asp.net web服务获取的（请参见下面的代码）。

当某个值为空时（例如，如果列表中的某个项目没有类别），我不希望该特定项目的类别可编辑。因此，该项目的类别应为只读。我找不到实现此功能的方法，这是否可能？

<table id="admin_list" cellpadding="0" cellspacing="0" border="0">
    <thead>
        <tr>
            <th>Title</th>
            <th>Category</th>
        </tr>                
    </thead>
    <tbody>
    </tbody>
</table>

<script type="text/javascript">
$(document).ready(function () {
    function renderTable(result) {
        var dtData = [];
        $.each(result, function () {
            dtData.push([
                this.title,
                this.category
            ]);
        });

        $('#admin_list').dataTable({
            'aaData': dtData
        }).makeEditable({
            sReadOnlyCellClass: "read_only",
            sUpdateURL:"Service.svc/update",
            "aoColumns":
            [
                {}, //title
                {} //category
            ]
        });
    }

    $.ajax({
        type: "GET",
        url: "Service.svc/list",
        dataType: "json", cache: false, data: {}, contentType: "application/json; charset=utf-8",
        success: function (data) {
            renderTable(data.d);
        },
        error: function (data) {}
    });
});
</script>

- Martin

Answer 1

是的，有一个解决方案。我还提供了一个示例。

function renderTable(result) {
    var dtData = [];
    $.each(result, function () {
        dtData.push([
            this.title,
            this.category ? this.category : " "
        ]);
    });

    $('#admin_list').dataTable({
        'aaData': dtData
    }).makeEditable();
}
$.ajax({
    type: "GET",
    url: "Service.svc/list",
    dataType: "json", cache: false, data: {}, contentType: "application/json; charset=utf-8",
    success: function (data) {
        renderTable(data.d);
    },
    error: function (data) {}
});
​
$("#admin_list tr").live("mousedown", function() {
    console.log($(this).find("td:eq(1)").text());
    if (/^(?:\s+|Click to edit)?$/.test($(this).find("td:eq(1)").text())) {
        $(this)
            .find("td:eq(1)")
            .empty()
            .unbind();
    }
});

- noob

---

谢谢！只是为了确保我解释得正确：如果该行的类别为空，我想禁用特定行的“类别”列的编辑。这段代码能解决这个问题吗？ - Martin

我认为我们彼此误解了。您说的“row”是指水平列对吗？而我指的是每个垂直行。因此，如果一行有一个类别列且该类别为空，则我不应该能够编辑该行的类别，但我仍然需要能够编辑其他行的类别。我该怎么做呢？ - Martin

@Martin 对于你的第一条评论，是的，它会修复那个问题。 - noob