Question

情景：

将新行添加到表格中，并将单元格作为空输入字段公开给用户（即＆＃34;内联＆＃34;编辑） - 看起来像这样...... 即，

enter image description here

然后用户在输入字段中输入数据 - 看起来像这样...... 即，

enter image description here

当用户点击＆＃34;完成＆＃34;按钮，我将输入字段转换为纯文本，反映输入的值 - 看起来像这样...... 即，

enter image description here

注意 - 在视觉上 - 表格出现＆＃34;更新＆＃34; ...但是，当我使用＆＃34; row（）。data（）＆＃34;用于显示行内容的函数，没有与单元格关联的值。

enter image description here

所以，我可以看到我没有传达给＆＃34;数据表＆＃34;行的单元格值已更改的对象。 - 但是，很明显表/ html确实包含新的单元格值。

问题：我怎样才能刷新＆＃34;或者＆＃34;更新＆＃34;数据表对象/小部件，以便它识别新值？

（注意：我希望使用新的API完成此操作 - 但是，文档不够清晰，无法理解）

感谢您的帮助！

下面是完整的jquery / javascript - 如果您认为它可能有用......

    var jq = jQuery.noConflict();
    var $contextPath;

    jq(document).ready(function ()
    {
        var jq = jQuery.noConflict();
        $contextPath = jq("#contextPath").val();

        jq('table').click(function(e) {
            e.preventDefault();        

            //...collect the clicked "tag name" and use it to determine what to do...
            var tagName = e.target.tagName;

            if (tagName === "BUTTON")
            {
                if (jq(e.target).html()=== 'Edit')
                {
                    //...get list of previous "sibling" td's...
                    var editCellList = jq(e.target).parent().prevAll();

                    //...iterate over list and replace plain html text with "input" tag - use plain html text as initial value...                
                    editCellList.each(function(e)
                    {
                        jq(this).html("<input type='text' value='" + jq(this).html() + "' />");
                    });

                    //...change/toggle the button title from "Edit" to "Save"... 
                    jq(e.target).html('Done');
                }
                else
                {   
                    //...change/toggle the button title from "Save" to "Edit"...                 
                    jq(e.target).html('Edit');

                    //...get list of previous "sibling" td's...                
                    var saveCellList = jq(e.target).parent().prevAll();

                    //...iterate over list and convert "input" tag value to plain html text...                    
                    saveCellList.each(function(e)
                    {
                        jq(this).html(jq(this).find(">:first-child").val());
                    });

                    jq(this).draw();
                }
            }
        });

        jq("#submitForm").click(function () {
            alert(JSON.stringify(jq("#page0Form").serialize()));
            jq.post("page0/submitForm", jq("#page0Form").serialize());
        });

        //...just  hardcoded this button as a test to "see" the contents of the new row..
        jq("#gridDataTest").click(function () {
            var d = page0grid.row(2).data();
            alert(JSON.stringify(d));
        });

        var page0grid = jq('#page0grid').DataTable({
            "ajax": $contextPath + "/page0/testGridList",
            "columns": [
                {"title": "ID",      "data": "id",          "visible": false    },          
                {"title": "Field A", "data": "fieldAStrg"                       },
                {"title": "Field B", "data": "fieldBStrg"                       }
            ],
            "columnDefs": [{
                    "targets": 3,
                    "data": null,
                    "defaultContent": "<button class='edit'>Edit</button>"
                }],
            "info": false,
            "searching": false,
            "bPaginate": false,
            "scrollY": 600,
            "bLengthChange": false,
            "bScrollCollapse": true,
            "autoWidth": true,
            "order": [[ 0, 'desc' ]],
            "bSort": false
        });

        jq('#addNew').click(function () {

            var buttonTitleArray = jq('#page0grid tbody > tr > td > button').map(function(){
                return jq(this).html();
            }).get();

            if(jq.inArray("Done", buttonTitleArray )===-1)
            {
                var pos = jq('#page0grid tbody > tr').length;
                var rowNode = page0grid.row.add(
                {
                    "id":"",
                    "fieldAStrg":"", 
                    "fieldBStrg":""
                }, pos).draw().node(); 

                jq(rowNode).find("button").trigger("click");
            }
        });

    });

下面是JSP文件，如果你认为它会有所帮助（显然不使用任何taglib）......

    <%@taglib prefix="c"        uri="http://java.sun.com/jstl/core_rt" %>
    <%@taglib prefix="form"     uri="http://www.springframework.org/tags/form" %>
    <%@taglib prefix="spring"   uri="http://www.springframework.org/tags" %>
    <%@taglib prefix="fmt"      uri="http://java.sun.com/jsp/jstl/fmt" %>  

    <form id="page0Form" >

        <div class='panel panel-primary'>
            <div class='panel-heading'>
                <h6 class='panel-title'>page0grid</h6>
            </div>    
            <div class='panel-body table-responsive' style='padding:0;'>    
                <table class="table table-striped table-hover" id="page0grid"></table>
            </div>
        </div>         

        <button type="button" id="addNew" class="btn btn-primary">Add New</button>
        <button type="button" id="gridDataTest" class="btn btn-success">TEST</button>

    </form>

Answer 1

将更改的数据传递到row().data()

var tr = jq(e.target).closest("tr");
var saveCellList = jq(e.target).parent().prevAll();

page0grid.row(tr).data(saveCellList.map(function() {
    return jq(this).find(">:first-child").val();
}).get()).draw();

Answer 2

这是我到达的解决方案（经过一些抓握和刮擦） - 您可以与上面的相应代码进行比较，看看我改变了什么......

我认为可能被视为黑客攻击（我不是数据表专家） - 但是，它似乎工作得很充分...... （当然，任何有关使它更优雅，更有效等的建议都是受欢迎的）

再次感谢所有阅读并回复我帖子的人！

    -
    -
    -
    else
    {   
        //...change/toggle the button title from "Save" to "Edit"...                 
        jq(e.target).html('Edit');

        //...get list of previous "sibling" td's...                
        var saveCellList = Array.prototype.reverse.call(jq(e.target).parent().prevAll());    //...to reverse order?...               

        var ri = jq(e.target).closest("tr").index();

        for (i=0;i<saveCellList.length;i++)
        {
            var cv =jq(saveCellList[i]).find(">:first-child").val();
            dt.cell(ri, i+1).data(cv);
        }

        jq(this).DataTable().draw();
    }
    -
    -
    -

enter image description here

如果你觉得它会有所帮助，下面是整个javascript ......

    var jq = jQuery.noConflict();
    var $contextPath;

    jq(document).ready(function ()
    {
        var jq = jQuery.noConflict();

        $contextPath = jq("#contextPath").val();

        jq('table').click(function(e) {

            var dt = jq(this).DataTable();
            e.preventDefault();        

            //...collect the clicked "tag name" and use it to determine what to do...
            var tagName = e.target.tagName;

            if (tagName === "BUTTON")
            {
                if (jq(e.target).html()=== 'Edit')
                {
                    //...get list of previous "sibling" td's...
                    var editCellList = jq(e.target).parent().prevAll();

                    //...iterate over list and replace plain html text with "input" tag - use plain html text as initial value...                
                    editCellList.each(function(e)
                    {
                        jq(this).html("<input type='text' value='" + jq(this).html() + "' />");
                    });

                    //...change/toggle the button title from "Edit" to "Save"... 
                    jq(e.target).html('Done');
                }
                else
                {   
                    //...change/toggle the button title from "Save" to "Edit"...                 
                    jq(e.target).html('Edit');

                    //...get list of previous "sibling" td's...                
                    var saveCellList = Array.prototype.reverse.call(jq(e.target).parent().prevAll());    //...to reverse order?...               

                    var ri = jq(e.target).closest("tr").index();

                    for (i=0;i<saveCellList.length;i++)
                    {
                        var cv =jq(saveCellList[i]).find(">:first-child").val();
                        dt.cell(ri, i+1).data(cv);
                    }

                    jq(this).DataTable().draw();
                }
            }
        });


        jq("#submitForm").click(function () {
            alert(JSON.stringify(jq("#page0Form").serialize()));
            jq.post("page0/submitForm", jq("#page0Form").serialize());
        });

        jq("#gridDataTest").click(function () {
            var d = page0grid.row(2).data();
            alert(JSON.stringify(d));
        });


        var page0grid = jq('#page0grid').DataTable({
            "ajax": $contextPath + "/page0/testGridList",
            "columns": [
                {"title": "ID",      "data": "id",          "visible": false    },          
                {"title": "Field A", "data": "fieldAStrg"                       },
                {"title": "Field B", "data": "fieldBStrg"                       }
            ],
            "columnDefs": [{
                    "targets": 3,
                    "data": null,
                    "defaultContent": "<button class='edit'>Edit</button>"
                }],
            "info": false,
            "searching": false,
            "bPaginate": false,
            "scrollY": 600,
            "bLengthChange": false,
            "bScrollCollapse": true,
            "autoWidth": true,
            "order": [[ 0, 'desc' ]],
            "bSort": false
        });

        jq('#addNew').click(function () {


            var buttonTitleArray = jq('#page0grid tbody > tr > td > button').map(function(){
                return jq(this).html();
            }).get();

            if(jq.inArray("Done", buttonTitleArray )===-1)
            {
                var rowIndex = jq('#page0grid tbody > tr').length;
                console.log("row index(?)...:[" + rowIndex + "]"); 

                var rowNode = page0grid.row.add(
                {
                    "id": "NEW" + jq.now(),
                    "fieldAStrg":"", 
                    "fieldBStrg":""
                }, rowIndex).draw().node(); 

                console.log("addNew...row data at index rowIndex=" + page0grid.cell(rowIndex,0).data());            

                jq(rowNode).find("button").trigger("click");
            }
        });
    });

如何“刷新”或“更新”数据表对象/窗口小部件以便识别新的单元格值？

2 个答案:

如果你觉得它会有所帮助，下面是整个javascript ......