Select2插件与LigerUI的并存

最新推荐文章于 2021-08-07 00:48:26 发布

weixin_34321753

最新推荐文章于 2021-08-07 00:48:26 发布

阅读量113

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/huami/blog/714112

本文介绍了一个LigerUI中自定义Select2组件作为Grid编辑器的方法，包括如何创建、获取值及文本等步骤，适用于需要增强选择框功能的场景。

为什么80%的码农都做不了架构师？>>>

/**
 * 
 * Author 花米[ sjbwylbs@163.com ]
 * 
 * 
 * 使用方法: 1. 导入 var $ = require('jquery'); require("ligerui")($);
 * require('select2')($); var myselect = require('ligerSelect')($);
 * 
 * 2. $.ligerDefaults.Grid.editors['myselect'] = myselect;
 * 
 * 3.在grid定义中使用
 * 
 * editor : { type : 'myselect', width : '300px', .....其他的select2的参数 }
 * 
 * 
 * 
 */

define(function(require, exports, module) {
	return function($) {
		var myselect = {
            create: function (container, editParm) {
                var column = editParm.column;
                var p = column.editor;

                p.select2 = $('<select class="myselect" />');
                container.append(p.select2);

                var $option = $("<option selected></option>").val(editParm.value).text(editParm.text);

                p.select2.select2(p).on('select2:select',function(e){
                    p.onSelect && p.onSelect(e);
                }).val(editParm.value).append($option).select2('open');

                return p.select2;
            },
            getText: function (el, editParm) {
                return $(el).find("option:selected").text();
            },
            getValue: function (el, editParm) {
                return $(el).val();
            },
            resize: function (el, width, height, editParm) {
                el.width(width).height(height);
            },
            destroy: function (el) {
                $(el).off().select2('destroy');
            }
		};

		return myselect;
	}

});

转载于:https://my.oschina.net/huami/blog/714112