layuiTableColumnEdit

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

  码云地址:https://gitee.com/yangqianlong98/layuiTableColumnEdit

一、介绍

  此项目是为了解决layui table表格单元格(column)点击事件中无下拉列表(select)及日期时间选择器功能的问题。
  a.可异步ajax请求后台数据。
  b.可直接以数组形式传参
  c.可输入关键字搜索下拉框数据
  d.可加入日期时间选择器

二、使用说明

使用方法

  

<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,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中的事件。
*
* 如果不相同,则可以同时使用。
* */
});
</script>

  

效果图

layui-table-column-select(layui数据表格可搜索下拉框select)的更多相关文章

  1. iviewUI框架,使用table表格内render下拉框select被遮盖问题

    使用props:{  transfer:true },即可   1.原本代码:

  2. JQuery操作下拉框 select

    要实现这种效果: html代码 1<script src="js/jquery-1.7.2.min.js"></script> 2 <table> ...

  3. jQuery对下拉框Select操作总结

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

  4. vue 表格中的下拉框单选、多选处理

    最近在用vue做前后端分离,需要在表格中用到下拉框,由于需求变动,从最开始的单选变为多选,折腾了许久,记录一下,供后人铺路 vue 中的表格下拉框单选 collectionsColnumOptions ...

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

    原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($(&q ...

  6. 下拉框select中option居中样式

    下拉框select中option居中样式 text-align:center;text-align-last:center;

  7. 【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】

    radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...

  8. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  9. vue 获取数据联动下拉框select ,并解决报Duplicate value found in v-for="...": "". Use track-by="$index" 错误

    公司项目中遇到一个问题,联动下拉框,并且数据是使用vue-resource从后台获取的,格式不利于输出联动下拉框,联动下拉框是第一个下拉框输出一个数组里每一项json的一个text值,从而第二下拉框输 ...

随机推荐

  1. C#中提示:当前上下文中不存在名称“ConfigurationManager”

    场景 想要在程序中获取App.config中设置的内容. 想要通过 ConfigurationManager.AppSettings[key]; 来进行获取,已经添加 using System.Con ...

  2. 定制Dynamics 365 Portal 界面

    1.通过Portal Designer直接进行定制 以管理员用户登录Portal后会出现Portal Designer,可以进行对homepage的部分元素及Navigation直接进行定制 2.通过 ...

  3. git到GitHub的操作和遇到的一些问题

    一.新建完项目后执行git git status //查看状态,任何时候都可以用 1. git init //初始化文件夹,并创建.git本地仓库(.git默认隐藏) 2. git add . //把 ...

  4. 关于svn外网访问的问题-搭建成功

    昨天聊到了svn外网问题.今天,无限查资料,虽然眼累了一些,不过最终实现.还是开心了一下! 背景:本机设置svn服务器,搭建代码库并开设外网 供不再同一地点的他人来访问 上图: 1.svn服务器端 搭 ...

  5. Java中数组与集合的相互转换

    数组与List的相互转换 List转数组:采用集合的toArray()方法 数组转List:采用Arrays的asList()方法 数组转换为集合 注意:在数组转集合的过程中,要注意是否使用了视图的方 ...

  6. 【解决】Failed to restart network.service: Unit network.service not found.

    问题:使用systemctl restart network 或 service network restart 命令重启网卡失败. 分析:原因其实也很简单,命令用错了,造成了找不到相应的网卡服务. ...

  7. swoole简介

    swoole是PHP的扩展,又不是一个普通的扩展.普通的扩展只是提供一个库函数.而swoole扩展在运行后会接管PHP的控制权,进入事件循环.当IO事件发生后,swoole会自动回调指定的PHP函数. ...

  8. How to: Apply Attributes to Entity Properties when Using Model First 如何:在ModelFirst时将属性应用于实体属性

    In a Model First data model, object properties are declared in the designer-generated files, and you ...

  9. layui table 表格查询无效问题

    [热身话题] 在开发的过程中,大量数据的展示大多采用表格的方式,直观,清晰.在这里,我也使用过一些框架Bootstrap.table ,Dev table ,layui table.本次采用的layu ...

  10. Android开发之OkHttp介绍

    要论时下最火的网络请求框架,当属OkHttp了.自从Android4.4开始,google已经开始将源码中的HttpURLConnection替换为OkHttp,而在Android6.0之后的SDK中 ...