LayUI 在 table 中使用 select 选择框

小灰灰 2022-11-27 08:55 494阅读 0赞

## 需求 ##

在表格中用 select 选择数据并返回到后台

## 实现 ##

### 所用扩展 ###

[码云链接][Link 1]  
大佬已经介绍了如何使用，以下是我个人的使用记录

### 使用情况(代码并不是连贯的） ###

layui.config({
        
                base: '/static/layui/'
            }).extend({
        
                tableEdit: 'tableEdit/tableEdit'
            });
    
    var params = [
                        {
         name: "text", value: "text" },
                        {
         name: "keyword", value: "keyword" },
                        {
         name: "integer", value: "integer" },
                        {
         name: "date", value: "date" },
                        {
         name: "boolean", value: "boolean" },
                        {
         name: "byte", value: "byte" },
                        {
         name: "short", value: "short" },
                        {
         name: "long", value: "long" },
                        {
         name: "float", value: "float" },
                        {
         name: "double", value: "double" }
                    ];
                    var cols = table.render({
        
                        id: 'field',
                        elem: '#demo',
                        type: 'checkbox'
                        , width: 600
                        , height: 'full-200'
                        , url: path + 'table/field/' + url + '/' + database + '/' + t
                        , cols: [[ //表头
                            {
         type: 'checkbox' },
                            {
         field: 'columnName', title: '字段' },
                            {
         field: 'columnType', title: '类型' },
                            {
        
                                field: 'esType', align: 'center', title: '<a style="color:red">映射类型（点击可更换）</a>'
                                , width: 200
                                , event: 'esType', config: {
         type: 'select', data: params, verify: true }
                                , templet: function (d) {
        
                                    if (d.esType) {
        
                                        if (d.esType.value) {
        
                                            return d.esType.value;
                                        }
                                        return d.esType;
                                    }
                                    return ''
                                }
                            }
                        ]]
                    }).config.cols;
    
                    var aopTable = tableEdit.aopObj(cols); //获取一个aop对象
    
                    aopTable.on('tool(test)', function (obj) {
        
                        var field = obj.field; //单元格字段
                        var value = obj.value.name; //修改后的值
                        var data = obj.data; //当前行旧数据
                        var event = obj.event; //当前单元格事件属性值
                        var update = {
        };
                        update[field] = value;
                        //把value更新到行中
                        obj.update(update);
                        /**
                         *说白了，此obj与table.on('tool(tableEvent)',function (obj) {})
                         *中的obj对象是同一个，所以可以如此操作。
                         *
                         * */
                    });

[Link 1]: https://gitee.com/yangqianlong98/layuiTableColumnEdit