のjQueryのDataTableの行をインライン編集

は、それはあなたが、セルをクリックした場合は、テキストを編集可能にします。セルをクリックすると、inputタグにレンダリングされますのjQueryのDataTableの行をインライン編集

私の場合、少し違います。各行には「編集」ボタンがあり、「編集」ボタンをクリックすると、その行にすべての入力タグが表示されます。

datatablesでデモまたはその方法を見つけることができません。アドバイスできますか？

2016-08-24 I' ll-Be-Back

クリックtdは、このような入力コードにレンダリング：

$td.click(function() { 
     var OriginalContent = $(this).text(); 

     $(this).addClass("cellEditing"); 
     $(this).html('<input type="text" value="'+ OriginalContent + '" style="width: 100%"/>'); 
     $(this).children().first().focus(); 

     $(this).children().first().keypress(function (e) { 
      if (e.which == 13) { 
       var newContent = $(this).val(); 
       $(this).parent().text(newContent); 
       $(this).parent().removeClass("cellEditing"); 
      } 
     }); 

     $(this).children().first().blur(function(){ 
      $(this).parent().text(OriginalContent); 
      $(this).parent().removeClass("cellEditing"); 
     }); 
    });

クリック編集ボタン上のすべての入力タグがその行に表示されます：メモリ
たら、2.で
1.rowデータをボタンをクリックして、この行のtd設定を見つけます（入力するUI、選択する、ラジオ....）
3. anglejs双方向データバインディングのようなUIと行データを切り替えます

このデモでは1時間を過ごします：

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Demo</title> 
 
    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> 
 
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
    <div id="newGrid"></div> 
 

 
    <script> 
 
     function Grid(){ 
 
      this.config = { 
 
       id:"newGrid", 
 
       data:[ 
 
        {name:"alert",age:"18"}, 
 
        {name:"Jone",age:"28"} 
 
       ] 
 
      }; 
 
      this.rows = []; 
 
     } 
 

 
     Grid.prototype.render =function(){ 
 
      var html = '<table class="table table-bordered">' + 
 
        '<tr>' + 
 
        '<th>Name</th>' + 
 
        '<th>age</th>' + 
 
        '<th></th>' + 
 
        '</tr>' + 
 
        '</table>'; 
 
      var $table = $(html); 
 
      for(var i= 0,item;item=this.config.data[i++];){ 
 
       var newRow = new Row(); 
 
       this.rows.push(newRow); 
 
       var rowDom = newRow.render(item); 
 
       $table.append(rowDom); 
 
      } 
 
      $("#"+this.config.id).append($table); 
 
     }; 
 

 

 
     function Row(){ 
 
      this.cells = {}; 
 
     } 
 

 
     Row.prototype.render = function(row){ 
 
      var _this = this; 
 
      var nameCell= new Cell(row.name); 
 
      var ageCell = new Cell(row.age); 
 
      this.cells = { 
 
       name:nameCell, 
 
       age:ageCell 
 
      }; 
 
      var $editBtn= $("<button>Edit</button>").click(function(){ 
 
       _this.editRow(); 
 
      }); 
 
      var $saveBtn= $("<button>Save</button>").click(function(){ 
 
       _this.saveRow(); 
 
      }); 
 
      return $("<tr></tr>") 
 
        .append($("<td></td>").append(nameCell.$Dom)) 
 
        .append($("<td></td>").append(ageCell.$Dom)) 
 
        .append($("<td></td>").append($editBtn).append($saveBtn)); 
 
     }; 
 

 
     Row.prototype.editRow = function(){ 
 
      for(var key in this.cells){ 
 
       this.cells[key].editorCell(); 
 
      } 
 
     }; 
 
     Row.prototype.saveRow = function(){ 
 
      var data = {}; 
 
      for(var key in this.cells){ 
 
       //console.log(key+"="+this.cells[key].editor.getValue()); 
 
       data[key] = this.cells[key].editor.getValue() 
 
      } 
 
      alert(JSON.stringify(data)) 
 
     }; 
 

 
     function Cell(value){ 
 
      this.$Dom = $("<td></td>"); 
 
      this.editor = null; 
 
      this.render(value); 
 
     } 
 
     Cell.prototype.render = function(value){ 
 
      this.editor = new Forms["Span"](value); 
 
      return this.$Dom.append(this.editor.$Dom); 
 
     }; 
 
     Cell.prototype.editorCell = function(){ 
 
      this.editor = new Forms["Input"](this.editor.getValue()); 
 
      this.$Dom.html(this.editor.$Dom) 
 
     }; 
 

 
     var Forms = {}; 
 
     //Span Object 
 
     Forms.Span = function(value){ 
 
      this.$Dom = $('<span>'+ value +'</span>'); 
 
     }; 
 
     Forms.Span.prototype.setValue = function(value){ 
 
      this.$Dom.text(value); 
 
     }; 
 
     Forms.Span.prototype.getValue = function(){ 
 
      return this.$Dom.text(); 
 
     }; 
 
     //Input Object 
 
     Forms.Input = function(value){ 
 
      this.$Dom = $('<input type="text" style="width:100%">'); 
 
      this.setValue(value); 
 
     }; 
 
     Forms.Input.prototype.setValue = function(value){ 
 
      this.$Dom.val(value); 
 
     }; 
 
     Forms.Input.prototype.getValue = function(){ 
 
      return this.$Dom.val(); 
 
     }; 
 
     //Init Grid 
 
     $(document).ready(function(){ 
 
      new Grid().render(); 
 
     }) 
 
    </script> 
 
</body> 
 
</html>

出典

2016-08-24 11:25:10

あなたはjsfiddle.netでの作業のデモを提供することはできますか？ユーザーが[編集]ボタンをクリックすると、その行のすべての入力が表示され、その行の[保存]ボタンをクリックして保存することができます。 –

のjQueryのDataTableの行をインライン編集

答えて

関連する問題