如何添加项目Slick grid to Multi select TextBox?

时间:2018-02-23 05:18:40

标签: javascript jquery ajax slickgrid

我是Slick Grid的新手。 这是我的javascript代码,我在这里声明了我的变量,

  this.Property(e => e.IsActive).HasColumnAnnotation(
            "Index",
            new IndexAnnotation(new IndexAttribute("IX_IsActive")));

我在这里添加复选框,通过使用此复选框,我想将这些项添加到'selectdItems'数组

var grid;
var printPlugin;
var dataView;
var data = [];
var selectdItems = [];
var columns = [
       { id: "Id", name: "Id", field: "Id", sortable: true },
       { id: "Name", name: "Name", field: "Name", sortable: true, cssClass: "cell-title", editor: Slick.Editors.Text, width: 300 },
       { id: "Addr", name: "Addr", field: "Addr", sortable: true, editor: Slick.Editors.Text }
       ];

这些是我的选择

        var checkboxSelector = new Slick.CheckboxSelectColumn({
              cssClass: "slick-cell-checkboxsel"
               });
columns.push(checkboxSelector.getColumnDefinition());

这是我获取数据的ajax方法。在这个ajax方法中我写了'$('#btnShift')。click(function(e)){}'函数,如果我把这个方法写成ajax方法那边呢不工作,如果我在ajax方法中编写此函数ajax方法调用页面中的每个操作,当我将所选记录添加到多行文本框时,这些项绑定并再次将数据重新绑定到网格并清除多行文本框

var options = {
        enableCellNavigation: true,
        enableColumnReorder: false,
        multiColumnSort: true,
        editable: true,
        ebableAddRow: true,
        asyncEditorLoading: true,
        autoEdit: false
      };

我想在单击移动方法后选中网格中的复选框,复选框选中的数据转移到多行文本框。(我不想多次调用ajax方法)

这是我的HTML代码

  var param = {};
$.ajax({
    type: 'GET',
    url: 'AllFeatures.aspx/method',
    data: JSON.stringify(param),
    dataType: "json",
    type: "POST",
    contentType: "application/json; charset=utf-8",
    success: function (resp) {
        var v = resp;
        for (i = 0; i < resp.d.length; i++) {
            data[i] = {
                Id: resp.d[i].split('~')[0],
                Name: resp.d[i].split('~')[1],
                Addr: resp.d[i].split('~')[2],
            };
        }
        grid = new Slick.Grid("#myGrid", data, columns, options);
        var argRows = [];
        grid.onSelectedRowsChanged.subscribe(function (e, args) {
            argRows = args.rows;
        });
        grid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: false }));
        grid.registerPlugin(checkboxSelector);
        var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);

  $('#btnShift').click(function (e) {
      var dataView = new Slick.Data.DataView();
      dataView.beginUpdate();
      dataView.getItems().length = 0;
      dataView.endUpdate();
  for (var i = 0; i < argRows.length; i++) {
             selectdItems.push(data[argRows[i]]);
             data.splice(argRows[i], 1);
         $('#sel').append('<option>' + data[argRows[i]]['Name'] + '</option')
}
grid = new Slick.Grid("#myGrid", data, columns, options);
e.priventDefault();
  });
    }

});

1 个答案:

答案 0 :(得分:1)

如果没有模型,很难确切地说出你要做的事情。

但是你看过6pac repo的例子了吗: https://github.com/6pac/SlickGrid/wiki/Examples

例如: http://6pac.github.io/SlickGrid/examples/example-select2-multiselect-editor.html