EasyUi datagrid editor 自定义编辑器 mutilbox 一列多编辑器一列包含下拉框文本输入框

那就吃个西红柿

已于 2024-05-29 10:02:16 修改

阅读量2.3k

点赞数

分类专栏： EasyUi 文章标签： easyui 编辑器前端

于 2022-05-20 13:49:48 首次发布

本文链接：https://blog.csdn.net/tttesbit/article/details/124878703

版权

EasyUi 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

💗介绍

最近在开发过程中遇到了一个问题，要在一个dagagrid表格的一列中包含下拉框和文本编辑框，并且当下拉框选择第一个值时联动隐藏后面的编辑框。如下图所示。

关于自定义编辑器的实现，EasyUI官方文档有简单的介绍。详情见datgrid数据表格一栏。

EasyU官网-datagrid数据表格--自定义编辑器（点击可跳转至EasyUi官网）

🦉自定义编辑器mutilbox的代码：

// mutilbox
$.extend($.fn.datagrid.defaults.editors, {
    mutilbox: {
        init: function (container, options) {
            // 生成行唯一id
            var rowIndex = generateId()

            // inputContainer 是固定格式
            var inputContainer = $('<div style="width:' + container.width() + '" ></div>').appendTo(container);

            // input只做展示用
            var input = $('<input type="text" style="display:none;" >').appendTo(inputContainer);

            // input2 和 input3 才是对应页面的下拉框和输入框，上面的inputContainer和input是固定写法，要改就改下面的input2 和 input3
            // input2 对应下拉框
            var input2 = $('<input type="text" style="width: ' + container.width() * 0.4 + '" >').appendTo(inputContainer);

            // input3 对应对应右侧的输入文本框
            var input3 = $('<input type="text" id="'+rowIndex+'" style="width: ' + container.width() * 0.6 + '">').appendTo(inputContainer);


            // 定义下拉选择框
            input2.combobox({
                valueField: 'value',
                textField: 'label',
                panelHeight: 'auto',
                editable:false,
                required:true,
                data: [{
                    label: 'http状态码',
                    value: '0',
                    selected:true
                },{
                    label: 'body数据',
                    value:  '1'
                }],
                onChange:function(val){
                    // var text = $(this).combobox('getText');
                    // input.val(text);

                    if (parseInt(val) === 0){
                        $('#'+rowIndex).next().css("display","none")

                    }else if (parseInt(val)  === 1){
                        $('#'+rowIndex).next().css("display","")
                    }
                }
            });

            // 定义文本输入框
            input3.textbox({
                validType:'maxLength[1000]',
                onChange: function (val) {
                    input.val(val);
                }
            });


            // 
            inputContainer.input = [input, input2, input3];
            return inputContainer;

        },
        destroy: function (target) {


        },
        getValue: function (target) {

            // getValue方法是选好下拉选择框的值、填了文本框的值之后，mutilbox退出编辑状态然后呈现数据的样子。（下拉框衔接文本框的值的符号可以自己定义，我选择的是:）。比如 http:200
            // 当datgrid表格调用endEdit方法时触发getValue方法，return的值即退出编辑状态保存后在行中显示的值
            // 两种情况
            if (target.input[1].combobox('getText') === 'http状态码'){
                return target.input[1].combobox('getText')+':'+target.input[2].textbox('getValue');
            }else if (target.input[1].combobox('getText') === 'body数据'){
                return target.input[1].combobox('getText')+':'+target.input[2].textbox('getValue');
            }

        },
        setValue: function (target, value) {

            // 初始化（init)完毕后、当表格进入编辑状态时，即调用beginEdit方法时，触发此方法，此时value的值为""
            // 当编辑这一列的时候，会触发此方法，列进入编辑状态，需要对页面呈现的数据比如 http:200进行处理分割，将值设回下拉框和文本框中。
            //     if (value.indexOf('http状态码') !== -1){
            //         // http状态码
            //         target.input[1].combobox('setValue',0);
            //         //值
            //         target.input[2].textbox('setValue',value.split(':')[1]);
            //     }else{
            //         // body数据
            //         target.input[1].combobox('setValue',1);
            //         //值
            //         target.input[2].textbox('setValue',value.split(':')[1]);
            //     }
        },
        resize: function (target, width) {


        }
    }
});


//生成随机数,其值作为单个编辑器input3的唯一id(只被input3用到了，其它没用到）
function generateId() {
    const s = [];
    const hexDigits = '0123456789abcdef';
    for (let i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    // bits 12-15 of the time_hi_and_version field to 0010
    s[14] = '4';
    // bits 6-7 of the clock_seq_hi_and_reserved to 01
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
    s[8] = s[13] = s[18] = s[23] = '-';

    const uuid = s.join('');
    return uuid;
}

当编辑完后表格的一行后然后调用endEdit方法后，多编辑器列保存值显示的效果如下。即getValue的return返回的值。如下图红色标记处。当进入编辑状态时，又会变成两个编辑器。

🦉使用

定义datagrid表格的列时，type值写成刚刚自定义的编辑器的名称即可。options中可以不写，如果写的话，值可以在自定义编辑器的调用init()方法初始化的时候拿到options的内容。（下面的这种定义格式是通过获取table表格的Id然后绑定生成表格的方式。有两种生成easyUi的dadagrid数据表格的方式。见官方文档Api）