SlickGrid 插件開發(3)：Dropdownlist 下拉框控件開發

前言：用戶在Grid裏面的操作是一種富客戶端的應用，下拉框編輯功能必不可少，目前已經整理出單元格嵌入方式的下拉框，只讀下拉框列和可編輯的下拉框插件。在此把大致的開發過程總以總結說明，以饗讀者。

 1. DropdownList Editor -- 嵌入單元格

1). 綁定外部數據源和Changed事件

        var dataSouce = args.grid.$selDropdownlistDatasource;
        var changedEvent = args.grid.$selDropdownlistChangedEvent;

2). 初始化方法

$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);

預添加控件：

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). 序列化方法

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

4). 插件完整代碼

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). 首先列定義如下：

{ id: "MadeInFrom", name: "產地", field: "MadeInFrom", fieldType: "int", hasFilter: true, editor: Slick.Editors.DropDownList },

b). 綁定數據源和Change事件示例：

//添加行綁定下拉框數據源
var madeInType = [{ "ID": 1, "txt": "China" },
    { "ID": 2, "txt": "USA" },
    { "ID": 3, "txt": "Taiwan" },
    { "ID": 4, "txt": "UK" }];

function onSelectChanged(e, args) {
    window.console.log("fire event...");
}

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

c). 頁面效果

2. DropdownList  Column --下拉框列

1). 定義命名空間

$.extend(true, window, {
      "Slick": {
          "CheckboxSelectColumn": CheckboxSelectColumn,
          "DropDownListColumn": DropDownListColumn
      }
  });

2). 插件完整代碼

//#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). 定義數據源

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

b). 下拉框列定義

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). 註冊下拉框

//註冊下拉框
gridProduct.registerPlugin(dropdownProductType);

c). 頁面效果

3. 總結：

插件開發是擴充SlickGrid功能的一種方式，主要步驟可以描述爲：數據結構定義，初始化控件，控件事件交互和編輯框數值讀取處理。此處做以Demo示例，供大家參考。