InPlaceEditor组件中的新行不可编辑

时间:2012-06-28 16:17:02

标签: jquery datatables tapestry jeditable

我是JQuery和挂毯的新手...... 我的意思是向我的InPlaceEditor添加一个新行,然后使用以下内容使其可编辑:

$(document).ready(function () {
    $("#addnewrow").click(function () {

        var prompt = "Please enter new data";
        var oTable = $("#datatable").dataTable();
        var a = oTable.fnAddData([prompt , "Yes" ]);
        var erow = oTable.fnSettings().aoData[ a[0] ].nTr
        oTable.fnUpdate( erow.getElementsByTagName("td")[0].innerText, erow, 0, false );
        oTable.fnUpdate( erow.getElementsByTagName("td")[1].innerText, erow, 1, false );
        oTable.fnDraw();

         return false;
    });
});

但我刚添加的新行不可编辑!

在互联网上阅读我发现问题的解决方案: (http://bit.ly/KNf92c)

  1. 将jEditable事件控制器添加到新行
  2. 使用jQuery的live()选项(http://docs.jquery.com/Events/live)将可编辑事件分配给行
  3. 添加一行后重新初始化jeditable。
  4. 我怎样才能以挂毯的方式做到这一点?

1 个答案:

答案 0 :(得分:0)

好的,经过更多的研究,我发现自己离开了。我为不清楚而道歉。我真的想发布我的解决方案,因为我在互联网的许多地方看到了同样的问题而没有具体的解决方案。

以下允许我向我的数据表添加一个新行并使其可以使用JEditable进行编辑并让我的tapestry页面类通过Tapestry-JQuery InPlaceEditor处理新添加的数据(我意识到这不是专有的挂毯)。

另外值得注意的是,如果我有一个名为foo.java的页面类,并且在我的页面类中有一个名为“bar”的函数,那么通过链接引用它的挂毯方式是“./foo:bar”。

干杯


在clientprequalificationlist.js中:

$(document).ready(function () {
$("#addnewrow").click(function () {

    //Create a new row for our datatable
    var prompt = "Please enter new data";
    var oTable = $("#datatable").dataTable();
    var rowData = oTable.fnAddData([prompt , "Yes" ]);

    //Make new row editable
    var oSettings = oTable.fnSettings();
    $('td', oSettings.aoData[ rowData[0] ].nTr).editable('./clientprequalificationlist:setPrequalification' , {
        callback:function (value, settings) {
                $(this).editable("destroy");
        },
        "type" : "text",
        "tooltip" : "Click to edit...",
        submit : "Save",
        cancel:"Cancel",
        "onblur":"cancel",
        "submitdata":function (value, settings) {
            return {
                "row_id":this.parentNode.getAttribute('id'),
                "column":oTable.fnGetPosition(this)[2]
            };
        }
    });

    return false;
});
});

在clientprequalificationlist.java中:

@OnEvent(component = "Prequalification", value = InPlaceEditor.SAVE_EVENT)
void setPrequalification(int id, String value)
{
    if( value.equals("Please enter new data"))
    {
        alertManager.alert(Duration.TRANSIENT, Severity.INFO, "The new client prequalification was not saved. Please enter new data.");
        return;
    }
    ClientPrequalification clientPrequalification = companyLogic.getClientPrequalificationByID(id);

    if (clientPrequalification == null){
        clientPrequalification =  new ClientPrequalification();
    }

    clientPrequalification.setPrequalification(value);
    companyLogic.storeClientPrequalification(clientPrequalification);
}

在clientprequalificationlist.tml中:

<t:form t:id="Prequal" t:autofocus="true">
<t:alerts/>
<t:jquery.datatable
        model="Model"
        source="Source"
        row="row"
        options="Options"
        mode="literal:false"
        exclude="clientPrequalificationId">

    <p:prequalificationCell>
        <div t:id="prequalification"
             t:type="jquery/inPlaceEditor"
             value="row.prequalification"
             t:context="row.clientPrequalificationId"/>
    </p:prequalificationCell>

    <p:enabledCell>
        <t:eventlink t:id="toggle" context="row.clientPrequalificationId">${row.enabled}</t:eventlink>
    </p:enabledCell>
</t:jquery.datatable>

</t:form>

 <a class="btn btn-primary" href="#" id="addnewrow"><i class="icon-lock icon-white"/>  Add Client Prequalification</a>