layui表格集成select选择框和switch开关

朴灿烈づ我的快乐病毒、 2023-10-06 10:37 36阅读 0赞

## 前言 ##

在前文 [layui表格使用自定义模板templet][layui_templet]中，我们已经初步感受了layui表格使用自定义模板的基础操作。现在，在自定义模块应用的基础上，我们进一步丰富layui表格对其他组件的集成。

觉得本文有所帮助的朋友们，请不吝点出你的赞。

**layui表格中添加select下拉选择框和switch开关** 效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211X3dpbmQ_size_16_color_FFFFFF_t_70]  
本文中，表格将完全使用静态数据渲染，数据如下：

[
    	{
        
    		"id": 1,
    		"name": "iPhone",
    		"type": 0,
    		"price": 6000.0,
    		"size": 55,
    		"status": 0,
    		"description": "说明"
    	},
    	{
        
    		"id": 2,
    		"name": "watch",
    		"type": 1,
    		"price": 500.0,
    		"size": 35,
    		"status": 1,
    		"description": "说明"
    	},
    	{
        
    		"id": 3,
    		"name": "television",
    		"type": 1,
    		"price": 1000.0,
    		"size": 90,
    		"status": 1,
    		"description": "说明"
    	},
    	{
        
    		"id": 4,
    		"name": "computer",
    		"type": 1,
    		"price": 4500.0,
    		"size": 60,
    		"status": 1,
    		"description": "说明"
    	}
    ]

## 1 switch ##

### 1.1 展示switch ###

在表格中展示switch开关，关键也在于`templet`

table.render({
        
        elem: '#test_table'
        , id: 'testReload'
        , even: true //开启隔行背景
        , data: data
        , size: 'lg'
        , title:商品详情表'
        , cols:
            [[{
        field: 'id', title: '编号', width: 60, align: 'center'}
               , {
        field: 'type', title: '类 型', width: 150, align: 'center', templet: fn1('type')}
               , {
        field: 'name', title: '商品名称', width: '12%', align: 'center'}
               , {
        field: 'price', title: '价 格', width: '9.1%', align: 'center'}
               , {
        field: 'size', title: '数 量', width: '9.5%', align: 'center'}
               , {
        field: 'status', title: '状 态', width: 120, align: 'center', templet: '#status'}
               , {
        field: 'description', title: '说 明', align: 'center'}
               , {
        
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#test_lineBar',
                    width: 120,
                    align: 'center'
                }
            ]]
    });

我们看上面`table`的渲染实现，`status`这一列使用了`templet`，绑定了`#status`，显然是使用了模板选择器，我们看一下模板做了什么事：

一看便知，这段模板根据数据的`status`值，去渲染了一个`switch`，如果status=1，则switch为选中状态，否则为未选中状态。

### 1.2 修改switch ###

如果到此为止，那么这个switch仅仅能看而已，不信我们加一个编辑按钮监听事件，弹出所在行数据。

table.on('tool(test_bar)', function (obj) {
        
        var data = obj.data;
        var layEvent = obj.event;
    
        switch (layEvent) {
        
            case 'edit':
                layer.alert(JSON.stringify(data));
                break;
        }
    });

实践发现，就算修改了【状态】这一栏的开关状态，弹出的数据中，status的值一直不变。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211X3dpbmQ_size_16_color_FFFFFF_t_70 1]  
那么，我们怎么通过点击switch，将数据修改呢？

有两个思路，其一是，监听`switch`点击事件，获取当前`switch`状态，直接向后端发起修改行数据的请求，这里很容易实现，以后展开说。

另一个思路就是，监听`switch`点击事件，修改`table`的`cache`。

// 监听开关事件
    form.on('switch(status)', function (data) {
        
        var status = this.checked ? 1 : 0;
        console.log("status->>>>>>>>>>>>>>", status);
        console.log("data->>>>>>>>>>>>>>", data);
        modifyTableCacheBySwitch(data, status);
    });
    
    // 更新table的cache
    function modifyTableCacheBySwitch(data, status) {
        
        var table = layui.table;
        var switchElem = $(data.elem);
        var tdElem = switchElem.closest('td');
        var trElem = tdElem.closest('tr');
        var tableView = trElem.closest('.layui-table-view');
        table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = status;
    }

到此再次弹出当前行的数据，发现`status`的值已更新，这样将当前行的数据整体提交给后端就达到了更新数据的目的。

## 2 select ##

### 2.1 展示select ###

在前面 `table.render` 中，`type`这一列，也绑定了`templet`：

{
        field: 'type', title: '类 型', width: 150, align: 'center', templet: fn1('type')}

我们看一下，这个模板实现了什么：

var fn1 = function (field) {
        
        return function (data) {
        
            var value = data[field];
            return [
                '<select name="type" lay-filter="type" lay-search="true" value="' + value + '">',
                '<option value="" >请选择状态</option>',
                '<option value="0"' + (value === 0 ? 'selected' : '') + '>国产</option>',
                '<option value="1"' + (value === 1 ? 'selected' : '') + '>进口</option>',
                '</select>'
            ].join('');
        };
    };

另外，还需要引用 [layui社区高手 岁月小偷][layui_] 提供的插件，我已经附在项目内，上传到GitHub中[https://github.com/ThinkMugz/springboot-layui-demo][https_github.com_ThinkMugz_springboot-layui-demo] 了

layui.extend({
        optimizeSelectOption: 'layui/plugin/optimizeSelectOption/optimizeSelectOption'})
            .use(['table', 'layer', 'form', 'optimizeSelectOption'], function () {

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211X3dpbmQ_size_16_color_FFFFFF_t_70 2]

### 2.2 修改select ###

与switch同理，select也需要监听事件，当进行下拉选择框选择后，更新table的cache：

// 监听下拉框选择事件修改表格缓存
    form.on('select(type)', function (data) {
        
        console.log("data->>>>>>>>>>>>>>>>", data);
        var selectElem = $(data.elem);
        var tdElem = selectElem.closest('td');
        var trElem = tdElem.closest('tr');
        var tableView = trElem.closest('.layui-table-view');
        table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = data.value;
    });

## 3 完整代码 ##

test.html的完整代码如下，完整的项目请到 github [https://github.com/ThinkMugz/mudemo][https_github.com_ThinkMugz_mudemo] 中获。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试页面</title>
        <link rel="stylesheet" href="layui/css/layui.css" media="all"/>
    </head>
    <body>
    <div>
        <table id="test_table" lay-filter="test_bar"></table>
    </div>
    
    <script src="layui/layui.js"></script>
    <script src="js/libs/jquery-2.1.1.min.js"></script>
    <script src="utils/common.js"></script>
    
    
    <script type="text/html" id="test_lineBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>
    
    <script type="text/html" id="status">
        {
        {
        #  if(d.status==1){
         }}
        <input type="checkbox" name="status" lay-skin="switch" checked lay-text="正常|禁售" value={
        {
         d.status }}
               lay-filter="status">
        {
        {
        #  } else {
         }}
        <input type="checkbox" name="status" lay-skin="switch" lay-text="正常|禁售" value={
        {
         d.status}}
               lay-filter="status">
        {
        {
        #  } }}
    </script>
    
    <script>
        layui.extend({
        optimizeSelectOption: 'layui/plugin/optimizeSelectOption/optimizeSelectOption'})
            .use(['table', 'layer', 'form', 'optimizeSelectOption'], function () {
        
                var table = layui.table
                    , layer = layui.layer //弹层
                    , form = layui.form;
    
                var fn1 = function (field) {
        
                    return function (data) {
        
                        var value = data[field];
                        return [
                            '<select name="type" lay-filter="type" lay-search="true" value="' + value + '">',
                            '<option value="" >请选择状态</option>',
                            '<option value="0"' + (value === 0 ? 'selected' : '') + '>国产</option>',
                            '<option value="1"' + (value === 1 ? 'selected' : '') + '>进口</option>',
                            '</select>'
                        ].join('');
                    };
                };
    
                var data = [
                    {
        
                        "id": 1,
                        "name": "iPhone",
                        "type": 0,
                        "price": 6000.0,
                        "size": 55,
                        "status": 0,
                        "description": "说明"
                    },
                    {
        
                        "id": 2,
                        "name": "watch",
                        "type": 1,
                        "price": 500.0,
                        "size": 35,
                        "status": 1,
                        "description": "说明"
                    },
                    {
        
                        "id": 3,
                        "name": "television",
                        "type": 1,
                        "price": 1000.0,
                        "size": 90,
                        "status": 1,
                        "description": "说明"
                    },
                    {
        
                        "id": 4,
                        "name": "computer",
                        "type": 1,
                        "price": 4500.0,
                        "size": 60,
                        "status": 1,
                        "description": "说明"
                    }
                ];
    
                table.render({
        
                    elem: '#test_table'
                    , id: 'testReload'
                    , even: true //开启隔行背景
                    , data: data
                    , size: 'lg'
                    , title:
                        '商品详情表'
                    , cols:
                        [[{
        field: 'id', title: '编号', width: 60, align: 'center'}
                        , {
        field: 'type', title: '类 型', width: 150, align: 'center', templet: fn1('type')}
                        , {
        field: 'name', title: '商品名称', width: '12%', align: 'center'}
                        , {
        field: 'price', title: '价 格', width: '9.1%', align: 'center'}
                        , {
        field: 'size', title: '数 量', width: '9.5%', align: 'center'}
                        , {
        field: 'status', title: '状 态', width: 120, align: 'center', templet: '#status'}
                        , {
        field: 'description', title: '说 明', align: 'center'}
                        , {
        
                            fixed: 'right',
                            title: '操作',
                            toolbar: '#test_lineBar',
                            width: 120,
                            align: 'center'
                        }
                    ]]
                });
    
                table.on('tool(test_bar)', function (obj) {
        
                    var data = obj.data;
                    var layEvent = obj.event;
    
                    switch (layEvent) {
        
                        case 'edit':
                            layer.alert(JSON.stringify(data));
                            break;
                    }
                });
    
                // 监听下拉框选择事件修改表格缓存
                form.on('select(type)', function (data) {
        
                    console.log("data->>>>>>>>>>>>>>>>", data);
                    var selectElem = $(data.elem);
                    var tdElem = selectElem.closest('td');
                    var trElem = tdElem.closest('tr');
                    var tableView = trElem.closest('.layui-table-view');
                    table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = data.value;
                });
    
                // 监听开关事件
                form.on('switch(status)', function (data) {
        
                    var status = this.checked ? 1 : 0;
                    console.log("status->>>>>>>>>>>>>>", status);
                    console.log("data->>>>>>>>>>>>>>", data);
                    modifyTableCacheBySwitch(data, status);
                });
    
                function modifyTableCacheBySwitch(data, status) {
        
                    var table = layui.table;
                    var switchElem = $(data.elem);
                    var tdElem = switchElem.closest('td');
                    var trElem = tdElem.closest('tr');
                    var tableView = trElem.closest('.layui-table-view');
                    table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = status;
                }
            });
    </script>
    
    </body>
    </html>

[layui_templet]: https://blog.csdn.net/mu_wind/article/details/97498951
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211X3dpbmQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200606204111220.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211X3dpbmQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211X3dpbmQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200606210710607.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211X3dpbmQ=,size_16,color_FFFFFF,t_70
[layui_]: https://fly.layui.com/u/6497232
[https_github.com_ThinkMugz_springboot-layui-demo]: https://github.com/ThinkMugz/springboot-layui-demo
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211X3dpbmQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200606215420395.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211X3dpbmQ=,size_16,color_FFFFFF,t_70
[https_github.com_ThinkMugz_mudemo]: https://github.com/ThinkMugz/mudemo