table下拉選擇器使用開源項目:TableSelect
在開源的基礎上修改支持多條件搜索、寬以及高的自訂
TableSelect
//開始使用
var tableSelect = layui.tableSelect;
tableSelect.render({
elem: '#demo', //定義輸入框input物件 必填
checkedKey: 'id', //表格的唯一建值,非常重要,影響到選中狀態 必填
searchKey: 'keyword', //搜索輸入框的name值 默認keyword
searchPlaceholder: '關鍵字搜索', //搜索輸入框的提示文字 預設關鍵字搜索
height:'400', //自訂高度
width:'900', //自訂寬度
table: { //定義表格參數,與LAYUI的TABLE模組一致,只是無需再定義表格elem
url:'',
cols: [[]]
},
done: function (elem, data) {
//選擇完後的回檔,包含2個返回值 elem:返回之前input對象;data:表格返回的選中的資料 []
//拿到data[]後 就按照業務需求做想做的事情啦~比如加個隱藏欄位放ID...
}
})
//預設值
只需要在觸發input上添加 ts-selected="1,2,3" 屬性即可 值需與checkedKey對應
//多條件搜索
tableSelect.render({
elem: '#demo3',
checkedKey: 'id',
searchType: 'more', //開啟多條件搜索
searchList: [
{searchKey: 'name', searchPlaceholder: '搜索用戶姓名'}, //搜索條件1
{searchKey: 'sex', searchPlaceholder: '搜索用戶性別'}, //搜索條件2
],
table: {
url: '../api/tableSelect.json',
cols: [[
{ type: 'radio' },
{ field: 'id', title: 'ID' },
{ field: 'username', title: '姓名' },
{ field: 'sex', title: '性別' }
]]
},
done: function (elem, data) {
//選擇完後的回檔,包含2個返回值 elem:返回之前input對象;data:表格返回的選中的資料 []
//拿到data[]後 就按照業務需求做想做的事情啦~比如加個隱藏欄位放ID...
}
})