layui table 行添加
效果图
<title>主页title>
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
<a lay-href="">发单a>
<a><cite>新建cite>a>
<a><cite>采购cite>a>
div>
div>
<div class="layui-fluid">
<style>
.layui-table-cell {
overflow: visible;
}
.layui-table-box {
overflow: visible;
}
.layui-table-body {
overflow: visible;
}
/* 设置下拉框的高度与表格单元相同 */
td .layui-form-select {
margin-top: -10px;
margin-left: -15px;
margin-right: -15px;
}
style>
<div class="layui-card">
<div class="layui-card-body" style="padding: 15px;">
<form class="layui-form" id="fromId" action="#">
<fieldset class="layui-elem-field">
<div style="padding-top:25px;" class="layui-field-box">
<div class="layui-form-item">
<label class="layui-form-label">入库单编号label>
<div class="layui-input-inline" style="width:13%">
<input type="text" name="order" placeholder="请输入" class="layui-input" lay-verify="required">
div>
<label class="layui-form-label">客户姓名label>
<div class="layui-input-inline" style="width:13%">
<input type="text" name="username" placeholder="请输入" class="layui-input" lay-verify="required">
div>
<label class="layui-form-label">地址label>
<div class="layui-input-inline" style="width:13%">
<input type="text" name="projectadd" placeholder="请输入" class="layui-input" lay-verify="required">
div>
<label class="layui-form-label">设计师label>
<div class="layui-input-inline" style="width:13%">
<input type="text" name="stylist" placeholder="请输入" class="layui-input" lay-verify="required">
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">客户要求发货日期label>
<div class="layui-input-inline" style="width:13%">
<input type="text" name="goods_time" placeholder="请选择" class="layui-input" id="date" lay-verify="required">
div>
<label class="layui-form-label">下单日期label>
<div class="layui-input-inline" style="width:13%">
<input type="text" name="place_order_time" placeholder="请选择" class="layui-input" id="place_order_time" lay-verify="required">
div>
<label class="layui-form-label">产品系列label>
<div class="layui-input-inline" style="width:13%">
<input type="text" name="Product_Line" placeholder="请输入" class="layui-input" lay-verify="required">
div>
div>
div>
fieldset>
<script type="text/html" id="selectTool">
<select name="selectDemo" lay-filter="selectDemo" lay-search>
<option value="请选择或输入">请选择或输入</option>
</select>
script>
<script type="text/html" id="toolbarDemo">
<div align="right" class="layui-btn-container">
<button id="addTable" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">添加行</button>
</div>
script>
<script type="text/html" id="bar">
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
<!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
script>
<table id="demo" lay-filter="tableFilter">table>
<div class="layui-form-item" style="margin-top: 30px;text-align: center;">
<button class="layui-btn" lay-submit="" lay-filter="*">保存button>
div>
form>
div>
div>
div>
<script>
layui.use(['jquery', 'table', 'layer', 'laydate','form'], function () {
var $ = layui.jquery,
table = layui.table,
form = layui.form,
layer = layui.layer,
laydate = layui.laydate;
//时间控件
laydate.render({
elem: '#date' //指定元素
});
//下拉框监听事件
//第一个实例 加载表格
var tableIns = table.render({
elem: '#demo'
, toolbar: '#toolbarDemo'
, defaultToolbar: []
, limit: 100
, cols: [[ //表头
{ field: 'ordername', title: '物料名称', edit: 'text', templet: "#selecta" }
, { field: 'hz_factoryname', title: '供应商', edit: 'text' }
, { field: 'Scheduled_purchase_time', title: '计划采购日期', edit: 'text', event: 'dateti', data_field: "dBeginDate" }
, { field: 'parameter_Add', title: '采购人', edit: 'text' }
, { field: 'Required_time', title: '要求送达时间', edit: 'text', event:'Required_time'}
, { field: 'Required_place', title: '要求送达地点', edit: 'text' }
, { field: 'Shipping', title: '送货方式', edit: 'text', event:'selecta' }
, { title: '操作', align: 'center', toolbar: '#bar' }
]]
, data: [{
"ordername": ""
, "hz_factoryname": ""
, "Scheduled_purchase_time": ""
, "parameter_Add": ""
, "Required_time": ""
, "Required_place": ""
, "Shipping": ""
}]
, done: function (res, curr, count) {
//如果是异步请求数据方式，res即为你接口返回的信息。
//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
tabledata = res.data;
//去掉下拉框的失焦事件 否则在下拉框里输入值 失焦后变回下拉选项里的值了 没有需要的同学忽略掉即可
$(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');
//这里是表格重载的时候 回显下拉框的数据
//$('tr').each(function (e) {
// var $cr = $(this);
// var dataindex = $cr.attr("data-index");
// $.each(tabledata, function (index, value) {
// console.log(value);
// if (value.LAY_TABLE_INDEX == dataindex) {
// $cr.find('input').val(value.materialcode);
// }
// });
//});
//这里是下拉框输入值改变时触发 给表格缓存赋值 没有需要的同学忽略掉即可
//$('.layui-form-select').find('input').on("change", function (e) {
// var $cr = $(e.target);
// console.log($cr);
// var dataindex = $cr.parents('tr').attr("data-index");
// var selectdata = $cr.val();
// $.each(tabledata, function (index, value) {
// if (value.LAY_TABLE_INDEX == dataindex) {
// value.materialcode = selectdata;
// }
// });
//});
}
});
var tabledata;
//监听工具条删除按钮
table.on('tool(tableFilter)', function (obj) {
console.log("a")
if (obj.event === 'del') {
obj.del();
};
}
);
//头工具栏添加按钮事件
table.on('toolbar(tableFilter)', function (obj) {
if (obj.event === 'add') {
tabledata.push({
"ordername": ""
, "hz_factoryname": ""
, "Scheduled_purchase_time": ""
, "parameter_Add": ""
, "Required_time": ""
, "Required_place": ""
, "Shipping": ""
})
table.reload('demo', {
data: tabledata
});
};
});
//框内事件
table.on('tool(tableFilter)', function (obj) {
var data = obj.data,
event = obj.event,
tr = obj.tr; //获得当前行 tr 的DOM对象;
switch (event) {
case "dateti":
console.log("a");
var newdata = {};
var field = $(this).data('field');
laydate.render({
elem: this.firstChild
, show: true //直接显示
, closeStop: this
, type: 'datetime'
, format: "yyyy-MM-dd"
, done: function (value, date) {
newdata[field] = value;
obj.update(newdata);
}
});
break;
case "Required_time":
var newdata = {};
var field = $(this).data('field');
laydate.render({
elem: this.firstChild
, show: true //直接显示
, closeStop: this
, type: 'datetime'
, format: "yyyy-MM-dd"
, done: function (value, date) {
newdata[field] = value;
obj.update(newdata);
}
});
break;
case "selecta":
console.log("a");
//渲染下拉搜索框
$(function () {
$.post('/sys/ashx/Dichandler.ashx?action=defaultlayui&CategoryId=12', {}, function (data) {
//console.log(data);
var a = JSON.parse(data);
var aa = a.data;
for (var k in aa) {
$("#selecta").append(" + aa[k].Title + "")
}
layui.use('form', function () {
var form = layui.form;
form.render();
})
});
});
break;
}
})
//提交数据到后台保存
form.on('submit(*)', function (data) {
// console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
// console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
// console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
// console.log(tabledata) //当前容器的全部表单字段，名值对形式：{name: value}
// 要将tabledata json这样传到后台就可以json序列化循环数据库事物插入
$.ajax({
url: "/ashx/ajax.ashx?action=order",
async: true,
type: "post",
data: $(data.form).serialize() + '&tabledata=' + JSON.stringify(tabledata),
success: function (data) {
if (typeof (data) == 'string') {
data = JSON.parse(data)
}
if (data.code == 0) {
layer.msg(data.msg);
} else {
layer.msg(data.msg);
}
}
});
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
})
script>
<script src="../src/views/order/jquery.min.js">script>