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. Redis来啦~~

    一. 先聊点别的 1. sql & nosql sql指关系型数据库,如Oracle,MySQL等,nosql泛指非关系型数据库,如MongoDB,Redis等:SQL数据存在特定结构的表中, ...

  2. Python 使用中出现错误:ImportError: No module named _sqlite3

    解决办法: 1.先安装sqlite3    从sqlite官网:https://www.sqlite.org/download.html 上下载linux环境下的安装包:sqlite-autoconf ...

  3. Sql Server数据库常用Transact-SQL脚本

    数据库 1.创建数据库 USE master ; GO CREATE DATABASE Sales ON ( NAME = Sales_dat, FILENAME = 'C:\Program File ...

  4. Nacos 集群部署

    关于nacos 集群部署,网上的示例往往不全或不可用,而官方的教程太简单了.官方也提供了一个 docker  + nacos 的伪集群的 部署示例.但毕竟是 伪, 不能实际生产使用. 全网就几乎就没有 ...

  5. localStorage和sessionStorage的共同点和区别

    共同点: 1.localStorage和sessionStorage都是用来存储客户端临时信息的对象. 2.他们均只能存储字符串类型的对象. 3.不同浏览器无法共享localStorage或sessi ...

  6. IT兄弟连 HTML5教程 CSS3属性特效 新增颜色模式

    对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分.网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.随着CSS3的出现以及越来越多的浏览器对它的 ...

  7. C# get folder's Md5 generated by file's and filename's md5. get dictionary md5

    C# get dictionary md5 static string GetDicMD5(string dirFullName) { logBuilder = new StringBuilder() ...

  8. Python3 pickle模块用法

    pickle(python3.x)和cPickle(python2.x的模块)相当于java的序列化和反序列化操作. 常采用下面的方式使用: import pickle pickle.dump(obj ...

  9. js 淡入淡出的tab选项卡

    代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  10. Apply Grouping to List View Data 将分组应用于列表视图数据

    This lesson will teach you how to apply grouping to List View data. For this purpose, you will group ...