简单的封装在bootstrap框架下收集和获取数据的js.

没有跟上时代的初学者，没有学习新的三大框架，要下定决心学习学习。

不过在使用bootstrap框架在收集和获取数据的时候有着难以言表的重复大量数据，于是简单的封装了一个属于自己的js,自己感觉还是挺好用的，嘿嘿。

<div class="well" id="well">
    <div class="form-horizontal form-pd">
        <div class="col-sm-4">
            <div class="form-group">
                <label for="" class="col-sm-4 control-label text-right">名称<span class="c-red">*</span></label>
                <div class="col-sm-7">
                    <input id="txtTitle_ArticleAdd" name="Title" type="text" class="form-control required" placeholder="文章名">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-4 control-label text-right">来源<span class="c-red">*</span></label>
                <div class="col-sm-7">
                    <select name="source">
                        <option value="inter">网络</option>
                        <option value="book">书籍</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-4 control-label text-right">国籍<span class="c-red">*</span></label>
                <div class="col-sm-7">
                    <input id="txtNationality_ArticleAdd" name="Nationality" type="text" class="form-control required">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-4 control-label text-right">专业</label>
                <div class="col-sm-7">
                    <input id="txtProfession_ArticleAdd" name="Profession" type="text" class="form-control required">
                </div>
            </div>
            
           
            <div class="form-group">
                <label for="" class="col-sm-4 control-label text-right">第一作者</label>
                <div class="col-sm-7">
                    <input id="txtFirstAuthor_ArticleAdd" name="FirstAuthor" type="text" class="form-control required">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-4 control-label text-right">影响因子</label>
                <div class="col-sm-7">
                    <input id="txtInfluenceFactor_ArticleAdd" name="InfluenceFactor" type="text" class="form-control required">
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group">
                <label for="" class="col-sm-4 control-label text-right">所属参展商</label>
                <div class="col-sm-7">
                    <input type="hidden" id="ArticleAdd_VenderID" name="VenderID" value="108221">
                    <input id="txtArticleAdd_VenderName" name="VenderName" type="text" class="form-control required">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-4 control-label text-right">刊名</label>
                <div class="col-sm-7">
                    <input id="txtJournalName_ArticleAdd" name="JournalName" type="text"  class="form-control required">
                </div>
            </div>
              
            <div class="form-group">
                <label for="" class="col-sm-4 control-label text-right">手术</label>
                <div class="col-sm-7">
                    <input id="txtOperation_ArticleAdd" name="Operation" type="text" class="form-control required">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-4 control-label text-right">页码</label>
                <div class="col-sm-7">
                    <input id="txtPageNumber_ArticleAdd"  name="PageNumber" type="number" value="0" min="1" class="form-control required">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-4 control-label text-right">单位</label>
                <div class="col-sm-7">
                    <select name="Company"> 
                        <option value="1">国企</option>
                        <option value="2">私企</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="clear"></div>
</div>
<table class="table table-bordered"id="tables">
    <tr class="bg-cl">
        <th>参数ID</th>
        <th>参数值</th>
        <th>备注</th>
        <th>操作</th>
    </tr>
    <tr>
        <td >
            <input type="text" style="width: 100%" name="data1"/>
        </td>
        <td >
            <input type="text"  style="width: 100%" name="data2" />
        </td>
        <td>
            <input type="text" style="width: 100%"  name="data3" />
        </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()">添加</button>
</div>
<input type="button" name="savedata" id="test" value="提交" />
<script>
    var json =
    {
        Company:"1",
        FirstAuthor:"made",
        InfluenceFactor:"没有",
        JournalName:"起点",
        Nationality:"中国",
        Operation:"切割",
        PageNumber:"12",
        Profession:"写作",
        Title:"中国古典文轩",
        VenderID:"108221",
        VenderName:"中国起点",
        source: "book",
        table: [{
                data1: "11", data2: "22", data3: "33"
            }, {
                data1: "44", data2: "55", data3: "66"
            }
        ]
    }
    $(function () {
        var json1 = new jsons();
        json1.set($("#well"), $("#tables"), json);
        $("#test").click(function () {
            var root = json1.get($("#well"),$("#tables"));
            console.log(root);
        });
    });

</script>

var jsons = function() {};
    jsons.prototype = {
        get: function (content, content1) {
            var field;
            var headdatas = new Object();
            var tabledatas = new Object();
            if (content[0].tagName.toLowerCase() == "div") {
                headdatas = Gets(content);
            } else {
                tabledatas = Gettable(content);
            }
            if (content1[0].tagName.toLowerCase() == "table") {
                tabledatas = Gettable(content1);
            } else {
                headdatas = Gets(content1);
            }
            var root = $.extend(headdatas, tabledatas);
            return root;
        },
        set: function (content1, content2, json) {
            var field;
            if (content1[0].tagName.toLowerCase() == "div") {
                field = content1.find('input,textarea,select');
                Fill(field, json);
            } else {
                FillTableData(content1, json);
            }
            if (content2[0].tagName.toLowerCase() == "table") {
               FillTableData(content2, json);
            } else {
                Fill(content2, json);
            }
        },
        del:function(content) {
            var id = delData(content);
            return id;
        }
    }
//指定div 里面所有的input,textarea,raio,checkbox等。
function Gets(content) {
    try {
        var lRoot = new Object();
        var field = content.find('input,textarea,select');
        lRoot = CollectionInputData(field);
        return lRoot;

    } catch (e) {
        alert("抱歉，攻城狮正在攻城！");
    }

}
//指定表格内的数据
function Gettable(content) {
    try {
        var lRoot = new Object();
        var tabledata = new Array();
        var tables = content.find("tr");
        for (var i = 0; i < tables.length; i++) {
            var trDatas = new Object();
            var tdData = tables.eq(i).find('td').find('input,textarea,select');
            trDatas = CollectionInputData(tdData);
            if ($.isEmptyObject(trDatas)) continue;
            tabledata.push(trDatas);
        }
        lRoot["table"] = tabledata;
        return lRoot;
    } catch (e) {
        alert("抱歉，攻城狮正在攻城！");
    }
}
//收集指定容器内输入框的数据
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("抱歉，攻城狮正在攻城！");
    }
}
// 指定位置容器赋值
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('td').find('input,textarea');
        if (tdData.length > 0) {
            for (var i = 0; i < json.table.length - tables.length; i++) {
                trAdd();
            }
            //重新获取有几个tr
            tables = content.find("tr");
            for (var i = 0; i < json.table.length; i++) {
                //循环赋值
                tdData = tables.eq(i).find('td').find('input,textarea');
                Fill(tdData, json.table[i]);
            }
        } else {
            if (json.table != "" && json.table != undefined) {
                for (var i = 0; i < json.table.length - (tables.length - 1) ; i++) {
                    trAdd();
                }
                //重新获取有几个tr
                tables = content.find("tr");
                for (var i = 0; i < json.table.length; i++) {
                    //循环赋值
                    tdData = tables.eq(i + 1).find('td').find('input,textarea');
                    Fill(tdData, json.table[i]);
                }
            }
        }
        break;
    }
}
//删除选中的数据
function delData(content) {
    var id = "";
    var arrselections = content.bootstrapTable('getSelections');
    if (arrselections.length <= 0) {
        alert("请选择有效数据!");
        return id;
    }
   
    for (var i = 0; i < arrselections.length; i++) {
        id += arrselections[i].Id + ',';
    }
    id = id.substring(0, id.length - 1);
    return id;
}
//增加表格行
function trAdd() {
    var table = $("#tables");
    var str = "<tr>";
    if (table.find('tr').length > 1) {
        str += table.find('tr').eq(1)[0].innerHTML;
    } else {
        str += table.find('tr').eq(0)[0].innerHTML;
    }
    str += "</tr>";
    table.append(str);
}
//删除指定行
function trDelete(content) {
    var td = $(content);
    td.parents("tr").remove();
}

主题思想是通过name来对应收集赋值数据，以前是通过id，但是总感觉重复劳动比较多，就把它抽了出来。

一个json里面包含对象和数组的键值对。对象放在div 里面，数组是table 里面的数据。总体还是传递两个id,定位到要收集哪里的数据。

应该有许多的缺点，不过应付属于我自己的项目还是可以的，毕竟小项目(*^▽^*)。。。