欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

layui-table-column-select(layui数据表格可搜索下拉框select)

程序员文章站 2022-05-03 12:04:44
layui-table-column-select 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表。 码云地址:https://gitee.com/kkk12/layui-table-select 一、介绍 此项目是为了解决layui table表格单元格(colum ......

 

layui-table-column-select

  在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表。

  码云地址:https://gitee.com/kkk12/layui-table-select

一、介绍

  此项目是为了解决layui table表格单元格(column)点击事件中无下拉列表(select)功能的问题。
  a.可异步ajax请求后台数据。
  b.可直接以数组形式传参
  c.可输入关键字搜索下拉框数据

二、使用说明

1.使用方法

  下载define/table-select整个文件夹,放在你的项目里面,然后使用模块加载的方式使用:

layui.config({
    base: 'define/'
}).extend({
    layuitablecolumnselect: 'define/table-select/js/layui-table-select'
}).use(['layuitablecolumnselect'], function () {
    var layuitablecolumnselect= layui.layuitablecolumnselect;
    
});

2.在layui table单元格中渲染下拉列表

<table class="layui-hide" id="tableid" lay-filter="tableevent"></table>
<script>
layui.use(['table','layuitablecolumnselect'], function () {
    var table = layui.table;
    var layuitablecolumnselect = layui.layuitablecolumnselect;
    var data=[];
    data.push({id:1,name:'张三1',age:23,state:1});
    data.push({id:2,name:'张三2',age:23,state:1});
    data.push({id:3,name:'张三3',age:23,state:1});
    data.push({id:3,name:'张三4',age:23,state:0});
    data.push({id:4,name:'张三5',age:23,state:0});
    data.push({id:6,name:'张三6',age:23,state:0});
    table.render({
        elem: '#tableid'
        ,id:'id'
        ,data:data
        ,height: 'full-90'
        ,page: true
        ,cols: [[
            {type:'checkbox'}
            ,{field:'name',event:'addselect',title: '名称',width:150}
            ,{field:'age', title: '年龄',width:305}
            ,{field:'state', title: '故障状态',width:90,event:'addstate',templet:function (d) {
                    if(d.state == 0){
                        return '异常';
                    }else if(d.state == 1){
                        return '正常';
                    }else {
                        return '异常';
                    }
                }}
        ]]
    });
    var selectparams = [];
    selectparams.push({name:'1',value:'测试1'});
    selectparams.push({name:'2',value:'测试2'});
    selectparams.push({name:'3',value:'测试3'});
    selectparams.push({name:'4',value:'测试4'});
    selectparams.push({name:'5',value:'测试5'});
    layuitablecolumnselect.addselect({data:selectparams,layfilter:'tableevent',event:'addselect'});
    layuitablecolumnselect.addselect({url:'selectdata.json',where:{},layfilter:'tableevent',event:'addstate'});
});
</script>

  注意:
  可以使用url传递数据,也可以使用data传递数据,如果使用url传递数据,参数是where字段为ajax后台请求参数。

数据格式

  data数据格式为name和value字段。
  数组形式传参时格式:

[
    {name:1,value:"测试1"},
    {name:2,value:"测试2"},
    {name:3,value:"测试3"},
    {name:4,value:"测试4"},
    {name:5,value:"测试5"}
]

ajax请求后台时格式:

{
    data:[
        {name:1,value:"测试1"},
        {name:2,value:"测试2"},
        {name:3,value:"测试3"},
        {name:4,value:"测试4"},
        {name:5,value:"测试5"}
    ]
}

3.参数说明

layui-table-column-select(layui数据表格可搜索下拉框select)

4.效果图

ajax请求后台:

layui-table-column-select(layui数据表格可搜索下拉框select)

 

 

数组形式传参:

layui-table-column-select(layui数据表格可搜索下拉框select)

 

 

 

可输入关键字搜索下拉框数据信息:

layui-table-column-select(layui数据表格可搜索下拉框select)