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

来源：互联网发布：网络主播唱歌是真的吗编辑：程序博客网时间：2024/05/23 12:17

前言：用户在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示例，供大家参考。