将文件上传添加到SlickGrid单元格?

时间:2014-09-12 08:56:14

标签: javascript jquery slickgrid

在slickgrid视图中,我必须添加按钮来进行文件上传。我使用自定义格式化程序添加了该按钮。但我无法添加onchange事件处理程序来捕获文件。任何人都可以知道如何将onchange监听器添加到单元格中。

1 个答案:

答案 0 :(得分:0)

在格式化程序中只显示文件名或类似名称。要实现您的目标,您需要编写实现isValueChanged方法的自定义编辑器。您可以修改此编辑器或任何其他编辑器:

https://github.com/mleibman/SlickGrid/blob/master/slick.editors.js

      function myCustomEditor(args) {
        var $input;
        var defaultValue;
        var scope = this;

        this.init = function () {
          $input = $("<INPUT type=text class='editor-text' />")
              .appendTo(args.container)
              .bind("keydown.nav", function (e) {
                if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
                  e.stopImmediatePropagation();
                }
              })
              .focus()
              .select();
        };

        this.destroy = function () {
          $input.remove();
        };

        this.focus = function () {
          $input.focus();
        };

        this.getValue = function () {
          return $input.val();
        };

        this.setValue = function (val) {
          $input.val(val);
        };

        this.loadValue = function (item) {
          defaultValue = item[args.column.field] || "";
          $input.val(defaultValue);
          $input[0].defaultValue = defaultValue;
          $input.select();
        };

        this.serializeValue = function () {
          return $input.val();
        };

        this.applyValue = function (item, state) {
          item[args.column.field] = state;
        };

        this.isValueChanged = function () {
          return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
        };

        this.validate = function () {
          if (args.column.validator) {
            var validationResults = args.column.validator($input.val());
            if (!validationResults.valid) {
              return validationResults;
            }
          }

          return {
            valid: true,
            msg: null
          };
        };

        this.init();
      }

然后可以在列对象中分配编辑器:

    var columns = [

      {id: "title", name: "Title", field: "title", width: 70, minWidth: 50, cssClass: "cell-title", sortable: true, editor: myCustomEditor},

    ];