静态表格的增删改

分享 未结 2 235
shygirl
shygirl 2019-7-31
悬赏:20飞吻
因为想用到edit=“text”属性,不想用弹框修改表格,但是又想在前端进行数据的操作,最后再统一提交
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layuiAdmin 主页示例模板一</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="src/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="src/layuiadmin/style/admin.css">
</head>
<style>
* {
font-family: "微软雅黑";
font-weight: 200;
}

.layui-layer-page .layui-layer-content {
overflow: visible !important;
}

.all .layui-form-select .layui-edge {
right: 10%;
}

.all .layui-form-select dl {
left: 10px;
min-width: 90%;
}

a {
cursor: pointer;
color: #009688;
font-weight: 900;
}

a :hover {
color: red;
}

.layui-upload-img {
width: 310px;
height: 210px;
position: relative;
}

img:hover,
.dels:hover {
cursor: pointer;
}

/* tr下面的第一个td */
tr> :first-child>.layui-table-cell,
tr> :nth-child(2)>.layui-table-cell,
.layui-table-body,
.layui-table-box {
overflow: visible;
}
</style>
<body>
<div class="layui-fluid all">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body">
<div class="vertical">
紧急联系人/担保人/配偶资料
<!-- <img src="~/images/add2.png" class="btnn" style="width: 24px;margin-left: 50px;" alt="添加" /> -->
<a class="layui-btn btnn">添加</a>
</div>
<div class="layui-card-body">
<table class="layui-table" id="table4" lay-filter="table4"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="src/layuiadmin/layui/layui.js"></script>
<script type="text/html" id="sel2">
<!-- 这里的 checked 的状态只是演示 -->
<select id="gxs2" lay-filter="gxs2" class="gxs2">
<option value=""></option>
<option value="夫妻">夫妻</option>
<option value="父亲">父亲</option>
<option value="母亲">母亲</option>
</select>
</script>
<script type="text/html" id="no">
<!-- 这里的 checked 的状态只是演示 -->
<select class="no" lay-filter="no">
<option value=""></option>
<option value="是">是</option>
<option value="否">否</option>
</select>
</script>
<script type="text/html" id="btn1">
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="table4_del">删除</a>
</script>

<script>
layui.config({
base: 'layuiadmin/' //静态资源所在路径
,
version: true
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'sample']);
layui.use(['jquery', 'element', 'laydate', 'form', 'upload', 'table'], function() {
var laydate = layui.laydate,
$ = layui.jquery,
form = layui.form,
table = layui.table,
upload = layui.upload,
element = layui.element;


var data3 = [];
var data4 = [];



table.on('tool(table4)', function(obj) {
var data = obj.data;
var hanghao = $(this).parent().parent().parent().attr("data-index");
//JSON.stringify(data) 本行的所有数据
if (obj.event === 'table4_del') {
layer.confirm('真的删除行么', function(index) {
data4.splice(hanghao, 1);
table.reload('table4', {
data: data4
});
for (var i = 0; i < data4.length; i++) {
$("tr[data-index=" + i + "] .gxs2").val(data4[i].gx);
$("tr[data-index=" + i + "] .no").val(data4[i].dbr);
form.render();
}
layer.close(index);
});
// } else if (obj.event === 'edit1') {
// layer.alert('编辑行:<br>' + JSON.stringify(data))
}
});

form.on('select(gxs2)', function(data) {
var selectElem = $(data.elem);
var tdElem = selectElem.closest('td');
var trElem = tdElem.closest('tr');
var tableView = trElem.closest('.layui-table-view');
table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = data.value; // !!!!
// var tableid = tableView.attr('lay-id');
//var tableindex = trElem.data('index');
//var tablefield = tdElem.data('field');
//tableid[tableindex].tablefield = data.value;
data4[trElem.data('index')].gx = data.value;
});


form.on('select(no)', function(data) {
var selectElem = $(data.elem);
var tdElem = selectElem.closest('td');
var trElem = tdElem.closest('tr');
var tableView = trElem.closest('.layui-table-view');
table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = data.value; // !!!!
//console.log(tdElem.data('field'));
data4[trElem.data('index')].dbr = data.value;
});
table.on('edit(table4)', function(obj) {
var data = obj.data;
var hanghao = $(this).parent().parent().attr("data-index");
data4[hanghao] = data;
// table.reload('table3', { data: data3 });
});



//紧急联系人表头
table.render({
elem: '#table4',
skin: 'line',
// url: 'demo1.json',
cols: [
[ //表头
{
field: 'dbr',
title: '担保人',
templet: '#no',
}, {
field: 'gx',
title: '关系',
templet: '#sel2',
}, {
field: 'xm',
title: '姓名',
edit: 'text'
}, {
field: 'id',
title: '身份证号',
edit: 'text'
}, {
field: 'sjh',
title: '手机号',
edit: 'text'
}, {
field: 'yjsr',
title: '月均收入',
edit: 'text'
}, {
field: 'gzdw',
title: '工作单位',
edit: 'text'
}, {
field: 'dwdz',
title: '单位地址',
edit: 'text'
}, {
field: 'dwdh',
title: '单位电话',
edit: 'text'
}, {
field: 'zw',
title: '职位',
edit: 'text'
}, {
field: 'zzxx',
title: '住宅信息',
edit: 'text'
}, {
field: 'type',
width: '70',
title: '',
toolbar: '#btn1',
}
]
],
data: data4,
});
//1



// 紧急联系人添加一条数据
$(".btnn").click(function() {
data4.push({
"dbr": '',
"gx": '',
"xm": '',
"id": '',
"sjh": '',
"yjsr": '',
"gzdw": '',
"dwdz": '',
"dwdh": '',
"zw": '',
"zzxx": ''
});
table.reload('table4', {
data: data4
});
for (var i = 0; i < data4.length; i++) {
$("tr[data-index=" + i + "] .gxs2").val(data4[i].gx);
$("tr[data-index=" + i + "] .no").val(data4[i].dbr);
form.render();
}
})


});
</script>
回帖
  • 好麻烦,上一份我实现的,仅供参考

        let $ = layui.$, table = layui.table, form = layui.form

    /**
    * 可编辑表格相关工具
    *
    */
    let editable = {

    /**
    * 监听表格,当表格的可编辑内容(文本框、下拉框、复选框等) 值改变后,同步更新表格缓存的值
    * @param tableId
    */
    watch(tableId) {
    if ($strings.isBlank(tableId)) {
    throw new Error(`The parameter tableId cannot be blank`)
    }
    if (!layui.table.cache[tableId]) {
    throw new Error(`The table ${tableId} is not exist,please first to init`)
    }
    let instance = table.getInstance(tableId)
    if(instance && instance.$watched ){
    // 已经监听,不再进行重复监听
    return
    }

    let trs = $(`[lay-id='${tableId}'] .layui-table tr:gt(0)`)

    // 监听文本框,当值有更新时,修改缓存中的数据
    $(document).on('change', `[lay-id='${tableId}'] .layui-table input[data-name]`, (e) => {
    let row = e.target.getAttribute('data-index')
    let name = e.target.getAttribute('data-name')
    layui.table.cache[tableId][row][name] = e.target.value
    })

    // 监听下拉框,当值有更新时,修改缓存中的数据
    let selects = $(`[lay-id='${tableId}'] .layui-table select[data-name] `)
    for (let i = 0; i < selects.length; i++) {
    let select = selects[i]
    form.on(`select(${select.getAttribute('lay-filter')})`, function (obj) {
    let row = obj.elem.getAttribute('data-index')
    let name = obj.elem.getAttribute('data-name')
    table.cache[tableId][row][name] = obj.value
    });
    }

    let checkboxs = $(`[lay-id='${tableId}'] .layui-table input[type='checkbox'][data-name] `)
    for (let i = 0; i < checkboxs.length; i++) {
    let checkbox = checkboxs[i]
    form.on(`checkbox(${checkbox.getAttribute('lay-filter')})`, function (obj) {
    let row = obj.elem.getAttribute('data-index')
    let name = obj.elem.getAttribute('data-name')
    table.cache[tableId][row][name] = obj.elem.checked ? 1 : 0
    });
    }

    instance.$watched = true
    },
    }

    window.$editable = editable
    使用方法:$editable.watch('table_id')
    获取数据:layui.table.cache['table_id']

    table.getInstance(id)
    此方法实现逻辑可参考:https://fly.layui.com/jie/55345/
    0 回复
  • 青大侠
    2019-8-10
    https://fly.layui.com/jie/56105/,参考下我的
    0 回复