jQgrid的一列中的标记框用于多个条目?

时间:2016-04-12 14:26:50

标签: jquery twitter-bootstrap jqgrid-asp.net

我有一个jqGrid,其中一个列我必须显示项目的Drop-down并允许多个条目(考虑Token-box)。目前,令牌盒仅出现在一行中,但我想要它用于所有记录。

$(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"
          });
        });

    }

我怎样才能做到这一点?

enter image description here

1 个答案:

答案 0 :(得分:1)

您的代码中存在两个问题: 1)在格式化程序中,相同的id =&#34; tokeninput-demo&#34;被分配给每个列单元格。

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

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

                },

2)在加载完成后,您正在访问$(&#34; #dokeninput-demo&#34;) - &gt;因为所有单元格都具有相同的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"
              });
    }
            });