当前位置： 文江博客话题详情

SlickGrid 选择编辑器

发布于 2024-09-08 23:24:37 字数 1194 浏览 6 评论 0原文

我想为选择单元格创建一个动态填充的 html 选择。我从数据库中提取一些信息，每个行项目都不同。问题是编辑器丢失了初始数据，我不知道如何保留特定单元格的一些数据。以前有人这样做过吗？

function StandardSelectCellEditor($container, columnDef, value, dataContext) {
var $input;
var $select;
var defaultValue = value;
var scope = this;

this.init = function() {
    $input = $("<INPUT type=hidden />");
    $input.val(value); 
    }

    $input.appendTo($container);

    $select = $("<SELECT tabIndex='0' class='editor-yesno'>");
    jQuery.each(value, function() {
      $select.append("<OPTION value='" + this + "'>" + this + "</OPTION></SELECT>");
    });
    $select.append("</SELECT>");

    $select.appendTo($container);

    $select.focus();
};


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


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

this.setValue = function(value) {
    $select.val(value);
    defaultValue = value;
};

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

this.isValueChanged = function() {
    return ($select.val() != defaultValue);
};

this.validate = function() {
    return {
        valid: true,
        msg: null
    };
};

this.init();
};
原文

I want to make a dynamically populated html select for a select cell. I extract some information from a database which is different for every row item. The problem is that the editor loses the initial data and I don't know how to keep some data for a specific cell. Has someone done this before?

function StandardSelectCellEditor($container, columnDef, value, dataContext) {
var $input;
var $select;
var defaultValue = value;
var scope = this;

this.init = function() {
    $input = $("<INPUT type=hidden />");
    $input.val(value); 
    }

    $input.appendTo($container);

    $select = $("<SELECT tabIndex='0' class='editor-yesno'>");
    jQuery.each(value, function() {
      $select.append("<OPTION value='" + this + "'>" + this + "</OPTION></SELECT>");
    });
    $select.append("</SELECT>");

    $select.appendTo($container);

    $select.focus();
};


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


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

this.setValue = function(value) {
    $select.val(value);
    defaultValue = value;
};

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

this.isValueChanged = function() {
    return ($select.val() != defaultValue);
};

this.validate = function() {
    return {
        valid: true,
        msg: null
    };
};

this.init();
};

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

撩人痒 2024-09-15 23:24:37

此处提出了类似的问题（但这不是光滑网格标记）。

我确实制作了一个 SelectEditor，具有灵活的选项范围，具体取决于我们所在的列。这里考虑的原因是您在列中编辑的值的数据类型将决定该字段的有效选择。

为此，您可以向列定义添加一个额外的选项（例如称为选项），如下所示：

 var columns = [
  {id:"color", name:"Color", field:"color",  options: "Red,Green,Blue,Black,White", editor: SelectCellEditor}
  {id:"lock", name:"Lock", field:"lock",  options: "Locked,Unlocked", editor: SelectCellEditor},

]

并在您自己的 SelectEditor 对象的 init 方法中使用 args.column.options 访问该选项，例如这：

 SelectCellEditor : function(args) {
        var $select;
        var defaultValue;
        var scope = this;

        this.init = function() {

            if(args.column.options){
              opt_values = args.column.options.split(',');
            }else{
              opt_values ="yes,no".split(',');
            }
            option_str = ""
            for( i in opt_values ){
              v = opt_values[i];
              option_str += "<OPTION value='"+v+"'>"+v+"</OPTION>";
            }
            $select = $("<SELECT tabIndex='0' class='editor-select'>"+ option_str +"</SELECT>");
            $select.appendTo(args.container);
            $select.focus();
        };

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

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

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

        this.serializeValue = function() {
            if(args.column.options){
              return $select.val();
            }else{
              return ($select.val() == "yes");
            }
        };

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

        this.isValueChanged = function() {
            return ($select.val() != defaultValue);
        };

        this.validate = function() {
            return {
                valid: true,
                msg: null
            };
        };

        this.init();
    }

A similar queations was asked here (this one is however not slickgrid tagged).

I did make a SelectEditor, with a flexible range of options depending on the column we are in. The reason of thinking here is that the datatype of the value you edit in a column will determine the valid choices for this field.

In order to do this you can add an extra option to your column definitions (e.g. called options) like this:

 var columns = [
  {id:"color", name:"Color", field:"color",  options: "Red,Green,Blue,Black,White", editor: SelectCellEditor}
  {id:"lock", name:"Lock", field:"lock",  options: "Locked,Unlocked", editor: SelectCellEditor},

]

and access that using args.column.options in the init method of your own SelectEditor object like this:

 SelectCellEditor : function(args) {
        var $select;
        var defaultValue;
        var scope = this;

        this.init = function() {

            if(args.column.options){
              opt_values = args.column.options.split(',');
            }else{
              opt_values ="yes,no".split(',');
            }
            option_str = ""
            for( i in opt_values ){
              v = opt_values[i];
              option_str += "<OPTION value='"+v+"'>"+v+"</OPTION>";
            }
            $select = $("<SELECT tabIndex='0' class='editor-select'>"+ option_str +"</SELECT>");
            $select.appendTo(args.container);
            $select.focus();
        };

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

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

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

        this.serializeValue = function() {
            if(args.column.options){
              return $select.val();
            }else{
              return ($select.val() == "yes");
            }
        };

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

        this.isValueChanged = function() {
            return ($select.val() != defaultValue);
        };

        this.validate = function() {
            return {
                valid: true,
                msg: null
            };
        };

        this.init();
    }
回复 原文
莫多说 2024-09-15 23:24:37

您可以稍微修改上面的 SelectCellEditor 来为每个单元格创建不同的选择选项。

function SelectCellEditor(args) {

   .....

   // just to get the DOM element
   this.getInputEl = function() {
      return $input;
   };
}

现在可以轻松创建动态下拉编辑器。

function DynamicSelectCellEditor(args) {
   // 1: if you already have a select list for individual cells
   args.columns.options = optionsList[args.item.id] // or any custom logic
   return new Slick.Editors.SelectCellEditor(args);

   /*              OR                */

   // 2: if data needs to be fetched from the server
   var editor = new Slick.Editors.SelectCellEditor(args),
       $select = editor.getInputEl();

   $select.html("<option>Loading...</option>");
   $.ajax({ }).done(function(list) {
       // Update select list
       $select.html(newHtml);
   });

   return editor;
}

You can slightly modify the above SelectCellEditor to create different select options for each cell.

function SelectCellEditor(args) {

   .....

   // just to get the DOM element
   this.getInputEl = function() {
      return $input;
   };
}

Now it is easy to create a dynamic dropdown editor.

function DynamicSelectCellEditor(args) {
   // 1: if you already have a select list for individual cells
   args.columns.options = optionsList[args.item.id] // or any custom logic
   return new Slick.Editors.SelectCellEditor(args);

   /*              OR                */

   // 2: if data needs to be fetched from the server
   var editor = new Slick.Editors.SelectCellEditor(args),
       $select = editor.getInputEl();

   $select.html("<option>Loading...</option>");
   $.ajax({ }).done(function(list) {
       // Update select list
       $select.html(newHtml);
   });

   return editor;
}
回复 原文
阳光下慵懒的猫 2024-09-15 23:24:37

替换

for( i in opt_values ){
          v = opt_values[i];
          option_str += "<OPTION value='"+v+"'>"+v+"</OPTION>";
}

为

$.each(opt_values , function( index, value ) {
    option_str += "<OPTION value='"+value+"'>"+value+"</OPTION>";
});

如果它不适合您，则

replace

for( i in opt_values ){
          v = opt_values[i];
          option_str += "<OPTION value='"+v+"'>"+v+"</OPTION>";
}

with

$.each(opt_values , function( index, value ) {
    option_str += "<OPTION value='"+value+"'>"+value+"</OPTION>";
});

if it is not working for you

回复 原文
心的憧憬 2024-09-15 23:24:37

请尝试下面的代码。

在 slick.editors.js 中，定义一个新的编辑器。

$.extend(true, window, {
    "Slick": {
      "Editors": {
       "SelectOption": SelectCellEditor,
       .....
      }
    }
  });
function SelectCellEditor(args) {
    var $select;
    var defaultValue;
    var scope = this;
    var s;
    this.init = function() {
        opt_values = eval(args.column.options);
        option_str = "";
        var tuples = [];
        for (var key in opt_values) tuples.push([key, opt_values[key]]);
        tuples.sort(function(a, b) { return a[1] < b[1] ? 1 : a[1] > b[1] ? -1 : 0 });
        var length = tuples.length;
        while (length--) option_str += "<OPTION value='"+tuples[length][0]+"'>"+tuples[length][1]+"</OPTION>";

        $select = $("<SELECT tabIndex='0' class='editor-select'>"+ option_str +"</SELECT>");
        $select.appendTo(args.container);
        $select.focus();
    };

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

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

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

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

    this.applyValue = function(item,selectedIndex) {
        if($.isNumeric(selectedIndex))
            item[args.column.field] = parseInt(selectedIndex);
        else
            item[args.column.field] = selectedIndex;
    };

    this.isValueChanged = function() {
        return ($select.val() != defaultValue);
    };

    this.validate = function() {
        return {
            valid: true,
            msg: null
        };
    };

    this.init();
}

然后，修改您的网格选项

var grid_options = {
editable:             true,
enableAddRow:       false,
multiColumnSort:    true,
explicitInitialization: true,
 dataItemColumnValueExtractor: function(item, columnDef) {
 if(columnDef.editor == Slick.Editors.SelectOption){
    return eval(columnDef.options)[item[columnDef.field]];
  }else{
    return item[columnDef.field];
  }
}

};

并在列初始化时使用编辑器。

{id: "currency_id", name: "Currency *", field: "currency_id", editor: Slick.Editors.SelectOption, options: { 1: 'Dollar', 2: 'Yen', 3: 'Rupiah' }, sortable: true,width: 234}

Please try the below code.

In slick.editors.js,Define a new editor.

$.extend(true, window, {
    "Slick": {
      "Editors": {
       "SelectOption": SelectCellEditor,
       .....
      }
    }
  });
function SelectCellEditor(args) {
    var $select;
    var defaultValue;
    var scope = this;
    var s;
    this.init = function() {
        opt_values = eval(args.column.options);
        option_str = "";
        var tuples = [];
        for (var key in opt_values) tuples.push([key, opt_values[key]]);
        tuples.sort(function(a, b) { return a[1] < b[1] ? 1 : a[1] > b[1] ? -1 : 0 });
        var length = tuples.length;
        while (length--) option_str += "<OPTION value='"+tuples[length][0]+"'>"+tuples[length][1]+"</OPTION>";

        $select = $("<SELECT tabIndex='0' class='editor-select'>"+ option_str +"</SELECT>");
        $select.appendTo(args.container);
        $select.focus();
    };

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

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

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

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

    this.applyValue = function(item,selectedIndex) {
        if($.isNumeric(selectedIndex))
            item[args.column.field] = parseInt(selectedIndex);
        else
            item[args.column.field] = selectedIndex;
    };

    this.isValueChanged = function() {
        return ($select.val() != defaultValue);
    };

    this.validate = function() {
        return {
            valid: true,
            msg: null
        };
    };

    this.init();
}

Then, modify your grid options

var grid_options = {
editable:             true,
enableAddRow:       false,
multiColumnSort:    true,
explicitInitialization: true,
 dataItemColumnValueExtractor: function(item, columnDef) {
 if(columnDef.editor == Slick.Editors.SelectOption){
    return eval(columnDef.options)[item[columnDef.field]];
  }else{
    return item[columnDef.field];
  }
}

};

And use the editor while columns initialization.

{id: "currency_id", name: "Currency *", field: "currency_id", editor: Slick.Editors.SelectOption, options: { 1: 'Dollar', 2: 'Yen', 3: 'Rupiah' }, sortable: true,width: 234}
回复 原文
晨曦慕雪 2024-09-15 23:24:37

我还不能添加评论，但我需要在 HeiN 的答案中添加一些内容。

HeiN 的答案效果很好，但我收到的数据与我的选择选项不匹配，我仍然需要显示该数据......所以我必须修改选项中的 dataItemColumnValueExtractor 。如果列表中没有匹配的选项，这允许显示我的原始数据。

        dataItemColumnValueExtractor: function(item, columnDef) {
            if(columnDef.editor == Slick.Editors.SelectOption){
                return eval(columnDef.options)[item[columnDef.field]] != null ? eval(columnDef.options)[item[columnDef.field]] : item[columnDef.field];
            }else{
                return item[columnDef.field];
            }
        }

希望这对以后的人有所帮助。

I can't add comments yet, but I need to add something to HeiN's answer.

HeiN's answer works great, but I have data coming in that does not match my select options and I need to still display that data... so I have had to modify dataItemColumnValueExtractor in the options. This allows my original data to display if I do not have an option in the list to match.

        dataItemColumnValueExtractor: function(item, columnDef) {
            if(columnDef.editor == Slick.Editors.SelectOption){
                return eval(columnDef.options)[item[columnDef.field]] != null ? eval(columnDef.options)[item[columnDef.field]] : item[columnDef.field];
            }else{
                return item[columnDef.field];
            }
        }

Hope this helps somebody later down the line.

回复 原文
~没有更多了~

关于作者

南城旧梦

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文