orzar-admin/page/table/dictadd.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</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, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../assets/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<form class="layui-form  layuimini-form" action="" lay-filter="create-dict-form">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label required" style="width:auto">字典名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" required lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入英文字母组合">
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
    	<div class="layui-input-block bootm">
    		<input type="button" lay-submit lay-filter="saveBtn" id="saveBtn" value="确认">
    	</div>
    </div>
    <div>
    
        <!-- 字段属性 -->
        <table id="column-table" lay-filter="column-table"></table>
    
        <script type="text/html" id="column-toolbar">
			<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 
				<i class="layui-icon layui-icon-add-1"></i>新增
			</button>
			<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="batchRemove">
				<i class="layui-icon layui-icon-delete"></i>删除
			</button> 
        </script>
    
        <script type="text/html" id="col-value">
            <input type="text" name="value[{{ d.LAY_NUM-1 }}][value]" placeholder="值" autocomplete="off" class="layui-input" value="{{ d.value }}">
            <input type="hidden" name="value[{{ d.LAY_NUM-1 }}][field_id]" value="{{ d.field_id }}">
        </script>
    
        <script type="text/html" id="col-name">
            <input type="text" name="value[{{ d.LAY_NUM-1 }}][name]" placeholder="标题" autocomplete="off" class="layui-input" value="{{ d.name }}">
        </script>
    
    </div>
</form>	
<script src="../../lib/layui-v2.6.3/layuinew.js" charset="utf-8"></script>
<script src="../../assets/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../assets/main.js" charset="utf-8"></script>
<script>
	
    layui.use(['form',"table", "common"], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
		
		var field_id = 0;	
		function syncTableData() {
			let tableData = layui.form.val("create-dict-form");
			let columnTableData = [];
			let len = Object.keys(tableData).length;
			let id = 0;
			key_id = 0;
			while (id < len) {
				// column data
				if (typeof tableData["value[" + id + "][field_id]"] !== "undefined") {
					columnTableData.push({
						field_id: tableData["value[" + id + "][field_id]"],
						name : tableData["value[" + id + "][name]"],
						value: tableData["value[" + id + "][value]"],
					});
				}
				key_id++;
				id++;
			}
			layui.table.reloadData("column-table", {data: columnTableData});
		}	
		let table = layui.table;
		let common = layui.common;
		let cols = [
		    {
		        type: "checkbox",
		        width: 50,
		    },
		    {
		        title: "值",
		        field: "value",
		        templet: "#col-value"
		    },
		    {
		        title: "标题",
		        field: "name",
		        templet: "#col-name",
		    }
		];
		let data = [{
		    field_id: field_id++,
		    value : "",
		    name: "",
		}];
			
		table.render({
		    elem: "#column-table",
		    cols: [cols],
		    data: data,
		    cellMinWidth: 40,
		    skin: "line",
		    size: "lg",
		    limit: 10000,
		    page: false,
		    toolbar: "#column-toolbar",
		    defaultToolbar: [],
		});
			
		table.on("toolbar(column-table)", function(obj) {
		    if (obj.event === "add") {
		        add();
		    } else if (obj.event === "batchRemove") {
		        batchRemove(obj);
		    }
		});
			
		let add = function() {
		    syncTableData();
		    let options = table.getData("column-table");
		    options.push({
		        field_id: field_id++,
		        value : "",
		        name: "",
		    });
		    table.reloadData("column-table", {data:options});
		}
			
		let batchRemove = function(obj) {
		    var checkIds = common.checkField(obj,"field_id");
		    if (checkIds === "") return layer.msg("未选中数据", {icon: 3,time: 1000})
		    let data = table.getData("column-table");
		    let newData = [];
		    let deleteIds = checkIds.split(",");
		    layui.each(data, function (index, item) {
		        if (deleteIds.indexOf(item.field_id + "") === -1) {
		            newData.push(item);
		        }
		    });
		    table.reloadData("column-table", {data: newData})
		}	
			
		layui.form.render();
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {

                // 关闭弹出层
                layer.close(index);

                var iframeIndex = parent.layer.getFrameIndex(window.name);
                parent.layer.close(iframeIndex);

            });

            return false;
        });

    });
</script>
</body>
</html>