mirror of https://github.com/layui/layui
更新 table 示例
parent
3b3794dfb4
commit
c4be812531
|
@ -70,9 +70,9 @@
|
||||||
</div>
|
</div>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<table id="test" lay-filter="test"></table>
|
<table id="test"></table>
|
||||||
|
|
||||||
<script src="../src/layui.js" src1="https://cdn.staticfile.org/layui/2.6.13/layui.js"></script>
|
<script src="../src/layui.js" src1="https://cdn.staticfile.org/layui/2.7.6/layui.js"></script>
|
||||||
<script>
|
<script>
|
||||||
(function(off){
|
(function(off){
|
||||||
if(!off) return;
|
if(!off) return;
|
||||||
|
@ -130,7 +130,7 @@ layui.use(['table', 'dropdown'], function(){
|
||||||
].join('')
|
].join('')
|
||||||
//,className: '.demo-table-view'
|
//,className: '.demo-table-view'
|
||||||
|
|
||||||
//,size: 'lg'
|
//,size: 'sm'
|
||||||
//,skin: 'line'
|
//,skin: 'line'
|
||||||
//,loading: false
|
//,loading: false
|
||||||
|
|
||||||
|
@ -148,6 +148,7 @@ layui.use(['table', 'dropdown'], function(){
|
||||||
}]
|
}]
|
||||||
//,escape: false
|
//,escape: false
|
||||||
,editTrigger: 'dblclick'
|
,editTrigger: 'dblclick'
|
||||||
|
//,cellMaxWidth: 320
|
||||||
,cols: !1 ? test_cols : [[
|
,cols: !1 ? test_cols : [[
|
||||||
{type: 'checkbox', fixed: 'left'}
|
{type: 'checkbox', fixed: 'left'}
|
||||||
//,{type: 'numbers', fixed: 'left'}
|
//,{type: 'numbers', fixed: 'left'}
|
||||||
|
@ -155,7 +156,7 @@ layui.use(['table', 'dropdown'], function(){
|
||||||
,{field:'username', title:'用户名', width:120, edit: function(d){
|
,{field:'username', title:'用户名', width:120, edit: function(d){
|
||||||
return !d.LAY_DISABLED;
|
return !d.LAY_DISABLED;
|
||||||
}, templet: '#usernameTpl'}
|
}, templet: '#usernameTpl'}
|
||||||
,{field:'email', minWidth: 160, title:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, edit: 'text', templet: function(d){
|
,{field:'email', minWidth: 160, maxWidth: 320, title:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, edit: 'text', templet: function(d){
|
||||||
return '<em>'+ layui.util.escape(d.email) +'</em>'
|
return '<em>'+ layui.util.escape(d.email) +'</em>'
|
||||||
}}
|
}}
|
||||||
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true, escape: false}
|
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true, escape: false}
|
||||||
|
@ -453,6 +454,16 @@ layui.use(['table', 'dropdown'], function(){
|
||||||
update[field] = value;
|
update[field] = value;
|
||||||
obj.update(update, true); // 参数 true 为新版新增功能,详见文档
|
obj.update(update, true); // 参数 true 为新版新增功能,详见文档
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 列拖拽宽度后的事件 -- v2.8.0 新增
|
||||||
|
table.on('colResized(test)', function(obj){
|
||||||
|
console.log(obj);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 列拖拽宽度后的事件 -- v2.8.0 新增
|
||||||
|
table.on('colToggled(test)', function(obj){
|
||||||
|
console.log(obj);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -23,8 +23,8 @@
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
|
<th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
|
||||||
<th lay-data="{field:'username', width:80}" rowspan="2">联系人</th>
|
<th lay-data="{field:'username', width:100}" rowspan="2">联系人</th>
|
||||||
<th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
|
<th lay-data="{field:'amount', width:100}" rowspan="2">金额</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
</table>
|
</table>
|
||||||
|
@ -61,19 +61,24 @@
|
||||||
<table id="test2" lay-filter="test2"></table>
|
<table id="test2" lay-filter="test2"></table>
|
||||||
|
|
||||||
<div style="display: none1;">
|
<div style="display: none1;">
|
||||||
|
|
||||||
|
<table id="demo"></table>
|
||||||
|
|
||||||
<table class="layui-table" lay-data="{width:800, height: 300, url:'json/table/demo2.json', page: true, limit: 6, toolbar: true}">
|
<table class="layui-table" lay-data="{width:800, height: 300, url:'json/table/demo2.json', page: true, limit: 6, toolbar: true}">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
|
<th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
|
||||||
<th lay-data="{field:'username', width:80}" rowspan="2">联系人</th>
|
<th lay-data="{field:'username', width:80}" rowspan="2">联系人</th>
|
||||||
<th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
|
<th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
|
||||||
<th lay-data="{align:'center'}" colspan="3">地址</th>
|
<th lay-data="{align:'center'}" colspan="5">地址</th>
|
||||||
<th lay-data="{fixed: 'right', width: 155, align: 'center', toolbar: '#barDemo'}" rowspan="2">操作</th>
|
<th lay-data="{fixed: 'right', width: 155, align: 'center', toolbar: '#barDemo'}" rowspan="2">操作</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th lay-data="{field:'province', width:130}">省</th>
|
<th lay-data="{field:'province', width:130}">省</th>
|
||||||
<th lay-data="{field:'city', width:130}">市</th>
|
<th lay-data="{field:'city', width:130}">市</th>
|
||||||
<th lay-data="{field:'zone', width:200}">区</th>
|
<th lay-data="{field:'zone', width:200}">区</th>
|
||||||
|
<th lay-data="{field:'address', width:120}">小区</th>
|
||||||
|
<th lay-data="{field:'house', width:150}">单元</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
</table>
|
</table>
|
||||||
|
@ -102,9 +107,6 @@
|
||||||
</thead>
|
</thead>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<table id="demo"></table>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="layui-btn-group">
|
<div class="layui-btn-group">
|
||||||
<button class="layui-btn" data-type="parseTable">转化为数据表格</button>
|
<button class="layui-btn" data-type="parseTable">转化为数据表格</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -180,7 +182,7 @@
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="../src/layui.js" src1="https://cdn.staticfile.org/layui/2.6.13/layui.js"></script>
|
<script src="../src/layui.js" src1="https://cdn.staticfile.org/layui/2.7.6/layui.js"></script>
|
||||||
<script>
|
<script>
|
||||||
layui.use('table', function(){
|
layui.use('table', function(){
|
||||||
var $ = layui.$;
|
var $ = layui.$;
|
||||||
|
@ -227,6 +229,7 @@ layui.use('table', function(){
|
||||||
elem: '#demo'
|
elem: '#demo'
|
||||||
//,width: 900
|
//,width: 900
|
||||||
//,height: 274
|
//,height: 274
|
||||||
|
,toolbar: true
|
||||||
,cols: [[ //标题栏
|
,cols: [[ //标题栏
|
||||||
//{type: 'space'},
|
//{type: 'space'},
|
||||||
{type: 'checkbox', LAY_CHECKED: true},
|
{type: 'checkbox', LAY_CHECKED: true},
|
||||||
|
@ -239,6 +242,9 @@ layui.use('table', function(){
|
||||||
{field: 'city', title: '城市', width: 100},
|
{field: 'city', title: '城市', width: 100},
|
||||||
//{field: 'experience', title: '积分', width: 80, sort: true},
|
//{field: 'experience', title: '积分', width: 80, sort: true},
|
||||||
{field: 'experience', title: '积分', width: 80, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'}
|
{field: 'experience', title: '积分', width: 80, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'}
|
||||||
|
,{field:'ip', title:'IP', width: 120, align: 'right'}
|
||||||
|
,{field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }} 次'}
|
||||||
|
,{field:'joinTime', title:'加入时间', width: 120}
|
||||||
]]
|
]]
|
||||||
,data: [{
|
,data: [{
|
||||||
"id": "10001"
|
"id": "10001"
|
||||||
|
@ -342,7 +348,6 @@ layui.use('table', function(){
|
||||||
//,loading: false //请求数据时,是否显示loading
|
//,loading: false //请求数据时,是否显示loading
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
var $ = layui.jquery, active = {
|
var $ = layui.jquery, active = {
|
||||||
parseTable: function(){
|
parseTable: function(){
|
||||||
table.init('parse-table-demo', {
|
table.init('parse-table-demo', {
|
||||||
|
|
Loading…
Reference in New Issue