SlickGrid 插件开发(3)：Dropdownlist 下拉框控件开发

前言：用户在Grid里面的操作是一种富客户端的应用，下拉框编辑功能必不可少，目前已经整理出单元格嵌入方式的下拉框，只读下拉框列和可编辑的下拉框插件。在此把大致的开发过程总以总结说明，以飨读者。


1. DropdownList Editor -- 嵌入单元格

1). 绑定外部数据源和Changed事件

[javascript] view plaincopy
var dataSouce = args.grid.$selDropdownlistDatasource;
var changedEvent = args.grid.$selDropdownlistChangedEvent;

2). 初始化方法
[javascript] view plaincopy
$select = this.preRender(args.grid.$selDropdownlistDatasource);
if (changedEvent != null)
$select.change(function () {
changedEvent(this, { "ID": $select.val(), "txt": $select.find('option:selected').text() });
});

$select.appendTo(args.container);
预添加控件：
[javascript] view plaincopy
this.preRender = function (dataSource) {
var option_str = "";
var preSelect = "<SELECT tabIndex='0' class='editor-select'><OPTION value='-1'></OPTION>";
var endSelect = "</SELECT>";

var len = dataSource.length;
if (len > 0 && dataSource[0].txt != undefined) {
for (var i = 0; i < len; i++)
option_str += "<OPTION value='" + dataSource[i].ID + "'>" + dataSource[i].txt + "</OPTION>";
}
else {
for (var i = 0; i < len; i++)
option_str += "<OPTION value='" + dataSource[i].ID + "'>" + dataSource[i].Text + "</OPTION>";
}

var list = preSelect + option_str + endSelect;
return $(list);
}


3). 序列化方法

[javascript] view plaincopy
this.serializeValue = function () {
if ($select.val() != -1) {
return $select.find('option:selected').text();
}
};


4). 插件完整代码


[javascript] view plaincopy
function DropDownList(args) {
var $select = $("");
var defaultValue = "";
var scope = this;
var dataSouce = args.grid.$selDropdownlistDatasource;
var changedEvent = args.grid.$selDropdownlistChangedEvent;


this.init = function () {
if (dataSouce != undefined && dataSouce != null) {
$select = this.preRender(args.grid.$selDropdownlistDatasource);
if (changedEvent != null)
$select.change(function () {
changedEvent(this, { "ID": $select.val(), "txt": $select.find('option:selected').text() });
});


$select.appendTo(args.container);
$select.focus();
}
};


this.preRender = function (dataSource) {
var option_str = "";
var preSelect = "<SELECT tabIndex='0' class='editor-select'><OPTION value='-1'></OPTION>";
var endSelect = "</SELECT>";

var len = dataSource.length;
if (len > 0 && dataSource[0].txt != undefined) {
for (var i = 0; i < len; i++)
option_str += "<OPTION value='" + dataSource[i].ID + "'>" + dataSource[i].txt + "</OPTION>";
}
else {
for (var i = 0; i < len; i++)
option_str += "<OPTION value='" + dataSource[i].ID + "'>" + dataSource[i].Text + "</OPTION>";
}


var list = preSelect + option_str + endSelect;
return $(list);
}


this.destroy = function () {
$(args.container).empty();
};


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


this.serializeValue = function () {
if ($select.val() != -1) {
return $select.find('option:selected').text();
}
};


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


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


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


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


this.init();


return $select.val();
}

5). 前端调用示例
a). 首先列定义如下：

[javascript] view plaincopy
{ id: "MadeInFrom", name: "产地", field: "MadeInFrom", fieldType: "int", hasFilter: true, editor: Slick.Editors.DropDownList },

b). 绑定数据源和Change事件示例：
[javascript] view plaincopy
//添加行绑定下拉框数据源
var madeInType = [{ "ID": 1, "txt": "China" },
{ "ID": 2, "txt": "USA" },
{ "ID": 3, "txt": "Taiwan" },
{ "ID": 4, "txt": "UK" }];

[javascript] view plaincopy
function onSelectChanged(e, args) {
window.console.log("fire event...");
}

gridProduct.$selDropdownlistDatasource = madeInType;
gridProduct.$selDropdownlistChangedEvent = onSelectChanged;

c). 页面效果


2. DropdownList Column --下拉框列
1). 定义命名空间

[javascript] view plaincopy
$.extend(true, window, {
"Slick": {
"CheckboxSelectColumn": CheckboxSelectColumn,
"DropDownListColumn": DropDownListColumn
}
});

2). 插件完整代码


[javascript] view plaincopy
//#region 下拉框列
function DropDownListColumn(options) {
var _grid;
var _self = this;
var _handler = new Slick.EventHandler();
var _selectedRowsLoop = {};
var _default = {
columnId: options.id,
width: 60
};

var _options = $.extend(true, {}, _default, options);

function init(grid) {
_grid = grid;
}

function destroy() {
_handler.unsubscribeAll();
}

function getColumnDefinition() {
return {
id: _options.columnId,
name: _options.name,
field: _options.field,
fieldType: _options.fieldType,
hasFilter: _options.hasFilter,
dataSource: _options.dataSource,
width: _options.width,
resizable: false,
sortable: false,
formatter: dropdownlistFormatter
};
}

function dropdownlistFormatter(row, cell, value, columnDef, dataContext) {
if (dataContext) {
var dataSource = _options.dataSource;
var option_str = "";
var preSelect = "<SELECT tabIndex='0' id='slt_" + columnDef.field + "' class='editor-select'><OPTION value='-1'></OPTION>";
var endSelect = "</SELECT>";
for (var i = 0, len = dataSource.length; i < len; i++) {
if (dataContext[columnDef.field] == dataSource[i].ID) {
option_str += "<OPTION value='" + dataSource[i].ID + "' selected='true'>" + dataSource[i].Text + "</OPTION>";
}
else {
option_str += "<OPTION value='" + dataSource[i].ID + "'>" + dataSource[i].Text + "</OPTION>";
}
}
var list = preSelect + option_str + endSelect;
return list;
}
}

$.extend(this, {
"init": init,
"destroy": destroy,
"getColumnDefinition": getColumnDefinition
});
}

3). 前端调用示例
a). 定义数据源


[javascript] view plaincopy
//添加整列固定下拉框数据源
var productTypeJson = [{ "ID": 3, "Text": "PT-Three" },
{ "ID": 4, "Text": "PT-Four" },
{ "ID": 5, "Text": "PT-Five" },
{ "ID": 6, "Text": "PT-Six" }];


b). 下拉框列定义

[javascript] view plaincopy
var dropdownProductType = new Slick.DropDownListColumn({
id: "ProductType", name: "产品类型", field: "ProductType", fieldType: "dropdownlist",
hasFilter: true, width: 120, dataSource: productTypeJson
});
columnsProduct.splice(3, 0, dropdownProductType.getColumnDefinition());

b). 注册下拉框
[javascript] view plaincopy
//注册下拉框
gridProduct.registerPlugin(dropdownProductType);

c). 页面效果


3. 总结：

插件开发是扩充SlickGrid功能的一种方式，主要步骤可以描述为：数据结构定义，初始化控件，控件事件交互和编辑框数值读取处理。此处做以Demo示例，供大家参考。