Slickgrid，带有下拉选择列表的列？
Posted
技术标签:
【中文标题】Slickgrid，带有下拉选择列表的列？【英文标题】：Slickgrid, column with a drop down select list? 【发布时间】：2011-02-07 01:35:29 【问题描述】：您好，我想知道是否有人知道是否可以将 slickgrid 中的列定义为下拉选择列表。如果没有，有 slickgrid 经验的人知道我应该如何添加这个选项吗？
谢谢
【问题讨论】：
【参考方案1】：您可能不想为每个选项范围创建一个新的选择编辑器。此外，您可能事先不知道所有期权价值的范围。
在这种情况下，您需要在选择类型编辑器中提供灵活的选项范围。为此，您可以在列定义中添加一个额外的选项（例如，称为选项），如下所示：
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();
【讨论】：
太棒了！我不仅使用了您的想法来添加select，而且该示例对于更好地理解如何将参数传递给编辑器也很有用。
@Matthijs 是否可以添加动态选项？即假设我在网格中有两个下拉列表作为编辑器，基于第一个选择，我想要第二个下拉列表中的可能选项。有可能吗？
@VivekVardhan - 是的，传入一个返回值集的函数
@Matthijs 是否可以为每一行动态下拉。例如，我需要根据 id 动态加载下拉列表。并且每一行下拉菜单都有不同的选项我该如何实现？
@Matthijs 我们能否改进用于保存数据的键值对["1":"Red","2":"Green"] 选项。需要获取保存 json 选项的值，但需要在网格上显示文本。因为在所有的 doropdowns 中，我们都有一个保存在某处的主列表【参考方案2】：
我假设您的意思是自定义单元格编辑器。 这是一个来自 slick.editors.js 的示例基于选择的布尔单元格编辑器。您可以轻松修改它以使用任意一组可能的值。
function YesNoSelectCellEditor($container, columnDef, value, dataContext)
var $select;
var defaultValue = value;
var scope = this;
this.init = function()
$select = $("<SELECT tabIndex='0' class='editor-yesno'><OPTION value='yes'>Yes</OPTION><OPTION value='no'>No</OPTION></SELECT>");
if (defaultValue)
$select.val('yes');
else
$select.val('no');
$select.appendTo($container);
$select.focus();
;
this.destroy = function()
$select.remove();
;
this.focus = function()
$select.focus();
;
this.setValue = function(value)
$select.val(value);
defaultValue = value;
;
this.getValue = function()
return ($select.val() == 'yes');
;
this.isValueChanged = function()
return ($select.val() != defaultValue);
;
this.validate = function()
return
valid: true,
msg: null
;
;
this.init();
;
【讨论】：
谢谢，这是我一直在寻找的东西，我想我必须修改它并尝试向列添加一些参数，以便您可以随时更改列。类似于 jqGrid 用于选择列表 atm 的功能。【参考方案3】：如果您的单元格已经包含带有多个选项的“选择”标签，您可以从 args 中提取此 html。该方法与以前的答案不同，但我个人对这些解决方案感到困扰，当然我的单元格已经包含一个选择标签。我想重用这个单元，而不是在this.init 中完全重建它。同样，我想继续使用与现有选择相同的选项，而不是将它们解析为 var column = ...
$( args.item[ args.column.field ] ) 返回活动单元格内容，基本上只是重新附加到container（单元格对象）。从if ( document.createEvent ) 及以下，只是一个在激活时自动打开下拉菜单的功能；等当您使用制表符导航到单元格时。
function SelectCellEditor( args )
var $select;
var defaultValue;
var scope = this;
this.init = function ()
$select = $( args.item[ args.column.field ] );
$select.appendTo( args.container );
$select.focus();
// Force the select to open upon user-activation
var element = $select[ 0 ];
if ( document.createEvent ) // all browsers
var e = new MouseEvent( "mousedown",
bubbles: true,
cancelable: true,
view: window
);
element.dispatchEvent( e );
else if ( element.fireEvent ) // ie
element.fireEvent( "onmousedown" );
;
Dropdown html-input 的完整编辑器 -> Dropdown html-output
function SelectCellEditor( args )
var $select = $( args.item[ args.column.field ] );
var defaultValue;
var scope = this;
this.init = function ()
//$select
$select.appendTo( args.container );
// Force the select to open upon user-activation
var element = $select[ 0 ];
if ( document.createEvent ) // all browsers
var e = new MouseEvent( "mousedown",
bubbles: true,
cancelable: true,
view: window
);
element.dispatchEvent( e );
else if ( element.fireEvent ) // ie
element.fireEvent( "onmousedown" );
$select.on("click", function( e )
var selected = $( e.target ).val();
$select.find( "option" ).removeAttr( "selected" );
$select.find( "option[value='" + selected + "']" ).attr( "selected", "selected" );
);
;
this.destroy = function ()
$select.remove();
;
this.focus = function () ;
this.loadValue = function ( item ) ;
this.serializeValue = function () ;
// Only runs if isValueChanged returns true
this.applyValue = function ( item, state )
item[ args.column.field ] = $select[ 0 ].outerHTML;
;
this.isValueChanged = function ()
return true;
;
this.validate = function ()
return
valid: true,
msg: null
;
;
this.init();
【讨论】：
【参考方案4】：没有 jq 和内联注入的元素，打包在模块中：
'use strict';
class SelectCellWidget
constructor(args)
this._args = args;
this._$select = undefined;
this._defaultValue = undefined;
this._init();
_init ()
let selects, container, divend, opt_values;
const args = this._args;
if(args.column.options)
opt_values = args.column.options.split(',');
else
opt_values = ["yes","no"];
container = document.createElement("div");
container.classList.add('select-editable');
divend = document.createElement('input');
divend.setAttribute("type", "text");
divend.setAttribute("name", "format");
divend.setAttribute("value", "");
selects = document.createElement("select");//"<select id='Mobility' tabIndex='0' class='editor-select'>"+ option_str +"</select>";
selects.setAttribute("id", "Mobility");
selects.setAttribute("tabIndex", 0);
selects.setAttribute("class", "editor-select");
for(let i = 0; i < opt_values.length; i++)
let v = opt_values[i];
let option = document.createElement("option");
option.setAttribute("value", v);
option.innerText = v;
selects.appendChild(option);
container.appendChild(divend);
container.appendChild(selects);
this._$select = container;
args.container[0].appendChild(this._$select);
this._$select.focus();
document.getElementById("Mobility").selectedIndex = args.item[args.column.field] ? opt_values.indexOf(args.item[args.column.field]) : 0;
destroy ()
this._$select.remove();
focus ()
this._$select.focus();
loadValue (item)
this._defaultValue = item[this._args.column.field];
this._$select.value = this._defaultValue;
serializeValue ()
if(this._args.column.options)
return this._$select.lastElementChild.value;
else
return (this._$select.lastElementChild.value === "yes");
applyValue (item,state)
item[this._args.column.field] = state;
isValueChanged ()
return (this._$select.lastElementChild.value !== this._defaultValue);
validate ()
return
valid: true,
msg: null
;
module.exports=SelectCellWidget;
https://github.com/YaAlfred/SlickgridSelectDropdownWidget
【讨论】：
以上是关于Slickgrid，带有下拉选择列表的列？的主要内容，如果未能解决你的问题，请参考以下文章