mirror of https://github.com/layui/layui
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
2.1 KiB
59 lines
2.1 KiB
<table class="layui-hide" id="ID-table-demo-editable"></table>
|
|
|
|
<!-- import layui -->
|
|
<script>
|
|
layui.use(function(){
|
|
var table = layui.table;
|
|
var util = layui.util;
|
|
|
|
// 根据返回数据中某个字段来判断开启该行的编辑
|
|
var editable = function(d){
|
|
if(d.editable) return 'text'; // 这里假设以 editable 字段为判断依据
|
|
};
|
|
|
|
// 创建表格实例
|
|
table.render({
|
|
elem: '#ID-table-demo-editable',
|
|
url: '/static/json/2/table/edit.json', // 此处为静态模拟数据，实际使用时需换成真实接口
|
|
page: true,
|
|
//,editTrigger: 'dblclick' // 触发编辑的事件类型（默认 click ）。 v2.7.0 新增，之前版本固定为单击触发
|
|
css: [
|
|
// 对开启了编辑的单元格追加样式
|
|
'.layui-table-view td[data-edit]{color: #16B777;}'
|
|
].join(''),
|
|
cols: [[
|
|
{checkbox: true, fixed: true},
|
|
{field:'id', title: 'ID', width:80, sort: true, fixed: true},
|
|
{field:'username', title: '用户名', width:80, edit: editable},
|
|
{field:'sex', title: '性别', width:80, sort: true, edit: editable},
|
|
{field:'city', title: '城市', width:80, edit: editable},
|
|
{field:'sign', title: '签名', edit: editable},
|
|
{field:'experience', title: '积分', sort: true, width:80, edit: editable}
|
|
]],
|
|
height: 310
|
|
});
|
|
|
|
// 单元格编辑后的事件
|
|
table.on('edit(ID-table-demo-editable)', function(obj){
|
|
var field = obj.field; // 得到修改的字段
|
|
var value = obj.value // 得到修改后的值
|
|
var oldValue = obj.oldValue // 得到修改前的值 -- v2.8.0 新增
|
|
var data = obj.data // 得到所在行所有键值
|
|
var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.0 新增
|
|
|
|
// 值的校验
|
|
if(value.replace(/\s/g, '') === ''){
|
|
layer.tips('值不能为空', this, {tips: 1});
|
|
return obj.reedit(); // 重新编辑 -- v2.8.0 新增
|
|
}
|
|
|
|
// 编辑后续操作，如提交更新请求，以完成真实的数据更新
|
|
// …
|
|
|
|
// 显示 - 仅用于演示
|
|
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ util.escape(value));
|
|
});
|
|
|
|
});
|
|
</script>
|