layUI数据表格可编辑扩展下拉框

单元格内容使用layui的 templet 功能。如： {field:'jtcyGxmc', title: '关系名称',templet: '#selectGxmc',sort:false}
代码:

layui.use(['table', 'layer', 'element', 'jquery', 'form'], function(table, layer, element, $, form){});

table.render渲染done回调

//展示已知数据table.render({elem: '#grid',cols: [[ //标题栏{field: 'id', title: 'ID', width: 80, sort: true},{field: 'username', title: '用户名', width: 120},{field: 'email', title: '邮箱', minWidth: 150},{field: 'city', title: '城市', width: 100},{field: 'selectName', title: '下拉框',  templet: '#selectGxmc'},{field: 'layuiData', title: '日期框', templet: '#layuiDataGxmc'},{field: 'editText', title: '编辑框', edit:'text'}]],data: [{"id": "10001","username": "杜甫","email": "xianxin@layui.com","city": "浙江杭州","layuiData":'','editText':'1'},{"id": "10002","username": "杜甫2","email": "xianxin@layui.com","city": "浙江杭州"}, {"id": "10003","username": "杜甫3","email": "xianxin@layui.com","city": "浙江杭州"}],skin: 'line' //表格风格,even: true//,page: true //是否显示分页//,limits: [5, 7, 10]//,limit: 5 //每页默认显示的数量,done: function (res, curr, count) {count || this.elem.next('.layui-table-view').find('.layui-table-header').css('overflow', 'auto');layui.each($('select'), function (index, item) {var elem = $(item);elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');});// form.render();}});

模版

<script type="text/html" id="selectGxmc" ><select name='selectName' lay-verify='selectVerify' lay-search=''"><option value=""></option><option value="父子">父子</option><option value="母子">母子</option><option value="姐弟">姐弟</option><option value="弟弟">弟弟</option></select>
</script>

监听

 // 监听修改update到表格中form.on('select', function (data) {debugger;var elem = $(data.elem);var trElem = elem.parents('tr');var tableData = table.cache['grid'];// 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值tableData[trElem.data('index')][elem.attr('name')] = data.value;// 其他的操作看需求 TODO});

样式调整

/* 防止下拉框的下拉列表被隐藏*/
.layui-table-cell { overflow: visible !important; }.layui-table-box {overflow: visible;
}.layui-table-body {overflow: visible;
}/* 使得下拉框与单元格刚好合适 */
td .layui-form-select{margin-top: -10px;margin-left: -15px;margin-right: -15px;
}

layUI数据表格可编辑扩展下拉框相关推荐

layUI数据表格可编辑扩展日期框
字段定义模版: {field: 'layuiData', title: '日期框', templet: '#layuiDataGxmc'} 模版内容 <script type="tex ...
Java 表单提交下拉框_Java实现Layui的form表单动态绑定下拉框
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 Java实现Layui的form表单动态绑定下拉框 [1]视图层爱好: 立即提交重置 $(function () { //[1]加载&初始化l ...
ajax使用json下拉框,ajax请求后台得到json数据后动态生成树形下拉框的方法
如下所示: $(function(){ $.ajax({ url:"departmentAction_getAllDep.action", type:"post" ...
layui弹出层中添加下拉框
layui弹出层中添加下拉框实习不到两个月,踩到的坑使用layui写了一个项目,负责其中的一小块,其中有一个页面需要在弹出层中写一个下拉框代码如下: <div class="la ...
layui 实现动态 radio 、select下拉框 jQuery赋值方法
layui radio .select 赋值方法下面展示一些 radio 单选框赋值. <div class="layui-inline layui-col-md4"> ...
今天来马克一下把数据库中的数据动态显示到前台页面下拉框中/默认选中
我知道方法应该有很多,但是我觉得我接下来说的方法还是很简单的. 首先最最重要的就是在前台页面页面头部写上 <%@taglib prefix="c" uri="htt ...
bootstrap获取下拉框数据_bootstrap动态调用select下拉框的实现方法
bootstrap动态调用select下拉框的实例代码 html代码: 填报部门: JS代码: /*获取下拉菜单*/ function showSel(){ $.ajax({ "type&q ...
Excel表格下载模板(带下拉框选项)
下载excel模板需要带下拉框选项,现在纯JAVA代码来实现 1.模板标题实体类 import cn.afterturn.easypoi.excel.annotation.Excel; import ...
dtree渲染下拉树，layui集成dtree，dtree渲染下拉框
文档位置 dtree官方文档地址链接渲染下拉树js dTreeUtil.js /**** @param id 要渲染的dom* @param data 数据* @param none 无数据时显示 ...

layUI数据表格可编辑扩展下拉框

layUI数据表格可编辑扩展下拉框相关推荐

最新文章

热门文章