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示例，供大家参考。