layui 数据表格下拉框_layui-table-column-select（layui数据表格可搜索下拉框select）

layuiTableColumnEdit

在layui table的基础上对表格列进行扩展：点击单元格显示可搜索下拉列表及日期时间选择器。

一、介绍

此项目是为了解决layui table表格单元格(column)点击事件中无下拉列表(select)及日期时间选择器功能的问题。

a.可异步ajax请求后台数据。

b.可直接以数组形式传参

c.可输入关键字搜索下拉框数据

d.可加入日期时间选择器

二、使用说明

使用方法

layui.config({

base: 'module/'

}).extend({

layuiTableColumnEdit:'js/layuiTableColumnEdit'

}).use(['table','layuiTableColumnEdit','layer'], function () {

var table = layui.table,layuiTableColumnEdit = layui.layuiTableColumnEdit,$ = layui.$;

var params = [

{name:1,value:"张三1"},

{name:2,value:"张三2"},

{name:3,value:"张三3"},

{name:4,value:"张三4"},

{name:5,value:"张三5"}

];

var cols = table.render({

elem: '#tableId'

,id:'id'

,url:'data.json'

,height: 'full-90'

,page: true

,cols: [[

{type:'checkbox'}

,{field:'name',title: '姓名',width:120,event:'name'}

//select(下拉框)date(时间选择框)

,{field:'danxuan', title: '单选',width:120,event:'danxuan',select:{data:params}}

//data 为下拉框数据 enabled => true：多选，false：单选。默认为false

,{field:'duoxuan', title: '多选',width:120,event:'duoxuan',select:{data:params,enabled:true}}

//dateType表示日期时间格式，date为“yyyy-MM-dd”，datetime为“yyyy-MM-dd HH:ss:mm”

,{field:'birthday', title: '生日',width:120,event:'birthday',date:{dateType:'date'}}

]]

}).config.cols;

//参数cols是table.render({})中的cols属性值

var aopTable = layuiTableColumnEdit.aopObj(cols); //获取一个aop对象

aopTable.on('tool(tableEvent)',function (obj) {

var field = $(this).data('field');

console.log(obj);

if(field === 'danxuan'){

obj.update({danxuan:obj.value.value});

}

if(field === 'duoxuan'){

obj.update({duoxuan:obj.value[0].value});

}

if(field === 'birthday'){

obj.update({birthday:obj.value});

}

});

/*

* 注意：

*

* 1、 aopTable.on('tool(xxx)',function (obj) {})

* 2、 table.on('tool(yyy)',function (obj) {})

*

* 如果1中的xxx与2中的yyy字符串相同时，不能同时用，用了会造成后调用者覆盖前调用者。

* 应该直接用1来代替2，因为1中包含了2中的事件。

*

* 如果不相同，则可以同时使用。

* */

});

效果图

JQuery操作下拉框 select

要实现这种效果: html代码 1 2

jQuery对下拉框Select操作总结

jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...

struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input