js动态添加行hiddenfield保存xml或json 数据 提交给后台处理

最新推荐文章于 2017-02-14 15:04:00 发布
最新推荐文章于 2017-02-14 15:04:00 发布
阅读量1.1k 收藏
点赞数
分类专栏： ASP.NET
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BQL_Email/article/details/46003439
版权

<style type="text/css">
        table {
            border: black solid 1px;
            border-collapse: collapse;
        }


        td {
            border: black solid 1px;
            padding: 3px;
        }


        .td_Num {
            width: 60px;
            text-align: center;
        }


        .td_Item {
            width: 160px;
            text-align: center;
        }


        .td_Oper {
            width: 120px;
            text-align: center;
        }


            .td_Oper span {
                cursor: pointer;
            }
    </style>   

<div>

            <table id="content">
                <thead>
                    <tr>
                        <td colspan="5">本次会议决议</td>
                        <td colspan="5" style="text-align: right">
                            <a href="#" οnclick="add_line();">添加</a>
                        </td>
                    </tr>
                    <tr>
                        <td class='td_Num'>
                            <asp:Label ID="lblNum" runat="server" Text="序号" Style="width: 60px"></asp:Label>
                        </td>
                        <td class='td_Item'>
                            <asp:Label ID="lblTitle" runat="server" Text="决议事项" Style="width: 120px"></asp:Label>
                        </td>
                        <td class='td_Item'>
                            <asp:Label ID="lblDescription" runat="server" Text="决议描述" Style="width: 120px"></asp:Label>
                        </td>
                        <td class='td_Item'>
                            <asp:Label ID="lblTarget" runat="server" Text="验证目标" Style="width: 120px"></asp:Label>
                        </td>
                        <td class='td_Item'>
                            <asp:Label ID="lblStandard" runat="server" Text="验证标准" Style="width: 120px"></asp:Label>
                        </td>
                        <td class='td_Item'>
                            <asp:Label ID="lblRecipient" runat="server" Text="责任人" Style="width: 120px"></asp:Label>
                        </td>
                        <td class='td_Item'>
                            <asp:Label ID="lblStartDdate" runat="server" Text="开始时间" Style="width: 120px"></asp:Label>
                        </td>
                        <td class='td_Item'>
                            <asp:Label ID="lblEndDate" runat="server" Text="完成时间" Style="width: 120px"></asp:Label>
                        </td>
                        <td class='td_Item'>
                            <asp:Label ID="lblIsWork" runat="server" Text="任务系统" Style="width: 60px"></asp:Label>
                        </td>
                        <td class='td_Oper'>
                            <asp:Label ID="lblOper" runat="server" Text="操作" Style="width: 60px"></asp:Label>
                        </td>
                    </tr>
                </thead>


                <tbody>


                    <tr style="display: none">
                        <td class="td_Num"></td>
                        <td class="td_Item">
                            <input type="text" class="Title" value="" /></td>
                        <td class="td_Item">
                            <input type="text" class="Description" value="" /></td>
                        <td class="td_Item">
                            <input type="text" class="Target" value="" /></td>
                        <td class="td_Item">
                            <input type="text" class="Standard" value="" /></td>
                        <td class="td_Item">
                            <uc1:PeopleEditorControls ID="PeopleEditorControls1" runat="server" MultiSelect="true" />
                        </td>
                        <td class="td_Item">
                            <input type="text" class="Wdate" value="" οnclick="WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss' })"></input></td>
                        <td class="td_Item">
                            <input type="text" class="Wdate" value="" οnclick="WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss' })"></input></td>
                        <td class="td_Item">
                            <input type="text" class="IsWork" value="" /></td>
                        <td class="td_Oper">
                            <span οnclick="remove_line(this);">删除</span>
                        </td>
                    </tr>
                    <asp:Repeater ID="Repeater1" runat="server">
                        <ItemTemplate>
                            <tr>
                                <td class="td_Num"><%=count++ %></td>
                                <td class="td_Item">
                                    <input type="text" class="Title" value="" /></td>
                                <td class="td_Item">
                                    <input type="text" class="Description" value="" /></td>
                                <td class="td_Item">
                                    <input type="text" class="Target" value="" /></td>
                                <td class="td_Item">
                                    <input type="text" class="Standard" value="" /></td>
                                <td class="td_Item">
                                    <uc1:PeopleEditorControls ID="PeopleEditorControls1" runat="server" MultiSelect="true" />
                                </td>
                                <td class="td_Item">
                                    <input type="text" class="Wdate" value="" οnclick="WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss' })"></input></td>
                                <td class="td_Item">
                                    <input type="text" class="Wdate" value="" οnclick="WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss' })"></input></td>
                                <td class="td_Item">
                                    <input type="text" class="IsWork" value="" /></td>
                                <td class="td_Oper">
                                    <span οnclick="remove_line(this);">删除</span>
                                </td>
                            </tr>
                        </ItemTemplate>
                    </asp:Repeater>
                </tbody>


            </table>
            <input type="button" value="提交数据" id="btnSubmit" οnclick="SaveData()" />
            <div style="display: none;">
                <asp:HiddenField ID="HddfDate" runat="server" />
                <asp:Button ID="BtnSaveDate" runat="server" Text="Button" OnClick="btnSubmit_Click" />
            </div>

        </div>


<script type="text/javascript">


    var currentStep = 0;
    var max_line_num = 0;
    //增加一行记录 此方式为复制某行然后添加，包括行内控件值，使用时注意设置一个模板行
    function add_line() {
        var oTr = document.getElementById("content").rows[2];//此table复制第三行
        var newTr = oTr.cloneNode(true);
        newTr.style.display = "inline";
        document.getElementById("content").getElementsByTagName("tbody")[0].appendChild(newTr);
        newTr.firstChild.innerHTML = newTr.rowIndex - 2;
    }
    //删除选择记录
    function remove_line(index) {
        if (index != null) {
            currentStep = $(index).parent().parent().find("td:first-child").html();
        }
        if (currentStep == 0) {
            alert('请选择一项!');
            return false;
        }
        if (confirm("确定要删除改记录吗？")) {
            $("#content tr").each(function () {
                var seq = parseInt($(this).children("td").html());
                if (seq == currentStep) { $(this).remove(); }
                if (seq > currentStep) { $(this).children("td").each(function (i) { if (i == 0) $(this).html(seq - 1); }); }
            });
        }
    }
    //保存数据
    function SaveData() {
        var data = "<root>";
        $('#content tr').each(function () {
            data += "<item>";
            var Title = $(this).find("td:eq(1)").find("input").val();
            var Description = $(this).find("td:eq(2)").find("input").val();
            var Target = $(this).find("td:eq(3)").find("input").val();
            var Standard = $(this).find("td:eq(4)").find("input").val();
            var Recipient = $(this).find("td:eq(5)").find("input").val();
            var StartDdate = $(this).find("td:eq(6)").find("input").val();
            var EnDate = $(this).find("td:eq(7)").find("input").val();
            var IsWork = $(this).find("td:eq(8)").find("input").val();
            data += "   <Title>" + Title + "</Title>";
            data += "   <Description>" + Description + "</Description>";
            data += "   <Target>" + Target + "</Target>";
            data += "   <Standard>" + Standard + "</Standard>";
            data += "   <Recipient>" + Recipient + "</Recipient>";
            data += "   <StartDdate>" + StartDdate + "</StartDdate>";
            data += "   <EnDate>" + EnDate + "</EnDate>";
            data += "   <IsWork>" + IsWork + "</IsWork>";
            data += "</item>";
        });
        data += "</root>";
        // alert(data);
        $("#<%=HddfDate.ClientID %>").val(data);
        $("#<%=BtnSaveDate.ClientID %>").click();
    }
    function setJson(jsontext, bol) {
        if (typeof (tr) == "undefined") {
            tr = $("#content tr:eq(1)").clone();
        }
        if (typeof (temptr) == "undefined") {
            temptr = $("#content tr:eq(1)").clone();
        }
        if (jsontext != "") {
            var object = eval(jsontext);
            for (var i in object) {
                $(temptr).find("td:eq(0)").find("input").attr("value", object[i].OrderID);
                $(temptr).find("td:eq(1)").find("input").attr("value", object[i].Title);
                $(temptr).find("td:eq(2)").find("input").attr("value", object[i].Description);
                $(temptr).find("td:eq(3)").find("input").attr("value", object[i].Target);
                $(temptr).find("td:eq(4)").find("input").attr("value", object[i].Standard);


                var jdata = eval(object[i].Recipient);
                var result = "";
                if (bol) {
                    for (var j in jdata) {
                        result += "<div class='text_div'><div class='text_select' UserName='" + jdata[j].Name + "'>" + jdata[j].Displayname + "</div><div class='text-remove'></div></div>"
                    }
                } else {
                    for (var j in jdata) {
                        result += "<div class='text_div'><div class='text_select' UserName='" + jdata[j].Name + "'>" + jdata[j].Displayname + "</div><div class='text-remove'></div></div>"
                    }


                }


                $(temptr).find("td:eq(5)").find("input").val(object[i].Recipient);
                if (typeof (jdata) == "undefined") {
                    $(temptr).find("td:eq(5)").find(".User").html("");
                } else {
                    $(temptr).find("td:eq(5)").find(".User").html(result);
                }
                try {
                    $(temptr).find("td:eq(6)").find("input").attr("value", object[i].StartDate.format("yyyy-MM-dd"));
                }
                catch (e) { $(temptr).find("td:eq(6)").find("input").attr("value", object[i].StartDate) }
                try {
                    $(temptr).find("td:eq(7)").find("input").attr("value", object[i].Enddate.format("yyyy-MM-dd"));
                }
                catch (e) { $(temptr).find("td:eq(7)").find("input").attr("value", object[i].Enddate) }


                $(temptr).find("td:eq(8)").find("select option[value='" + object[i].Iswork + "']").attr("selected", true);


                $(temptr).find("td:last").html("<a οnclick='Del(this)'>删除</a>")


                $("#content").append('<tr>' + $(temptr).html() + '</tr>');
            }
        }
        $("#content tr:eq(1)").remove();
    }
    //json 格式 未处理完全
    <%--  function SaveData() {
        var data = "{'item':[";
        $('#content tr').each(function () {
            data += "{";
            var Title = $(this).find("td:eq(1)").find("input").val();
            var Description = $(this).find("td:eq(2)").find("input").val();
            var Target = $(this).find("td:eq(3)").find("input").val();
            var Standard = $(this).find("td:eq(4)").find("input").val();
            var Recipient = $(this).find("td:eq(5)").find("input").val();
            var StartDdate = $(this).find("td:eq(6)").find("input").val();
            var EnDate = $(this).find("td:eq(7)").find("input").val();
            var IsWork = $(this).find("td:eq(8)").find("input").val();
            data += "Title:" + Title + ",";
            data += "Description" + Description + ",";
            data += "Target" + Target + ",";
            data += "Standard" + Standard + ",";
            data += "Recipient" + Recipient + ",";
            data += "StartDdate" + StartDdate + ",";
            data += "EnDate" + EnDate + ",";
            data += "IsWork" + IsWork + "";
            data += "},";
        });
        data += "]}";
        // alert(data);
        $("#<%=HddfDate.ClientID %>").val(data);
        $("#<%=BtnSaveDate.ClientID %>").click();
      }--%>
    //明细赋值




</script>


    protected void btnSubmit_Click(object sender, EventArgs e)
        {
            string s = HddfDate.Value;//获取前台hiddenfield保存的数据。
            XmlDocument doc = new XmlDocument();
            doc.LoadXml(s);//转为xml
            string jsonText = JsonConvert.SerializeXmlNode(doc);//xml转为json

            //根据业务情况选择合适的数据格式进行处理。

}

Hi3号
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HiddenField/ViewState/ControlState
03-27
HiddenField/ViewState/ControlState__保存数据的另一个场所，讲解、用法、实例
js动态改变HiddenField值，后台不能获取值的问题
weixin_34318326的博客
08-20 896
在项目中遇到的问题是这样的:我在前一篇中写到页面交互在客户端JS使用window.showModalDialog()方法,A页面传递参数到B页面，B页面接收参数后，查询获得的数据，将选中的数据通过一个字符串返回来，这个通过window.showModalDialog()解决了。现在用JS将返回的字符串赋值给一个服务器控件HiddenField：document.getElementById("&l...
HiddenField在js赋值后，提交后值不变的问题
阿达King哥的博客
05-15 7089
也许在js中，你把value的v大写了。例如： var hfEmployeeID = document.getElementById(""); if (returnValue) { hfEmployeeID.Value
隐藏控件--HiddenField控件
热门推荐
何静媛
11-13 1万+
百度查的结果：       HiddenField控件顾名思义就是隐藏输入框的服务器控件，它能让你保存那些不需要显示在页面上的且对安全性要求不高的数据。也许这个时候应该有这么一个疑问，为什么有了ViewState、Session和Cookie等状态保存机制，还需要用起HiddenField呢？   　　增加HiddenField，其实是为了让整个状态管理机制的应用程度更加全面。因
Extjs4中Form的使用之本地hiddenfield
10-26
Extjs4中Form的使用之本地hiddenfield实例，具体实现如下，需要的朋友不要错过
Django Serializer HiddenField隐藏字段实例
09-17
主要介绍了Django Serializer HiddenField隐藏字段实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ASP.NET中HiddenField隐藏域控件的使用方法
10-22
本文主要介绍ASP.NET中HiddenField控件的基础使用方法、事件以及配合javascript的一些使用，希望能帮到大家。
HiddenField
12-04
详细介绍HiddenField控件的使用以及需要注意的事项
HiddenField控件的使用
jjzaihaozhe的专栏
08-18 1090
ASP.NET2.0 HiddenField控件(1)2007-05-12 23:18HiddenField控件顾名思义就是隐藏输入框的服务器控件，它能让你保存那些不需要显示在页面上的且对安全性要求不高的数据。也许这个时候应该有这么一个疑问，为什么有了ViewState、Session和Cookie等状态保存机制，还需要用起HiddenField呢？    增加HiddenField，其实是为了让
无法获取页面HiddenField的值
localhost
06-01 1588
当在页面上设置隐藏控件: asp:HiddenField ID="HiddenIP" runat="server" 在JS中通过$('#XXX').val()获取值有时候会失败， 因为JS执行时，asp控件的ID会改变，会在其ID命名前加上前缀， 所以不能这样直接通过ID获取，这个时候获取的正确方式是： $(':hidden[id$=XXX]').val()
Js动态追加行，并将内容保存到数据库，并取出数据通过js动态显示
qq_31975127的博客
02-14 6921
实现步骤讲解: 首先需要在html页面创建一个table表格和一个动态添加行的按钮<input type="button" onclick="addT（）" value="添加" />然后实现表格中追加行的js方法//添加动态行(可在实现的列中添加相应的鼠标事件；在事件中添加相应的方法，不需要时可将onkeyup='fxKeyUp(" + fx + ")' onchange='fxKeyUp("
document.getElementById(）给HiddenField1传值
最新发布
11-18
可以使用document.getElementById()方法来获取指定id...```javascript document.getElementById("HiddenField1").value = "your value"; ``` 其中，"HiddenField1"是需要传值的元素的id，"your value"是需要设置的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值