• 在升级版数据的收集和赋值。只针对上篇文章。


    上篇文章的缺点在于需要传参数,而且参数的个数被限制,当页面的布局不符合参数是,上篇文章的js封装即为失败品。

    下面是稍微升级版的1.1版本。通过自定义的属性来收集 参数,就破除了参数的设定,在页面布局的时候只需要录入一个固定的自定义属性即可。

    我自己在项目中固定的属性为:表格外面需要获取的数据自定义属性为--savename,表格属性为--saveitem,表格内需要收集的自定义属性为--saveitemname

    如果我有幸帮到您,您可自行更改

    代码如下:

    <div id="foot">
    <div class="form-horizontal form-pd">
        <div class="form-group">
            <label for="" class="col-xs-2 control-label text-right">参数类型:</label>
            <div class="col-xs-9 ">
                <input type="text" class="form-control" name="ParameterID" savename  placeholder="参数类型">
            </div>
        </div>
        <div class="form-group">
            <label for="" class="col-xs-2 control-label text-right">参数名称:</label>
            <div class="col-xs-9 ">
                <input type="text" class="form-control" name="ParameterName" savename  placeholder="参数名称">
            </div>
        </div>
        <div class="form-group">
            <label for="" class="col-xs-2 control-label text-right">排序:</label>
            <div class="col-xs-9 ">
                <input type="number" class="form-control" name="Sort" savename>
            </div>
        </div>
        <div class="form-group">
            <label for="" class="col-xs-2 control-label text-right">备注:</label>
            <div class="col-xs-9 ">
                <input type="text" class="form-control" placeholder="备注" name="Remark" savename>
            </div>
        </div>
    </div>
    </div>
        <table class="table table-bordered"id="tables" saveitem name="table1">
            <tr class="bg-cl">
                <th style="display: none">产品ID</th>
                <th>产品编号</th>
                <th>产品名称</th>
                <th>产品参数</th>
                <th>操作</th>
            </tr>
            <tr>
                <td style="display:none">
                    <input type="hidden" style=" 100%"  name="data1" saveitemname/>
                </td>
                <td >
                    <input type="text"  style=" 100%" name="data2" saveitemname/>
                </td>
                <td >
                    <input type="text"  style=" 100%" name="data3"saveitemname />
                </td>
                <td >
                    <input type="text"  style=" 100%" name="data4" saveitemname/>
                </td>
                <td style="text-align: center;" onclick="trDelete(this)">
                    <button type="button" class="btn btn-xs btn-danger">删除</button>
                </td>
            </tr>
        </table>
        <div>
            <button type="button" class="btn btn-xs btn-primary" onclick="trAdd($('#tables'))">添加</button>
        </div>
    <script>
        var json =
        {
            ParameterID: "11",
            ParameterName: "222",
            Remark: "44",
            Sort: "33",
            table1: [{
                    data1: "10086", data2: "YD", data3: "中国移动",data4:"坑"
                }, {
                    data1: "10010", data2: "LT", data3: "中国联通", data4: "蒙"
                }, {
                    data1: "10000", data2: "DX", data3: "中国电信", data4: "拐"
                }
            ]
        }
        $(function () {
            var json1 = new jsons();
            json1.set(json);
            $("#test").click(function () {
                var root = GetData();
                console.log(root);
            });
    
    
        });
      
    </script>
    var jsons = function () { };
    jsons.prototype = {
        get: function () {
            return GetData();
        },
        set: function (json) {
            FillData(json);
        }
    }
    function GetData() {
        //所有的表格外的输入框,下拉框,单选,多选,富文本,必须强调属性savename
        var content = $('*[savename]');
        var root = CollectionInputData(content);
        //所有的表格内的数据必须给表格声明属性 saveitem
        var tablejson = [];
        var tablecontent = $('*[saveitem]');
        for (var j = 0; j < tablecontent.length; j++) {
            try {
                var tabledata = new Array();
                var tables = tablecontent.eq(j).find("tr");
                for (var i = 0; i < tables.length; i++) {
                    var trDatas = new Object();
                    var tdData = tables.eq(i).find('*[saveitemname]');
                    if (tdData.length < 1) continue;
                    trDatas = CollectionInputData(tdData);
                    tabledata.push(trDatas);
                }
                tablejson[tablecontent.eq(j).attr("name")] = tabledata;
            } catch (e) {
                alert("抱歉,攻城狮正在攻城!");
            }
        }
        return $.extend(root, tablejson);
    }
    //收集指定容器内输入框的数据
    function CollectionInputData(content) {
        var root = new Object();
        try {
            for (var j = 0; j < content.length; j++) {
                var myobject = new Object();
                switch (content[j].type) {
                case "text":
                case "hidden":
                case "textarea":
                case "number":
                    if (content[j].value != "" && content[j].value != undefined) {
                        if (root[content[j].name]) {
                            myobject[content[j].name] = content[j].value;
                        } else {
                            root[content[j].name] = content[j].value;
                        }
                    }
                    break;
                case "radio":
                case "checkbox":
                    root[content[j].name] = content[j].checked ? 1 : 0;
                    break;
                case "select-one":
                    if (content[j].value != "" && content[j].value != undefined) {
                        root[content[j].name] = content[j].value;
                    } else {
                        root[content[j].name] = -1;
                    }
                    break;
                default:
                    break;
                }
            }
            return root;
        } catch (error) {
            alert("抱歉,攻城狮正在攻城!");
        }
        return root;
    }
    function FillData(json) {
        var content = $("*[savename]");
        Fill(content, json);
        var tablecontent = $("*[saveitem]");
        for (var i = 0; i < tablecontent.length; i++) {
            var tables = tablecontent.eq(i);
            FillTableData(tables, json);
        }
    }
    // 指定位置容器赋值
    function Fill(content, json) {
        for (var i = 0; i < content.length; i++) {
            if (json[content[i].name]) {
                switch (content[i].type) {
                case "text":
                case "hidden":
                case "textarea":
                case "number":
                    content[i].value = json[content[i].name];
                    break;
                case "radio":
                case "checkbox":
                    content[i].checked = json[content[i].name];
                case "select-one":
                    content[i].value = json[content[i].name];
                    break;
                default:
                }
                //移除json中已经使用过的值
                // delete json[content[i].name];
            }
        }
    }
    //填充表格数据
    function FillTableData(content, json) {
        var tables = content.find("tr");
    
        var tdData;
        switch (tables.length) {
        case 0:
            return;
        default:
            tdData = tables.eq(0).find("*[saveitemname]");
            var i;
            if (tdData.length > 0) {
                for (i = 0; i < json[content.attr("name")].length - tables.length; i++) {
                    trAdd(content);
                }
                //重新获取有几个tr
                tables = content.find("tr");
                for (i = 0; i < json[content.attr("name")].length; i++) {
                    //循环赋值
                    tdData = tables.eq(i).find("*[saveitemname]");
                    Fill(tdData, json[content.attr("name")][i]);
                }
            } else {
                if (json[content.attr("name")] != "" && json[content.attr("name")] != undefined) {
                    for (i = 0; i < json[content.attr("name")].length - (tables.length - 1) ; i++) {
                        trAdd(content);
                    }
                    //重新获取有几个tr
                    tables = content.find("tr");
                    for (i = 0; i < json[content.attr("name")].length; i++) {
                        //循环赋值
                        tdData = tables.eq(i + 1).find("*[saveitemname]");
                        Fill(tdData, json[content.attr("name")][i]);
                    }
                }
            }
            break;
        }
    }
    
    //增加表格行
    function trAdd(content) {
        var str = "<tr>";
        if (content.find('tr').length > 1) {
            str += content.find('tr').eq(1)[0].innerHTML;
        } else {
            str += content.find('tr').eq(0)[0].innerHTML;
        }
        str += "</tr>";
        content.append(str);
    }
    //删除指定行
    function trDelete(content) {
        var td = $(content);
        td.parents("tr").remove();
    }
    View Code

    还请不吝指教。

  • 相关阅读:
    单例设计模式
    网络编程--Socket与ServerSocket
    JDBC连接Oracle数据库
    ObjectInputStream与ObjectOutputStream
    MyBatis的SQL语句映射文件详解(二)----增删改查
    MyBatis的SQL语句映射文件详解
    MyBatis+Spring实现基本CRUD操作
    通俗解释IOC原理
    Git菜鸟
    hibernate连接oracle数据库
  • 原文地址:https://www.cnblogs.com/CnnBlog/p/9366207.html
Copyright © 2020-2023  润新知