关于在项目中使用jq通过Id 收集数据,一点不成熟地封装收集页面数据,我是通过name,感觉好点。

在项目中使用jq 保存数据,会根据Id获取指定的input,textarea,table中的数据。页面多的话,会比较麻烦,就封装了一个简单的js.请大家指教,感觉不是很成熟而且限制也不少,但是在我的项目中还是帮助我减少不少代码。下面贴代码

<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"  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" 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">
        </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">
        </div>
    </div>
</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="提交"/>

下面是我封装的js,还请各位技术大牛多多指点

   $(function () {

        FillData($("#foot"), $("#tables"), json);
        $("#test").click(function () {
            var root = $.extend(Gets($("#foot")), Gettable($("#tables")));
        });
    });
   //增加表格行
    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();
    }
//指定div 里面所有的input,textarea,raio,checkbox等。
function Gets(content) {
    try {
        var lRoot = new Object();
        var field = content.find('input,textarea');
        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');
            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;
            default:
                break;
            }
        }
        return root;
    } catch (error) {
        alert("抱歉,攻城狮正在攻城!");
    }
}

优化的地方应该还有许多,但是在进一步完善。还请各位多多指点。

猜你喜欢

转载自www.cnblogs.com/CnnBlog/p/9341053.html
今日推荐