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... } })