jEditable - 使用下拉列表编辑数据

时间:2011-07-21 07:16:34

标签: jquery asp.net-mvc-3 datatables jeditable

我使用Datatables + jEditable来显示数据库中的数据,并允许用户直接编辑每个单元格。

目前我能够实现内联编辑并将更新后的值保存回文本字段的数据库以及datepicker,但是,我遇到了需要允许编辑的数据问题。

我需要编辑的值是通过外键关系从另一个db表中检索。

 <td id="type@(item.FoodID)" class="dropdown">
     @Html.DisplayFor(modelItem => item.FoodTypes.FoodTypeName)
 </td>

我按照http://gunbladeiv.blogspot.com/2011/06/part-2-mvc-3-and-datatables-with-inline.html的指南使用操作返回Json的选择列表:

 function getFoodTypesList() {
    var list;
    $.post('GetFoodTypes', {},
        function (data) {
            list = validateJSON(data);
        },
        'json/javascript'
    );
    return list;
}

function validateJSON(x) {
    var orig = x;
    var stgify = JSON.stringify(orig);
    var splitchar = ['\\"', '\',\'', '[', ']', '\"'];
    var joinchar = ['\'', '\':\'', '', '', ''];

    for (i = 0; i < 5; i++) {
        stgify = stgify.split(splitchar[i]);
        tmp = stgify.join(joinchar[i]);
        stgify = tmp;
    }
    stgify = "{" + stgify + "}";
    var finalEdit = stgify;
    return finalEdit;
} 

问题:我不明白“validateJson”方法的用途是什么,但我将其作为示例包含在内

当我尝试点击该字段时,我从firebug收到一个javascript错误:“xxx”未定义(xxx是foodtypename)

如果我将视图更改为:

<td id="type@(item.FoodID)" class="dropdown">
    @Html.DisplayFor(modelItem => item.FoodTypeID)
</td>

错误消失但我得到一个空的下拉列表。

真的需要一些帮助......

1 个答案:

答案 0 :(得分:0)

我能够根据我的情况及其工作修改validateJson函数!如果有人在寻找解决方案,我会在这里发布我的方法:

// Function to format the food type list into plugin required json format
function validateJSON(x) {
    var orig = x;

    // Split and cover each array item with "" and then join with :
    for (i = 0; i < orig.length; i++) {
        var temp = orig[i].toString();
        var tempArray = temp.split(",");
        for (j = 0; j < tempArray.length; j++) {
            tempArray[j] = "\"" + tempArray[j].toString() + "\"";
        }
        orig[i] = tempArray.join(":");
    }

    // Original validateJson method get from website
    var stgify = JSON.stringify(orig);
    var splitchar = ['\\"', '\',\'', '[', ']', '\"'];
    var joinchar = ['\'', '\':\'', '', '', ''];

    for (i = 0; i < 5; i++) {
        stgify = stgify.split(splitchar[i]);

        tmp = stgify.join(joinchar[i]);
        stgify = tmp;
    }

    stgify = "{" + stgify + "}";
    var finalEdit = stgify;
    return finalEdit;
}