令牌框在jQgrid的多列中的一列中？

Question

我有一個jqGrid，其中一列我必須顯示下拉項目並允許多個條目（考慮令牌箱）。目前令牌框只出現在一行，但我希望它爲所有記錄。

$(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

有在你的代碼的兩個問題： 1）格式，相同的id = 「tokeninput-演示」 分配給每個列的單元格。

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

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

       }, 

2）負載完成您訪問$（「＃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），使用循環來訪問每個cell and bind token 例如：

loadComplete: function() { 

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