複数のエントリのjQgridの列の1つにトークンボックス？

Question

私は項目のドロップダウンを表示し、複数のエントリ（トークンボックスを考慮）を許可しなければならない列の1つに対してjqGridを持っています。現在のところ、トークンボックスは1行だけに表示されていますが、すべてのレコードに対してトークンボックスが必要です。

$(document).ready(function() { 

    createCSDGrid(); 
}) 

function createCSDGrid() { 
    var lastsel 
    $('#Grid').jqGrid({ 
     url: CSDDataUrl, 
     datatype: "json", 
     mtype: 'GET', 
     colNames: ['ID', 'A', 'B', 'C', 'D', 'E'], 

     colModel: [ 

      { 
      name: 'ID', 
      index: 'ID', 
      hidden: true, 
      editable: true 
      }, { 
      name: 'a', 
      index: 'a' 
      }, { 
      name: 'b', 
      index: 'b' 
      }, { 
      name: 'c', 
      index: 'c', 
      editable: true, 
      editoptions: { 
       dataEvents: [{ 
       type: 'blur', 
       fn: function(e) { 
        try { 
        $('#grid').jqGrid('editCell', 4, false); 
        } catch (e) { 
        //Do nothing} 
        } 
       } 
       }] 
      } 
      }, { 
      name: 'd', 
      index: 'd', 
      editable: true, 
      formatter: function(cellValue, options, cellObject) { 
       var id = options.rowId; 

       return "</p><input type='text' id='tokeninput-demo'/></p>"; 

      }, 
      editoptions: { 
       dataEvents: [{ 
       type: 'blur', 
       fn: function(e) { 
        try { 
        $('#grid').jqGrid('editCell', 5, false); 
        } catch (e) { 
        //Do nothing} 
        } 
       } 
       }], 

      } 
      }, { 
      name: 'e', 
      index: 'e', 
      editable: true, 
      editoptions: { 
       dataEvents: [{ 
       type: 'blur', 
       fn: function(e) { 
        try { 
        $('#grid').jqGrid('editCell', 6, false); 
        } catch (e) { 
        //Do nothing} 
        } 
       } 
       }] 
      } 
      } 
     ], 
     toolbarfilter: true, 
     scrollrows: true, 
     rowNum: 100, 
     rownumbers: true, 
     pager: '#jqGridPager', 
     'cellEdit': true, 
     'cellsubmit': 'clientArray', 
     //editurl: addNewRowUrl, 

     loadonce: true, 
     recordtext: "Record Count: {1}", 
     sortable: true, 
     pgbuttons: false, 
     pgtext: null, 
     jsonReader: { 
      repeatitems: false 
     }, 
     viewrecords: true, 
     rownumWidth: '50px', 

     width: $('#Grid').width(), 

     loadComplete: function() { 
      $("#tokeninput-demo").tokenInput("http://jquery-tokeninput-demo.herokuapp.com", { 
      theme: "facebook" 
      }); 
     }); 

    } 

どのようにすればいいですか？

Answer 1

コード内の2つの問題がある： 1）フォーマッタでは、同じID = "tokeninput-デモ" は、各列のセルに割り当てられています。負荷の

formatter: function(cellValue, options, cellObject) { 
        var id = options.rowId; 

        return "</p><input type='text' id='tokeninput-demo'/></p>"; 

       }, 

2）あなたは$（「＃1 tokeninput-デモ」）をアクセスしている完成 - >すべてのセルが同じIDを持っているので、それだけで最初のセルに入力トークンを結合されます。

loadComplete: function() { 
       $("#tokeninput-demo").tokenInput("http://jquery-tokeninput-demo.herokuapp.com", { 
       theme: "facebook" 
       }); 
      }); 

対処：

1）例えばフォーマッタ 内の各セルにインクリメントID（一意のID）を割り当て：それぞれにアクセスするためにループを使用して、負荷を完全に

formatter: function(cellValue, options, cellObject) { 
       var count = options.rowId; 

       return "</p><input type='text' id='tokeninput-demo'+count/></p>"; 

      }, 

2）セルとバインドトークン 例：

loadComplete: function() { 

    for(int count=0; count<rowCount; count++)`enter code here` 
    { 
       $("#tokeninput-demo+'count'+").tokenInput("http://jquery-tokeninput-demo.herokuapp.com", { 
       theme: "facebook" 
       }); 
    } 
      });