解决table中下拉框的大部分问题

分享 已结 44 1189
单身狗278
单身狗278 2019-12-2
悬赏:20飞吻
a.可异步ajax请求后台数据。
b.可直接以数组形式传参
c.可输入关键字搜索下拉框数据

码云地址: https://gitee.com/yangqianlong98/layuiTableColumnSelect
代码展示
<table class="layui-hide" id="tableId" lay-filter="tableEvent"></table>
<script>
layui.config({
base: 'module/'
}).extend({
layuiTableColumnSelect:'js/layuiTableColumnSelect'
}).use(['table','layuiTableColumnSelect','layer'], function () {
var table = layui.table,layer = layui.layer;
var layuiTableColumnSelect = layui.layuiTableColumnSelect;

var selectParams = [
{name:1,value:"张三1"},
{name:2,value:"张三2"},
{name:3,value:"张三3"},
{name:4,value:"张三4"},
{name:5,value:"张三5"}
];

table.render({
elem: '#tableId'
,id:'id'
,url:'tableData.json'
,height: 'full-90'
,page: true
,cols: [[
{type:'checkbox'}
,{field:'name',title: 'table输入框',width:120,edit:'text'}
,{field:'age', title: 'table点击事件',width:120,event:'age'}
,{field:'state', title: 'ajax传参',width:120}
,{field:'test', title: '数组传参',width:120}
]],
done:function (e) {
layuiTableColumnSelect.render({
id:'#tableId',
field:'state',
url:'selectData.json',
where:{},
callback:function (obj) {
layer.msg(JSON.stringify(obj));
}
});

layuiTableColumnSelect.render({
id:'#tableId',
field:'test',
data:selectParams,
callback:function (obj) {
layer.msg(JSON.stringify(obj));
}
});
}
});

table.on('tool(tableEvent)',function (obj) {
layer.msg("1111111");
});

table.on('edit(tableEvent)',function (obj) {
layer.msg("edit");
});
});
</script>
效果图


回帖
  • 谢Sir
    2019-12-20
    @单身狗278 你的这个表格下拉框可以根据行信息显示不同的下拉内容吗?
    0 回复
  • @幸运是个好名字 已经整合进去了。你到码云上下载最新代码。示例:
    <table class="layui-hide" id="tableId" lay-filter="tableEvent"></table>
    <script>
    layui.config({
    base: 'module/'
    }).extend({
    layuiTableColumnEdit:'js/layuiTableColumnEdit'
    }).use(['table','layuiTableColumnEdit','layer'], function () {
    var table = layui.table,layer = layui.layer;
    var layuiTableColumnEdit = layui.layuiTableColumnEdit;
    var $ = layui.$;
    var selectParams = [
    {name:1,value:"张三1"},
    {name:2,value:"张三2"},
    {name:3,value:"张三3"},
    {name:4,value:"张三4"},
    {name:5,value:"张三5"}
    ];
    table.render({
    elem: '#tableId'
    ,id:'id'
    ,url:'tableData.json'
    ,height: 'full-90'
    ,page: true
    ,cols: [[
    {type:'checkbox'}
    ,{field:'name',title: 'table输入框',width:120}
    ,{field:'age', title: 'table点击事件',width:120,sort:'true'}
    ,{field:'state', title: 'ajax传参',width:120,event:'state'}
    ,{field:'test', title: '数组传参',width:120,event:'test',sort:'true'}
    ]],
    done:function (res, curr, count) {
    }
    });
    table.on('tool(tableEvent)', function(obj){
    if(obj.event === 'state'){
    var td = $(obj.tr).find("td[data-field='state']")[0];
    $.getJSON('selectData.json',{},function (result) {
    layuiTableColumnEdit.createSelect({
    id:'#tableId',
    data:result.data,
    element:td,
    //enabled:true,//true:开启多选,false:单选。默认为false
    callback:function (obj1) {
    console.log(obj1.select); //下拉选项数据
    console.log(obj1.td); //当前单元格(td)DOM元素
    obj.update({age: parseInt(obj1.select.name)});
    //把选择的显示数据更新到单元格中显示
    layuiTableColumnEdit.update({element:td,value:obj1.select.value});
    }
    });
    });
    }else if(obj.event === 'test'){
    var testTd = $(obj.tr).find("td[data-field='test']")[0];
    layuiTableColumnEdit.createSelect({
    id: '#tableId',
    element: this,
    data: selectParams,
    callback: function (obj2) {
    console.log(obj2.select); //下拉选项数据
    console.log(obj2.td); //当前单元格(td)DOM元素
    //把选择的数据更新到行数据中
    obj.update({test: parseInt(obj2.select.name)});
    //把选择的显示数据更新到单元格中显示
    layuiTableColumnEdit.update({element:testTd,value:obj2.select.value});
    }
    });
    }
    });
    });
    </script>
    1 回复
  • @幸运是个好名字 那就帮忙点赞
    1 回复
  • PTG
    2019-12-16
    你的demo报错啦
    0 回复
  • 单身狗278
    2019-12-16
    @PTG 我在本地测了,没有报错,请问你是怎么测的?
    0 回复
  • PTG
    2019-12-16
    0 回复
  • 单身狗278
    2019-12-16
    0 回复
  • 单身狗278
    2019-12-16
    @PTG 这么进去url才是正确的
    0 回复
  • 单身狗278
    2019-12-20
    @谢Sir 同一个单元格,数据源是相同的,反之可以不同。
    0 回复
  • 小公猪
    2020-3-6
    @单身狗278 请问怎么让从下拉框默认的是空,点开才能看到下拉框的值。你现在的是随机生成的填充进去
    0 回复