layui数据表格和表单的完整运用
@{
ViewBag.Title = "AutomaticRequestRecord";
Layout = "~/Views/Shared/MyLayout.cshtml";
}
<form class="layui-form" action="" id="form1">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">请货号</label>
<div class="layui-input-inline">
<input type="text" name="R_requestId" autocomplete="off" class="layui-input" placeholder="请货号">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">商品ID</label>
<div class="layui-input-inline">
<input type="text" name="GOODSID" autocomplete="off" class="layui-input" placeholder="商品ID">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">商品名称</label>
<div class="layui-input-inline">
<input type="text" name="GOODSNAME" autocomplete="off" class="layui-input" placeholder="商品名">
</div>
</div>
<div class="layui-inline">
<select name="R_type">
<option value="">请选择请货类型</option>
<option value="1">手动请货</option>
<option value="0">自动请货</option>
</select>
</div>
<div class="layui-inline">
<select name="R_state">
<option value="">请选择请货状态</option>
<option value="1">已请货</option>
<option value="0">未请货</option>
</select>
</div>
<div class="layui-inline">
<label class="layui-form-label">开始日期</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="s_timestart" autocomplete="off" id="s_timestart" placeholder="选择日期">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">结束日期</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="s_timeend" autocomplete="off" id="s_timeend" placeholder="选择日期">
</div>
</div>
<br /><br />
<div class="layui-inline">
<div class="layui-input-block">
<button class="layui-btn submit_form" lay-submit lay-filter="s_submit" id="sub">查询</button>
<button class="layui-btn submit_form" lay-submit lay-filter="s_Reset" id="sub3">重置</button>
<button class="layui-btn output_search" lay-submit lay-filter="s_output" id="sub2">导出</button>
<button class="layui-btn submit_form" lay-submit lay-filter="toolBarPro" id="toolBarPro">新增请货</button>
</div>
</div>
</div>
<div>
<table class="layui-hide" id="order_query_table" lay-filter="order_query_table"></table>
</div>
</form>
<script type="text/html" id="barDemo">
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event='select'><i class="layui-icon"></i> 详情</button>
@*<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event='del'><i class="layui-icon"></i> 删除</button>*@
</script>
<script>
layui.use(['form', 'layedit', 'laydate', 'table', 'element', 'layer'],
function () {
var form = layui.form,
layer = layui.layer,
laydate = layui.laydate,
table = layui.table,
$ = layui.$,
element = layui.element;
//日期
laydate.render({
elem: '#s_timestart',
type: 'datetime',
range: false,
trigger: 'click',
theme: '#393D49',
max: '@DateTime.Now.ToString("yyyy-MM-dd 23:59:59")',
//min: -120//120天前
min: '2020-8-1 00:00:00'//指定日期
});
//日期
laydate.render({
elem: '#s_timeend',
type: 'datetime',
range: false,
trigger: 'click',
theme: '#393D49',
max: '@DateTime.Now.ToString("yyyy-MM-dd 23:59:59")',
//min: -120//120天前
min: '2020-8-1 00:00:00'//指定日期
});
//导出excel
form.on('submit(s_output)', function (data) {
$.ajax({
url: '../Order/goods_outputexcel2',
//data: paramstr,
type: 'get',
dataType: 'text',
success: function (txtr) {
if (txtr != "") {
var outparames = new Array();
outparames.push({ name: "json", value: txtr });
outparames.push({ name: "filename", value: "请货数据导出" + new Date().getTime() });
outparames.push({ name: "colnames", value: "操作人,请货时间,请货号,请货类型,请货状态,门店编号,商品ID,商品名称,商品类型,厂商,UPC码,请货数" });
Post('@Url.Content("~/export/outputexcel")', outparames);
}
else {
layer.msg("导出失败");
}
}
, error: function (err) {
layer.msg("导出异常");
}
});
return false;
});
//监听提交
form.on('submit(toolBarPro)',
function () {
openaddwindow();
return false;
});
//新增请货 (layui的layer打开新窗口的使用)
function openaddwindow() {
var url = 'http://' + '@HttpContext.Current.Request.Url.Authority' + '/product/AddRequestRecord';
var opentype = layer.open({
type: 2
, title: "新增请货"
, content: url
, maxmin: true //开启最大化最小化按钮
, area: ['800px', '520px']
}); layer.full(opentype);
}
//监听提交
form.on('submit(s_submit)',
function (data) {
if (data.field.s_timeend!="") {
if (data.field.s_timestart > data.field.s_timeend) {
layer.alert("开始日期不能大于结束日期", { icon: 2, title: "错误提示", offset: "auto", skin: 'layui-layer-molv' });
return false;
}
}
//填充到where所需要的的值
var datafiled= {
R_requestId: data.field.R_requestId,
GOODSID: data.field.GOODSID,
GOODSNAME: data.field.GOODSNAME,
R_type: data.field.R_type,
R_state: data.field.R_state,
s_timestart: data.field.s_timestart,
s_timeend: data.field.s_timeend
}
loaddata(datafiled);
return false;
});
//重置
form.on('submit(s_Reset)', function (data) {
// 重置清空
$('#form1')[0].reset();
form.render();//必须写
//loaddata();
return false;
});
//监听单元格编辑
table.on('edit(order_query_table)', function (obj) {
var value = obj.value //得到修改后的值
, data = obj.data //得到所在行所有键值
, field = obj.field; //得到字段
layer.msg("商品ID" + data.GOODSID + '库存更改为：' + value);
});
//监听行工具事件
table.on('tool(order_query_table)', function (obj) {
var data = obj.data;
//console.log(obj)
if (obj.event === 'del') {
layer.confirm('真的删除行么', function (index) {
obj.del();
$.ajax({
type: "get",
url: "../order/DelRequest_record",
data: { "R_requestId": data.R_requestId, "GOODSID": data.GOODSID },
dataType: "json",
success: function (data) {
if (data == 1) {
layer.alert("删除成功", { icon: 1, title: "温馨提示", offset: "auto", skin: 'layui-layer-lan' });
} else {
layer.alert("删除失败", { icon: 5, title: "错误提示", offset: "auto", skin: 'layui-layer-lan' });
}
},
error: function (err) {
layer.alert("错误信息：" + err, { icon: 2, title: "错误提示", offset: "auto", skin: 'layui-layer-lan' });
}
})
layer.close(index);
});
}
//else if (obj.event === 'edtil') {
// // alert(JSON.stringify(data));
// $.ajax({
// type: "get",
// url: "../order/SavaRequest_record",
// data: { "R_requestId": data.R_requestId, "GOODSID": data.GOODSID },
// dataType: "json",
// success: function (data) {
// if (data == 1) {
// layer.alert("保存成功", { icon: 1, title: "温馨提示", offset: "auto", skin: 'layui-layer-lan' });
// } else {
// layer.alert("保存失败", { icon: 5, title: "错误提示", offset: "auto", skin: 'layui-layer-lan' });
// }
// },
// error: function (err) {
// layer.alert("错误信息："+err, { icon: 2, title: "错误提示", offset: "auto", skin: 'layui-layer-lan' });
// }
// })
else if (obj.event === 'select') {
// alert(JSON.stringify(data));
var url = 'http://' + '@HttpContext.Current.Request.Url.Authority' + '/product/AddRequestRecord?R_requestId=' + data.R_requestId + '&GOODSID=' + data.GOODSID;
var opentype = layer.open({
type: 2
, title: "查看请货记录明细"
, content: url
, maxmin: true //开启最大化最小化按钮
, area: ['800px', '520px']
, btn: ['关闭']
});
layer.full(opentype);
}
//prompt弹窗操作
//layer.prompt({
// formType: 2
// , value: data.email
//}, function (value, index) {
// obj.update({
// email: value
// });
// layer.close(index);
//});
});
loaddata();//首次加载
function loaddata(datafield) {
//alert(JSON.stringify(data));
table.render({
elem: '#order_query_table'
, url: '../order/getAutomaticRequestRecordlist'
, where: datafield
, title: '自动请货记录表'
, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
, limits: [10, 20, 30, 40, 50, 200, 400, 600]
, limit: 10
, page: true
, done: function (data) {
console.log(data);
}
, cols: [[
{ type: 'checkbox', fixed: 'left' },
{
field: 'Operator', title: '操作人', style: "text-align:center", align: "center",
},
//{
// field: 'StoreId', title: '门店id', style: "text-align:center", align: "center",
//},
{
field: 'R_time', title: '请货日期', style: "text-align:center", align: "center",
},
{
field: 'R_requestId', title: '请货号', style: "text-align:center", event: "getaddress", align: "center",
},
{
field: 'R_type', title: '请货类型', style: "text-align:center", align: "center",
templet: function (mydata) {
if (mydata.R_type == 1) {
return "手动";
} else {
return "自动";
}
}
},
{
field: 'R_state', title: '请货状态', style: "text-align:center;color:red;", event: "getprodetail", align: "center",
templet: function (mydata) {
if (mydata.R_state == 1) {
return "是";
} else {
return "否";
}
}
},
//{
// field: 'GOODSID', title: '商品Id', style: "text-align:center", align: "center",
//},
//{
// field: 'GOODSNAME', title: '商品名称', style: "text-align:center", align: "center",
//},
//{
// field: 'GOODSTYPE', title: '规格',style: "text-align:center", align: "center",
//},
//{
// field: 'FACTORYNAME', title: '厂商', style: "text-align:center", align: "center",
//},
//{
// field: 'BARCODE', title: 'UPC', style: "text-align:center", align: "center",
//},
//{
// field: 'GOODSQTY', title: '库存', style: "text-align:center", align: "center",
//},
//{
// field: 'R_Detail_time', title: '确定请货时间', style: "text-align:center", align: "center",
//},
{
fixed: 'right', title: '操作', toolbar: '#barDemo'
}]],
toolbar: "#toolbarDemo",
text: {
none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
},
id: 'order_list'
});
}
///post请求方法生成页面
function Post(URL, PARAMTERS) {
//console.log(URL,PARAMTERS);
//创建form表单
var temp_form = document.createElement("form");
temp_form.action = URL;
//console.log(temp_form);
//console.log(PARAMTERS);
//如需打开新窗口，form的target属性要设置为'_blank'
temp_form.target = "_self";
temp_form.method = "post";
temp_form.style.display = "none";
//添加参数
for (var item in PARAMTERS) {
var opt = document.createElement("textarea");
//console.log(opt);
opt.name = PARAMTERS[item].name;
opt.value = PARAMTERS[item].value;
temp_form.appendChild(opt);
}
document.body.appendChild(temp_form);
//提交数据
temp_form.submit();
}
}
);
</script>
实现效果:
