layui/docs/table/examples/editModes.md

{{! <script type="text/html" id="TPL-select-primary"> {{# var cityList = d.cityList || ["北京","上海","广州","城市-1"]; }} 原生 select 框 {{# layui.each(cityList, function(i, v){ }} {{= v }} {{# }); }} </script> <script type="text/html" id="TPL-select-city"> {{# var cityList = d.cityList || ["北京","上海","广州","城市-1"]; }} select 方式 {{# layui.each(cityList, function(i, v){ }} {{= v }} {{# }); }} </script> <script type="text/html" id="TPL-dropdpwn-demo"> {{= d.sex || '保密' }} </script> <script type="text/html" id="TPL-laydate-demo"> </script> <script type="text/html" id="TPL-colorpicker-demo"> {{# var color = d.color || ['#16baaa','#16b777','#1E9FFF','#FF5722','#FFB800','#393D49'][Math.round(Math.random()*5)]; }}

</script>!}} <script> layui.use(function(){ var $ = layui.$; var table = layui.table; var form = layui.form; var dropdown = layui.dropdown; var laydate = layui.laydate; var colorpicker = layui.colorpicker; // 渲染 table.render({ elem: '#ID-table-demo-editmodes', url: '{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口 page: true, css: [ // 设置单元格样式 // 取消默认的溢出隐藏，并设置适当高度 '.layui-table-cell{height: 50px; line-height: 40px; overflow: visible;}', '.layui-table-cell .layui-colorpicker{width: 38px; height: 38px;}', '.layui-table-cell select{height: 36px; padding: 0 5px;}' ].join(''), cols: [[ // 表头 {field: 'id', title: 'ID', width:80, align: 'center', fixed: 'left'}, {field: 'city', title: '原生 select', width:150, templet: '#TPL-select-primary'}, //{field: 'city', title: 'layui select', width:150, templet: '#TPL-select-city'}, {field: 'sex', title: 'dropdown', width:115, align: 'center', templet: '#TPL-dropdpwn-demo'}, {field: 'date', title: 'laydate', width:150, templet: '#TPL-laydate-demo'}, {field: 'color', title: 'colorpicker', width:100, align: 'center', templet: '#TPL-colorpicker-demo'}, {field: 'sign', title: '文本', edit: 'textarea'} ]], done: function(res, curr, count){ var options = this; // 获取当前行数据 table.getRowData = function(elem){ var index = $(elem).closest('tr').data('index'); return table.cache[options.id][index] || {}; }; // 原生 select 事件 $('.select-demo-primary').on('change', function(){ var value = this.value; // 获取选中项 value var data = table.getRowData(this); // 获取当前行数据(如 id 等字段，以作为数据修改的索引) // 显示 - 仅用于演示 layer.msg('选中值: '+ value +'
当前行数据：'+ JSON.stringify(data)); }); // layui form select 事件 form.on('select(select-demo)', function(obj){ console.log(obj); // 获取选中项数据 // 获取当前行数据(如 id 等字段，以作为数据修改的索引) var data = table.getRowData(obj.elem); console.log(data); }); // dropdown 方式的下拉选择 dropdown.render({ elem: '.dropdpwn-demo', // trigger: 'hover', // 此处的 data 值，可根据 done 返回的 res 遍历来赋值 data: [{ title: '男', id: 100 },{ title: '女', id: 101 },{ title: '保密', id: 102 }], click: function(obj){ var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引) this.elem.find('span').html(obj.title); // 显示 - 仅用于演示 layer.msg('选中值: '+ obj.title +'
当前行数据：'+ JSON.stringify(data)); } }); // laydate laydate.render({ elem: '.laydate-demo', done: function(value, date, endDate){ var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引) // 显示 - 仅用于演示 layer.msg('选中值: '+ value +'
当前行数据：'+ JSON.stringify(data)); } }); // colorpicker colorpicker.render({ elem: '.colorpicker-demo', done: function(value){ var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引) // 显示 - 仅用于演示 layer.msg('选中值: '+ value +'
当前行数据：'+ JSON.stringify(data)); } }); // 单元格普通编辑事件 table.on('edit(ID-table-demo-editmodes)', function(obj){ var value = obj.value // 得到修改后的值 var data = obj.data // 得到所在行所有键值 var field = obj.field; // 得到字段 // 编辑后续操作，如提交更新请求，以完成真实的数据更新 // … // 显示 - 仅用于演示 layer.msg('编辑值: '+ value +'
当前行数据：'+ JSON.stringify(data)); }); // 更多编辑方式…… } }); }); </script>