当前位置:编程学习 > C#/ASP.NET >>

一个很好用的表格直接修改交互数据库的JS(通用)

前提:引用JQUERY  表格遵循一定的规格 本人闲暇时写的,有不懂的可以加QQ:609651658

JS通用代码:
  <script type="text/javascript">
        //tableId:DataGrid的ID  url:ajax请求路径
        function savetable(tableId, url) {
            var alls = [];
            var tb = document.getElementById(tableId);
            var rows = tb.rows.length;
            var cells = tb.rows[0].cells.length;
            for (var i = 1; i < rows; i++) {
                var json = "";
                var isupdate = false;
                for (var k = 1; k < cells; k++) {
                    var newvalue = tb.rows[i].cells[k].getElementsByTagName("input")[0].value; //新值
                    var oldvalues = tb.rows[i].cells[k].getElementsByTagName("input")[1].value; //旧值*键名
                    var oldvalue = oldvalues.split("*")[0]; //旧值
                    if (newvalue != oldvalue) {
                        isupdate = true;
                        continue;
                    }
                }
                if (isupdate == true) {
                    for (var j = 1; j < cells; j++) {
                        var newvalue = tb.rows[i].cells[j].getElementsByTagName("input")[0].value; //新值
                        var oldvalues = tb.rows[i].cells[j].getElementsByTagName("input")[1].value;//旧值*键名
                        var keyname = oldvalues.split("*")[1]; //键名
                        var oldvalue = oldvalues.split("*")[0]; //旧值                
                        // var datefield = TB.rows[i].cells[j].getElementsByTagName("input")[2].value;
                        var id = tb.rows[i].cells[0].getElementsByTagName("input")[0].value;
                        json += "\"" + keyname + "\":\"" + newvalue + "\",";
                    }
                    json = "\{\"GUID\":\"" + id + "\"," + json;
                    json = json.substring(0, json.length - 1) + "\}";
                    alls.push(json);
                }
            }
            //判断是否修改过
            if (alls.length == 0) {
                alert("您没有修改表格!");
                return;
            }
            alls = "{\"arrays\":[" + alls + "]}";
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                url: url, //传入后台的地址/方法
                data: alls, //参数,这里是一个json语句
                success: function (result) {
                    if (result.toString() == "0") {
                        alert("未能成功!请检查输入!!");
                    }
                    else {
                        alert("更改成功!");
                        document.location.reload(); //重新加载当前页面
                    }
                }
            });
        }
    </script>

表格代码:
 <asp:DataGrid ID="DataGrid" runat="server" AutoGenerateColumns="False">
        <Columns>
            <asp:TemplateColumn HeaderText="序号">
                <HeaderStyle HorizontalAlign="center" />
                <ItemStyle HorizontalAlign="center"></ItemStyle>
                <ItemTemplate>
                    <%# this.Pager.PageSize * (this.Pager.CurrentPageIndex - 1) + this.DataGrid.Items.Count + 1%>
                    <asp:HiddenField ID="hidGuid" runat="server" Value='<%# Convert.ToString(DataBinder.Eval(Container, "DataItem.GUID"))%>' />
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:TemplateColumn HeaderText="转关单号">
                <HeaderStyle HorizontalAlign="center" />
                <ItemStyle HorizontalAlign="center"></ItemStyle>
                <ItemTemplate>
                    <cc1:TextBox ID="txtZGDH" runat="server" Text=' <%# DataBinder.Eval(Container, "DataItem.TRANS_NO")%>'></cc1:TextBox>
                    <asp:HiddenField ID="hidZGDH" Value='<%# Convert.ToString(DataBinder.Eval(Container, "DataItem.TRANS_NO"))+"*TRANS_NO"%>'
                        runat="server" />
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:TemplateColumn HeaderText="申报单位">
                <HeaderStyle HorizontalAlign="center" Width="230px" />
                <ItemStyle HorizontalAlign="center"></ItemStyle>
                <ItemTemplate>
                    <span style="font: 13px;">
                        <cc1:TextBox ID="txtSBDW" runat="server" Text='<%# Convert.ToString(DataBinder.Eval(Container, "DataItem.AGENT_COMP_NAME"))%>'></cc1:TextBox>
                        <asp:HiddenField ID="hidSBDW" Value='<%# Convert.ToString(DataBinder.Eval(Container, "DataItem.AGENT_COMP_NAME"))+"*AGENT_COMP_NAME"%>'
                            runat="server" />
                    </span>
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:TemplateColumn HeaderText="备注">
                <HeaderStyle HorizontalAlign="center" />
                <ItemStyle HorizontalAlign="center"></ItemStyle>
                <ItemTemplate>
                    <cc1:TextBox ID="txtBZ" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.REMARK")%>'>
                    </cc1:TextBox>
                    <asp:HiddenField ID="hidBZ" Value='<%# Convert.ToString(DataBinder.Eval(Container, "DataItem.REMARK"))+"*REMARK"%>'
                        runat="server" />
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:TemplateColumn HeaderText="空箱数">
                <HeaderStyle HorizontalAlign="center" />
                <ItemStyle HorizontalAlign="left"></ItemStyle>
                <ItemTemplate>
                    <cc1:TextBox ID="txtKXS" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.EMPTY_NUM")%>'></cc1:TextBox>
                    <asp:HiddenField ID="hidKXS" Value='<%# Convert.ToString(DataBinder.Eval(Container, "DataItem.EMPTY_NUM"))+"*EMPTY_NUM"%>'
                        runat="server" />
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:TemplateColumn HeaderText="总件数">
                <HeaderStyle HorizontalAlign="center" />
                <ItemStyle HorizontalAlign="left"></ItemStyle>
                <ItemTemplate>
                    <cc1:TextBox ID="txtKXS" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.TOTAL_PIECE")%>'></cc1:TextBox>
                    <asp:HiddenField ID="hidKXS" Value='<%# Convert.ToString(DataBinder.Eval(Container, "DataItem.TOTAL_PIECE"))+"*TOTAL_PIECE"%>'
                        runat="server" />
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:TemplateColumn HeaderText="境内运输航次">
                <HeaderStyle HorizontalAlign="center" />
                <ItemStyle HorizontalAlign="left"></ItemStyle>
                <ItemTemplate>
                    <cc1:TextBox ID="txtKXS" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.TRAFFIC_TOOL_VOYAGE")%>'></cc1:TextBox>
                    <asp:HiddenField ID="hidKXS" Value='<%# Convert.ToString(DataBinder.Eval(Container, "DataItem.TRAFFIC_TOOL_VOYAGE"))+"*TRAFFIC_TOOL_VOYAGE"%>'
                        runat="server" />
                </ItemTemplate>
            </asp:TemplateColumn>
        </Columns>
    </asp:DataGrid>
后台代码:
  [WebMethod]
        public static string GetJson(Dictionary<string, string>[] arrays)
         {
             for (int i = 0; i <arrays.Length; i++)
             {
                 //获取主键ID
                    CusAppTransTopEntity top = new CusAppTransTopEntity();
                    top.Guid = arrays[i]["GUID"];
                    top.TransNo = arrays[i]["TRANS_NO"];
                    top.AgentCompName = arrays[i]["AGENT_COMP_NAME"];
                    top.Remark = arrays[i]["REMARK"];
                    top.EmptyNum = double.Parse(arrays[i]["EMPTY_NUM"]);
                    top.TotalPiece = double.Parse(arrays[i]["TOTAL_PIECE"]);
                    top.TrafficToolVoyage = arrays[i]["TRAFFIC_TOOL_VOYAGE"];               
                    new CusAppTransaction().UPdatBT(top);                                  
                 //最后执行更新
             }
             return "1";
         }

--------------------编程问答-------------------- http://ligerui.com/我一般去官网学习的 --------------------编程问答--------------------
引用 楼主 xzk0403 的回复:
前提:引用JQUERY  表格遵循一定的规格 本人闲暇时写的,有不懂的可以加QQ:609651658

JS通用代码:
  <script type="text/javascript">
        //tableId:DataGrid的ID  url:ajax请求路径
        function savetable(tableId, url) {
            var alls = [];
            var tb = document.getElementById(tableId);
            var rows = tb.rows.length;
            var cells = tb.rows[0].cells.length;
            for (var i = 1; i < rows; i++) {
                var json = "";
                var isupdate = false;
                for (var k = 1; k < cells; k++) {
                    var newvalue = tb.rows[i].cells[k].getElementsByTagName("input")[0].value; //新值
                    var oldvalues = tb.rows[i].cells[k].getElementsByTagName("input")[1].value; //旧值*键名
                    var oldvalue = oldvalues.split("*")[0]; //旧值
                    if (newvalue != oldvalue) {
                        isupdate = true;
                        continue;
                    }
                }
                if (isupdate == true) {
                    for (var j = 1; j < cells; j++) {
                        var newvalue = tb.rows[i].cells[j].getElementsByTagName("input")[0].value; //新值
                        var oldvalues = tb.rows[i].cells[j].getElementsByTagName("input")[1].value;//旧值*键名
                        var keyname = oldvalues.split("*")[1]; //键名
                        var oldvalue = oldvalues.split("*")[0]; //旧值                
                        // var datefield = TB.rows[i].cells[j].getElementsByTagName("input")[2].value;
                        var id = tb.rows[i].cells[0].getElementsByTagName("input")[0].value;
                        json += "\"" + keyname + "\":\"" + newvalue + "\",";
                    }
                    json = "\{\"GUID\":\"" + id + "\"," + json;
                    json = json.substring(0, json.length - 1) + "\}";
                    alls.push(json);
                }
            }
            //判断是否修改过
            if (alls.length == 0) {
                alert("您没有修改表格!");
                return;
            }
            alls = "{\"arrays\":[" + alls + "]}";
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                url: url, //传入后台的地址/方法
                data: alls, //参数,这里是一个json语句
                success: function (result) {
                    if (result.toString() == "0") {
                        alert("未能成功!请检查输入!!");
                    }
                    else {
                        alert("更改成功!");
                        document.location.reload(); //重新加载当前页面
                    }
                }
            });
        }
    </script>

表格代码:
 <asp:DataGrid ID="DataGrid" runat="server" AutoGenerateColumns="False">
        <Columns>
            <asp:TemplateColumn HeaderText="序号">
                <HeaderStyle HorizontalAlign="center" />
                <ItemStyle HorizontalAlign="center"></ItemStyle>
                <ItemTemplate>
                    <%# this.Pager.PageSize * (this.Pager.CurrentPageIndex - 1) + this.DataGrid.Items.Count + 1%>
                    <asp:HiddenField ID="hidGuid" runat="server" Value='<%# Convert.ToString(DataBinder.Eval(Container, "DataItem.GUID"))%>' />
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:TemplateColumn HeaderText="转关单号">
                <HeaderStyle HorizontalAlign="center" />
                <ItemStyle HorizontalAlign="center"></ItemStyle>
                <ItemTemplate>
                    <cc1:TextBox ID="txtZGDH" runat="server" Text=' <%# DataBinder.Eval(Container, "DataItem.TRANS_NO")%>'></cc1:TextBox>
                    <asp:HiddenField ID="hidZGDH" Value='<%# Convert.ToString(DataBinder.Eval(Container, "DataItem.TRANS_NO"))+"*TRANS_NO"%>'
                        runat="server" />
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:TemplateColumn HeaderText="申报单位">
                <HeaderStyle HorizontalAlign="center" Width="230px" />
                <ItemStyle HorizontalAlign="center"></ItemStyle>
                <ItemTemplate>
                    <span style="font: 13px;">
                        <cc1:TextBox ID="txtSBDW" runat="server" Text='<%# Convert.ToString(DataBinder.Eval(Container, "DataItem.AGENT_COMP_NAME"))%>'></cc1:TextBox>
                        <asp:HiddenField ID="hidSBDW" Value='<%# Convert.ToString(DataBinder.Eval(Container, "DataItem.AGENT_COMP_NAME"))+"*AGENT_COMP_NAME"%>'
                            runat="server" />
                    </span>
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:TemplateColumn HeaderText="备注">
                <HeaderStyle HorizontalAlign="center" />
                <ItemStyle HorizontalAlign="center"></ItemStyle>
                <ItemTemplate>
                    <cc1:TextBox ID="txtBZ" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.REMARK")%>'>
                    </cc1:TextBox>
                    <asp:HiddenField ID="hidBZ" Value='<%# Convert.ToString(DataBinder.Eval(Container, "DataItem.REMARK"))+"*REMARK"%>'
                        runat="server" />
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:TemplateColumn HeaderText="空箱数">
                <HeaderStyle HorizontalAlign="center" />
                <ItemStyle HorizontalAlign="left"></ItemStyle>
                <ItemTemplate>
                    <cc1:TextBox ID="txtKXS" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.EMPTY_NUM")%>'></cc1:TextBox>
                    <asp:HiddenField ID="hidKXS" Value='<%# Convert.ToString(DataBinder.Eval(Container, "DataItem.EMPTY_NUM"))+"*EMPTY_NUM"%>'
                        runat="server" />
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:TemplateColumn HeaderText="总件数">
                <HeaderStyle HorizontalAlign="center" />
                <ItemStyle HorizontalAlign="left"></ItemStyle>
                <ItemTemplate>
                    <cc1:TextBox ID="txtKXS" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.TOTAL_PIECE")%>'></cc1:TextBox>
                    <asp:HiddenField ID="hidKXS" Value='<%# Convert.ToString(DataBinder.Eval(Container, "DataItem.TOTAL_PIECE"))+"*TOTAL_PIECE"%>'
                        runat="server" />
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:TemplateColumn HeaderText="境内运输航次">
                <HeaderStyle HorizontalAlign="center" />
                <ItemStyle HorizontalAlign="left"></ItemStyle>
                <ItemTemplate>
                    <cc1:TextBox ID="txtKXS" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.TRAFFIC_TOOL_VOYAGE")%>'></cc1:TextBox>
                    <asp:HiddenField ID="hidKXS" Value='<%# Convert.ToString(DataBinder.Eval(Container, "DataItem.TRAFFIC_TOOL_VOYAGE"))+"*TRAFFIC_TOOL_VOYAGE"%>'
                        runat="server" />
                </ItemTemplate>
            </asp:TemplateColumn>
        </Columns>
    </asp:DataGrid>
后台代码:
  [WebMethod]
        public static string GetJson(Dictionary<string, string>[] arrays)
         {
             for (int i = 0; i <arrays.Length; i++)
             {
                 //获取主键ID
                    CusAppTransTopEntity top = new CusAppTransTopEntity();
                    top.Guid = arrays[i]["GUID"];
                    top.TransNo = arrays[i]["TRANS_NO"];
                    top.AgentCompName = arrays[i]["AGENT_COMP_NAME"];
                    top.Remark = arrays[i]["REMARK"];
                    top.EmptyNum = double.Parse(arrays[i]["EMPTY_NUM"]);
                    top.TotalPiece = double.Parse(arrays[i]["TOTAL_PIECE"]);
                    top.TrafficToolVoyage = arrays[i]["TRAFFIC_TOOL_VOYAGE"];               
                    new CusAppTransaction().UPdatBT(top);                                  
                 //最后执行更新
             }
             return "1";
         }
--------------------编程问答--------------------
楼主V5 --------------------编程问答-------------------- 代码可能有点乱,我说下处理原理吧,首先我通过JS逐个比对文本框值和隐藏控件保存原来的值判断是否被修改过,如果修改过了,会拼接一个JSON格式的字符串,通过AJAX传入后台,后台解析后从而保存至数据库,返回页面保存结果,刷新页面 调用savetable()这个方法时,只需要传一个TABLE的ID和AJAX请求路径即可
补充:.NET技术 ,  ASP.NET
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,