jQuery：对表内部行进行内联编辑

Question

我是jquery和datatable的新手。 我为“联系人”开发了可编辑的数据表，其中每一行代表一个联系人。 每个“联系人”都有一些与之关联的“动作”。

当用户单击特定的“联系人”时，关联的“动作”显示为该特定联系人下的其他行。

现在，我要使“联系人”行和“动作”行都可编辑。 我已经使用了“ jEditable”插件，并且可以将“ contact”行设置为可编辑而不是“ action”行。 任何想法或帮助将不胜感激。

userInfo = "<table id='mycontacttable'><thead><tr><th></th><th>FirstName</th><th>FamilyName</th></tr></thead><tbody> ";
              /*constructing the Contact table, at this stage without the actions.*/
              for(i =0 ; i < response.result.length ; i++){
                  var contactid=response.result[i].contactID;
                  userInfo += "<tr><td>"+ 
                  "<img src=\"../javascript/datatables/media/images/details_open.png\" rel="+contactid+" alt=\"expand/collapse\"></td>"+
                  "<td>"+ response.result[i].givenName + "</td><td>" + response.result[i].familyName+"</td></tr> ";
              }
              userInfo +=  "</tbody></table> ";



              $('#info').html("The following are your contacts. " + userInfo);

              /*setting the sortable and unsortable columns*/
              oTable= $('#mycontacttable').dataTable({
                  "iDisplayLength": 25,

                  "bSort": true,

                  "aoColumns": [ 
                                { "bSortable": false },//Disable sorting on this column
                                null,
                                null

                                ]
              }).makeEditable();


              /*clicking a particular row in the table mycontacttable, and assigning the click event*/
              $('#mycontacttable tbody td img').live("click",function () {

                  var nTr = this.parentNode.parentNode;
                    if (this.src.match('details_close')) {
                        /* This row is already open - close it */
                        this.src = "../javascript/datatables/media/images/details_open.png";
                        oTable.fnClose(nTr);
                    }
                    else {
                        /* Open this row */
                        this.src = "../javascript/datatables/media/images/details_close.png";
                        var contact_id = $(this).attr("rel");/*contact id of a particular row that is clicked is stored in the variable contact_id*/

                        /*creating a sub table*/
                        action_sub_table = "<table id='submycontacttable'>"
                        for(i =0 ; i < response.result.length ; i++){
                              var contactid=response.result[i].contactID;
                              if(contact_id==contactid){
                                /*Iterating through each action of the contact, and constructing a sub table row for it*/
                                    for(count=0;count<response.result[i].actionSet.length;count++){
                                        action_sub_table += "<tr><td>"+response.result[i].actionSet[count].actionID+" </td><td>"+
                                                               response.result[i].actionSet[count].actionDueDate+"</td><td>" +
                                                            response.result[i].actionSet[count].actionNote+"</td></tr>";

                                    }   
                              }
                        }
                        action_sub_table +="</tablr>"; /*Construction of the subtable complete*/

                        oTable.fnOpen(nTr, action_sub_table, "info_row" );
                    }

                });

Answer 1

您可以改用jqGrid，我想这对您来说是完美的http://www.trirand.com/blog/