在jqgrid中的多行编辑案例中展开文本

时间:2016-05-12 04:40:08

标签: jquery jquery-ui jquery-plugins jqgrid jqgrid-formatter

我需要在jqgrid中编辑行,但数据是多行的。在我添加的视图模式中将数据显示为多行

function myformatter ( cellvalue, options, rowObject )
        {
            return cellvalue.split(' ').join('<br/>');
        }

但现在,当我编辑行时,我看到一个标签,并且值再次出现在一行中。有人可以帮助我在这里以编辑模式在单个单元格中的新行中显示电子邮件。

我的网格代码:

               $(function () {



           var mydata =[{
               "email": "abc.123@abc.com  abc.def@abc.com  abc.def@abc.com  abc.def@abc.com",
               "name": "abc, def",
               "address": "USA1"

             },
             {
               "email": "abc.def@abc.com  abc.def@abc.com  abc.def@abc.com  abc.def@abc.com",
               "name": "abSFc, def",
               "address": "USA2"
             },
        {
          "email": "awwwwwwwwwwwwwbc.def@abc.com",
          "name": "abc, def",
          "address": "USA3"
        },
        {
          "email": "abc.def@abc.com",
          "name": "aDbc, def",
          "address": "UK4"
        },
        {
          "email": "FEabc.def@abc.com",
          "name": "FDabc, def",
          "address": "UK5"
        },
        {
          "email": "abDc.def@abc.com",
          "name": "abc, def",
          "address": "UK6"
        },
        {
          "email": "abDc.def@abc.com",
          "name": "aDbc, def",
          "address": "UK7"
        },
        {
          "email": "abDc.def@abc.com",
          "name": "abc, def",
          "address": "USA8"
        },
        {
          "email": "abDc.def@abc.com",
          "name": "abwqewfdec, def",
          "address": "USA9"
        },
        {
          "email": "abDc.def@abc.com",
          "name": "awvferbc, def",
          "address": "USA88"
        },
        {
          "email": "awwwwwwwwwwwwwwwwbc.def@abc.com",
          "name": "abwvfwc, def",
          "address": "USA"
        }];
                  var lastsel;            
                  $("#list").jqGrid({
                      datatype: 'local',
                      data: mydata,
                      colNames: ['Email', 'Name', 'Address'],
                     colModel: [
              { name: 'email', width: 250, align: 'center',editable: true,formatter:myformatter

              },
              { name: 'name', width: 150, align: 'center',editable: true
                           },
              { name: 'address', width: 150, editable: true}

          ],
                 rowList:[10,20,20],
        rowNum:15,
                 pager: '#pager',

          gridview: true,
          viewrecords: true,
          height: '100%',
          width: '50%',
          search:true,
          loadonce: true,
          'cellEdit': true,
          //toppager: true,
          viewrecords: true,    
          caption: 'Grid with rowSpan attributes',
          editurl: '/Home/GetStudents/',

         gridComplete: function () {
                      var grid = this;

                      var filters, i, l, rules, rule, iCol, $this = $("#list");

                      if (this.p.search === true) {

                          filters = $.parseJSON(this.p.postData.filters);
                          if (filters !== null && typeof filters.rules !== 'undefined' &&
                                  filters.rules.length > 0) {
                              rules = filters.rules;
                              l = rules.length;

                              for (i = 0; i < l; i++) {
                                  rule = rules[i];
                                     $('body').highlight( rule.data );
                              }
                          }
                      }

                     /*  var $this = $(this), ids = $this.jqGrid('getDataIDs'), i, l = ids.length;
                      for (i = 0; i < l; i++) {
                          $this.jqGrid('editRow', ids[i], true);
                      } */
                  }
        });

                  var lastSelection;

                  function editRow(id) {
                      if (id && id !== lastSelection) {
                          var grid = $("#list");
                          grid.jqGrid('restoreRow',lastSelection);
                          grid.jqGrid('editRow', id, true);
                      //    grid.jqGrid('editRow',id, {keys: true} );
                          lastSelection = id;
                      }
                  }

                  $("#list").jqGrid('filterToolbar',{stringResult: true, searchOnEnter : false , defaultSearch: 'cn', ignoreCase: true});
        //                      
                    function myformatter ( cellvalue, options, rowObject )
                    {
                        return cellvalue.split(' ').join('<br/>');
                    }
        });

1 个答案:

答案 0 :(得分:1)

尝试使用新行替换&lt; / BR&GT;进入&#34; \\ n&#34;。

imageViewAnimatedFrame.origin.x = 10
imageViewAnimatedFrame.origin.y = 200
imageViewAnimatedFrame.size.height = 298
imageViewAnimatedFrame.size.width = 391