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單元格中渲染下拉列表

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'});

});

注意：

可以使用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.參數說明

4.效果圖

ajax請求后臺：

數組形式傳參：

可輸入關鍵字搜索下拉框數據信息：

總結

以上是生活随笔為你收集整理的layui 数据表格下拉框_layui-table-column-select（layui数据表格可搜索下拉框select）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。