欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>