mirror of
https://gitee.com/layui/layui.git
synced 2025-10-27 03:09:32 +08:00
Add docs
This commit is contained in:
贤心
160
docs/table/examples/editModes.md
Normal file
160
docs/table/examples/editModes.md
Normal file
@@ -0,0 +1,160 @@
|
||||
<table class="layui-hide" id="ID-table-demo-editmodes"></table>
|
||||
{{!<!-- 原生 select 模板（推荐） -->
|
||||
<script type="text/html" id="TPL-select-primary">
|
||||
{{# var cityList = d.cityList || ["北京","上海","广州","城市-1"]; }}
|
||||
<select name="city" class="layui-border select-demo-primary" lay-ignore>
|
||||
<option value="">原生 select 框</option>
|
||||
{{# layui.each(cityList, function(i, v){ }}
|
||||
<option value="{{= v }}" {{= v === d.city ? 'selected' : '' }}>{{= v }}</option>
|
||||
{{# }); }}
|
||||
</select>
|
||||
</script>
|
||||
<!-- layui select 在 table 中使用（不推荐。因为当 select 出现在 table 底部时，可能会撑起多余高度） -->
|
||||
<script type="text/html" id="TPL-select-city">
|
||||
{{# var cityList = d.cityList || ["北京","上海","广州","城市-1"]; }}
|
||||
<select name="city" lay-filter="select-demo">
|
||||
<option value="">select 方式</option>
|
||||
{{# layui.each(cityList, function(i, v){ }}
|
||||
<option value="{{= v }}" {{= v === d.city ? 'selected' : '' }}>{{= v }}</option>
|
||||
{{# }); }}
|
||||
</select>
|
||||
</script>
|
||||
<!-- 推荐 -->
|
||||
<script type="text/html" id="TPL-dropdpwn-demo">
|
||||
<button class="layui-btn layui-btn-primary dropdpwn-demo">
|
||||
<span>{{= d.sex || '保密' }}</span>
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
</script>
|
||||
<!-- laydate -->
|
||||
<script type="text/html" id="TPL-laydate-demo">
|
||||
<input class="layui-input laydate-demo" placeholder="选择日期" value="{{= d.fieldname3 || '' }}">
|
||||
</script>
|
||||
<!-- colorpicker -->
|
||||
<script type="text/html" id="TPL-colorpicker-demo">
|
||||
{{# var color = d.color || ['#16baaa','#16b777','#1E9FFF','#FF5722','#FFB800','#393D49'][Math.round(Math.random()*5)]; }}
|
||||
<div class="colorpicker-demo" lay-options="{color: '{{= color }}'}"></div>
|
||||
</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 +'<br>当前行数据：'+ 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 +'<br>当前行数据：'+ JSON.stringify(data));
|
||||
}
|
||||
});
|
||||
|
||||
// laydate
|
||||
laydate.render({
|
||||
elem: '.laydate-demo',
|
||||
done: function(value, date, endDate){
|
||||
var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
|
||||
|
||||
// 显示 - 仅用于演示
|
||||
layer.msg('选中值: '+ value +'<br>当前行数据：'+ JSON.stringify(data));
|
||||
}
|
||||
});
|
||||
|
||||
// colorpicker
|
||||
colorpicker.render({
|
||||
elem: '.colorpicker-demo',
|
||||
done: function(value){
|
||||
var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
|
||||
|
||||
// 显示 - 仅用于演示
|
||||
layer.msg('选中值: '+ value +'<br>当前行数据：'+ 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 +'<br>当前行数据：'+ JSON.stringify(data));
|
||||
});
|
||||
|
||||
// 更多编辑方式……
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user