layui table 添加一行
程序员文章站
2022-07-13 12:31:02
...
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="xd_add.aspx.cs" Inherits="NetWing.BPM.Admin.QL_xd.xd_add" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></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="/UI/layuiadmin/layui/css/layui.css" media="all">
<style type="text/css">
/*您可以将下列样式写入自己的样式表中*/
.childBody{padding: 15px;}
/*layui 元素样式改写*/
.layui-btn-sm{line-height: normal; font-size: 12.5px;}
.layui-table-view .layui-table-body{min-height: 256px;}
.layui-table-cell .layui-input.layui-unselect{height: 30px; line-height: 30px;}
/*设置 layui 表格中单元格内容溢出可见样式*/
.table-overlay .layui-table-view,
.table-overlay .layui-table-box,
.table-overlay .layui-table-body{overflow: visible;}
.table-overlay .layui-table-cell{height: auto; overflow: visible;}
/*文本对齐方式*/
.text-center{text-align: center;}
</style>
</head>
<body>
<div class="layui-fluid">
<div class="layui-card">
<div id="toolbar">
<div>
<button type="button" class="layui-btn layui-btn-sm" data-type="addRow" title="添加一行">
<i class="layui-icon layui-icon-add-1"></i>添加一行
</button>
</div>
</div>
<div class="layui-card-body" style="padding: 15px;">
<form class="layui-form" action="" lay-filter="component-form-group">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">合同编号</label>
<div class="layui-input-inline">
<input type="text" name="Order_id" placeholder="默认自动生成" disabled="disabled" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">客户姓名</label>
<div class="layui-input-inline">
<input type="text" name="UserName" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">地址</label>
<div class="layui-input-inline">
<input type="text" name="address" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">设计师</label>
<div class="layui-input-inline">
<input type="text" name="constructor" id="constructor" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">安装日期</label>
<div class="layui-input-inline">
<input type="text" name="Install_Time" id="Install_Time" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">下单日期</label>
<div class="layui-input-inline">
<input type="text" name="Order_Time" id="Order_Time" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">选择框</label>
<div class="layui-input-inline">
<select name="modules" lay-verify="required" lay-search="">
<option value="">直接选择或搜索选择</option>
<option value="1">layer</option>
<option value="2">form</option>
<option value="3">layim</option>
<option value="4">element</option>
<option value="5">laytpl</option>
<option value="6">upload</option>
<option value="7">laydate</option>
<option value="8">laypage</option>
<option value="9">flow</option>
<option value="10">util</option>
<option value="11">code</option>
<option value="12">tree</option>
<option value="13">layedit</option>
<option value="14">nav</option>
<option value="15">tab</option>
<option value="16">table</option>
<option value="17">select</option>
<option value="18">checkbox</option>
<option value="19">switch</option>
<option value="20">radio</option>
</select>
</div>
</div>
</div>
<div id="tableRes" class="table-overlay">
<table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>
</div>
<div class="layui-form-item layui-hide">
<input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
</div>
</form>
</div>
</div>
</div>
<script src="/UI/layuiadmin/layui/layui.js"></script>
<script>
//准备视图对象
window.viewObj = {
tbData: [{
tempId: new Date().valueOf(),
type: 2,
name: '测试项名称',
state: 1
}],
typeData: [
{ id: 1, name: '分类一' },
{ id: 2, name: '分类二' },
{ id: 3, name: '分类三' },
{ id: 4, name: '分类四' }
],
renderSelectOptions: function (data, settings) {
settings = settings || {};
var valueField = settings.valueField || 'value',
textField = settings.textField || 'text',
selectedValue = settings.selectedValue || "";
var html = [];
for (var i = 0, item; i < data.length; i++) {
item = data[i];
html.push('<option value="');
html.push(item[valueField]);
html.push('"');
if (selectedValue && item[valueField] == selectedValue) {
html.push(' selected="selected"');
}
html.push('>');
html.push(item[textField]);
html.push('</option>');
}
return html.join('');
}
};
layui.config({
base: '/UI/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'form', 'upload', 'table', 'laydate','layer'], function () {
var $ = layui.$
, form = layui.form
, upload = layui.upload
, table = layui.table
, laydate = layui.laydate
, layer = layui.layer;
//table.render({
// elem: '#test-table-toolbar'
// , url: layui.setter.base + 'json/table/demo.js'
// , cols: [[
// { field: 'sign', title: '物料名称', edit: 'text' }
// , { field: 'experience', title: '数量', width: 80, edit: 'text' }
// , { field: 'logins', title: '采购日期', width: 200, edit: 'text', data_field: "dBeginDate" }
// , { field: 'joinTime', title: '采购人', width: 130, edit: 'text' }
// , { field: 'joinTime', title: '要求送达', width: 130, edit: 'text' }
// , { field: 'logins', title: '送货情况', width: 100, edit: 'text' }
// , { field: 'ssq', title: '预警时间', width: 200, edit: 'text' }
// ]]
//});
//数据表格实例化
var tbWidth = $("#tableRes").width();
var layTableId = "layTable";
var tableIns = table.render({
elem: '#test-table-toolbar',
id: layTableId,
data: viewObj.tbData,
width: tbWidth,
page: true,
loading: true,
even: false, //不开启隔行背景
cols: [[
{ title: '序号', type: 'numbers' },
{
field: 'type', title: '分类（type）', templet: function (d) {
var options = viewObj.renderSelectOptions(viewObj.typeData, { valueField: "id", textField: "name", selectedValue: d.type });
return '<a lay-event="type"></a><select name="type" lay-filter="type"><option value="">请选择分类</option>' + options + '</select>';
}
},
{ field: 'sign', title: '物料名称', edit: 'text' },
, { field: 'experience', title: '数量', width: 80, edit: 'text' }
, { field: 'logins', title: '采购日期', width: 200, edit: 'text', data_field: "dBeginDate" }
, { field: 'joinTime', title: '采购人', width: 130, edit: 'text' }
, { field: 'joinTime', title: '要求送达', width: 130, edit: 'text' }
, { field: 'logins', title: '送货情况', width: 100, edit: 'text' }
, { field: 'ssq', title: '预警时间', width: 200, edit: 'text' },
{
field: 'tempId', title: '操作', templet: function (d) {
return '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" lay-id="' + d.tempId + '"><i class="layui-icon layui-icon-delete"></i>移除</a>';
}
}
]],
done: function (res, curr, count) {
viewObj.tbData = res.data;
}
});
//定义事件集合
var active = {
addRow: function () { //添加一行
var oldData = table.cache[layTableId];
console.log(oldData);
var newRow = { tempId: new Date().valueOf(), type: null, name: '请填写名称', state: 0 };
oldData.push(newRow);
tableIns.reload({
data: oldData
});
},
updateRow: function (obj) {
var oldData = table.cache[layTableId];
console.log(oldData);
for (var i = 0, row; i < oldData.length; i++) {
row = oldData[i];
if (row.tempId == obj.tempId) {
$.extend(oldData[i], obj);
return;
}
}
tableIns.reload({
data: oldData
});
},
removeEmptyTableCache: function () {
var oldData = table.cache[layTableId];
for (var i = 0, row; i < oldData.length; i++) {
row = oldData[i];
if (!row || !row.tempId) {
oldData.splice(i, 1); //删除一项
}
continue;
}
tableIns.reload({
data: oldData
});
},
save: function () {
var oldData = table.cache[layTableId];
console.log(oldData);
for (var i = 0, row; i < oldData.length; i++) {
row = oldData[i];
if (!row.type) {
layer.msg("检查每一行，请选择分类！", { icon: 5 }); //提示
return;
}
}
document.getElementById("jsonResult").innerHTML = JSON.stringify(table.cache[layTableId], null, 2); //使用JSON.stringify() 格式化输出JSON字符串
}
}
//**事件
var activeByType = function (type, arg) {
if (arguments.length === 2) {
active[type] ? active[type].call(this, arg) : '';
} else {
active[type] ? active[type].call(this) : '';
}
}
//注册按钮事件
$('.layui-btn[data-type]').on('click', function () {
var type = $(this).data('type');
activeByType(type);
});
//监听select下拉选中事件
form.on('select(type)', function (data) {
var elem = data.elem; //得到select原始DOM对象
$(elem).prev("a[lay-event='type']").trigger("click");
});
//监听工具条
table.on('tool(dataTable)', function (obj) {
var data = obj.data, event = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象;
console.log(data);
switch (event) {
case "type":
//console.log(data);
var select = tr.find("select[name='type']");
if (select) {
var selectedVal = select.val();
if (!selectedVal) {
layer.tips("请选择一个分类", select.next('.layui-form-select'), { tips: [3, '#FF5722'] }); //吸附提示
}
console.log(selectedVal);
$.extend(obj.data, { 'type': selectedVal });
activeByType('updateRow', obj.data); //更新行记录对象
}
break;
case "state":
var stateVal = tr.find("input[name='state']").prop('checked') ? 1 : 0;
$.extend(obj.data, { 'state': stateVal })
activeByType('updateRow', obj.data); //更新行记录对象
break;
case "del":
layer.confirm('真的删除行么？', function (index) {
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
activeByType('removeEmptyTableCache');
});
break;
}
});
//日期
laydate.render({
elem: '#Install_Time'
, type: 'datetime'
});
laydate.render({
elem: '#Order_Time'
, type: 'datetime'
});
$(function () {
//付款方式(下拉框)
$.post("/sys/ashx/DepartmentHandler.ashx?action=Department", function (date) {
var a = JSON.parse(date);
var aa = a.data;
for (var k in aa) {
$("#DepartmentId").append("<option value='" + aa[k].KeyId + "'>" + aa[k].DepartmentName + "</option>");
}
layui.use('form', function () {
var form = layui.form;
form.render();
});
});
})
$(function () {
$.post("/sys/ashx/RoleHandler.ashx?action=ole", function (data) {
var a = JSON.parse(data);
var aa = a.data;
for (var k in aa) {
$("#role").append("<option value='" + aa[k].KeyId + "'>" + aa[k].RoleName + "</option>")
}
layui.use('form', function () {
var form = layui.form;
form.render();
})
})
});
})
</script>
</body>
</html>