虽然说微软的DataList相当强大 但是由于需要使用VIEWSTATE 并且一个简单的操作就必须刷新页面 所以决定在项目中使用JQUERY来达到ajax化的DataList
当然数据绑定控件还是需要有的 此处仅需要repeater来做到数据绑定 其余部分均使用html控件来完成
主要思路：通过对DataList的观察 发现他也只是给各个控件加一个具体的ID 比如说第一行的INPUT ID即为DataList的ID+自增的ID 如此一来我们的repeater改造成AJAX化的DataList便有了思路 只要给TABLE中每一行加一个独有的ID便可以取到该行内的任何控件
以下为代码：
js部分（使用的jquery版本为1.4.2）：
<script> $(document).ready(function() { $("table tr:odd").css("background-color", "#99ccff"); $(".edit").click(function() { var id = $(this).attr("id"); if ($(this).val() == "修改") { $(this).attr("value", "提交"); $(this).next().removeClass(); $("." + id).find("input").removeClass().addClass("textbox"); } else { if (confirm("你确信要提交吗？")) { var lv = $("#LV" + id).find("input").val(); var location = $("#LOCATION_NO" + id).find("input").val(); var amount = $("#AMOUNT" + id).find("input").val(); var inventory = $("#INVENTORY" + id).find("input").val(); var head_length = $("#HEAD_LENGTH" + id).find("input").val(); var uniformity = $("#UNIFORMITY" + id).find("input").val(); var strength = $("#STRENGTH" + id).find("input").val(); var macronaire = $("#MACRONAIRE" + id).find("input").val(); var reflectivity = $("#REFLECTIVITY" + id).find("input").val(); var yellowness = $("#YELLOWNESS" + id).find("input").val(); var price = $("#PRICE" + id).find("input").val(); $.ajax({ url: "ajaxmethod.asmx/AJAXEditCottonInfo", type: "POST", contentType: "application/json; charset=utf-8", dataType: "json", data: "{id:" + id + ",lv:'" + lv + "',location_no:'" + location + "',bag_amount:" + amount + ",inventory:" + inventory + ",head_length:" + head_length + ",uniformity:" + uniformity + ",strength:" + strength + ",macronaire:" + macronaire + ",reflectivity:" + reflectivity + ",yellowness:" + yellowness + ",price:" + price + "}", success: done }); $(this).attr("value", "修改"); $(this).next().addClass("cancel"); $("." + id).find("input").removeClass().addClass("cancel"); } } }) function done(data) { var result = eval('(' + data.d + ')'); if (result.data == "F") { alert("您无权进行此操作"); } else { var id = result.id; $("#LastEdit" + id).find("b").text(result.date); $("#LV" + id).find("b").text(result.lv); $("#LOCATION_NO" + id).find("b").text(result.location); $("#AMOUNT" + id).find("b").text(result.amount); $("#INVENTORY" + id).find("b").text(result.inventory); $("#HEAD_LENGTH" + id).find("b").text(result.head_length); $("#UNIFORMITY" + id).find("b").text(result.uniformity); $("#STRENGTH" + id).find("b").text(result.strength); $("#MACRONAIRE" + id).find("b").text(result.macronaire); $("#REFLECTIVITY" + id).find("b").text(result.reflectivity); $("#YELLOWNESS" + id).find("b").text(result.yellowness); $("#PRICE" + id).find("b").text(result.price); } } $(".edit").next().click(function() { $(this).addClass("cancel"); $(this).prev().attr("value", "修改"); var id = $(this).prev().attr("id"); $("." + id).find("input").removeClass().addClass("cancel"); }) }); </script>
css部分：
<style> .cancel { display:none; width:0; } .textbox { width:70px; } </style>
html部分（数据源为自己写的分页用户控件 有一个属性为CommandText 设定该属性便可执行相应的SQL语句并将返回的DataTable作为控件的数据源）：
<form id="form1" runat="server"> <asp:Repeater runat="server" ID="RCottonList"> <HeaderTemplate> <table cellpadding="0" cellspacing="0" border="1" width="1000"> <thead> <tr> <td colspan="14"><center>原棉信息列表</center></td> </tr> </thead> <tbody> <tr> <td>库存批号</td> <td>最后修改时间</td> <td>等级代号</td> <td>产地与批号</td> <td>包数</td> <td>库存(吨)</td> <td>上半部长度</td> <td>整齐度</td> <td>断裂比强度</td> <td>马克隆值</td> <td>反射率</td> <td>黄度</td> <td>单价(万元/顿)</td> <td width="100">操作</td> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td class="<%#DataBinder.Eval(Container.DataItem,"ID") %>"><%#DataBinder.Eval(Container.DataItem,"ID") %></td> <td class="<%#DataBinder.Eval(Container.DataItem,"ID") %>" id="LastEdit<%#DataBinder.Eval(Container.DataItem,"ID") %>"><b><%#DataBinder.Eval(Container.DataItem,"LastEdit") %></b></td> <td class="<%#DataBinder.Eval(Container.DataItem,"ID") %>" id="LV<%#DataBinder.Eval(Container.DataItem,"ID") %>"> <b><%#DataBinder.Eval(Container.DataItem,"LV") %></b> <input type="text" class="cancel" value="<%#DataBinder.Eval(Container.DataItem,"LV" )%>"/> </td> <td class="<%#DataBinder.Eval(Container.DataItem,"ID") %>" id="LOCATION_NO<%#DataBinder.Eval(Container.DataItem,"ID") %>"> <b><%#DataBinder.Eval(Container.DataItem,"LOCATION_NO") %></b> <input type="text" class="cancel" value="<%#DataBinder.Eval(Container.DataItem,"LOCATION_NO") %>" /> </td> <td class="<%#DataBinder.Eval(Container.DataItem,"ID") %>" id="AMOUNT<%#DataBinder.Eval(Container.DataItem,"ID") %>"> <b><%#DataBinder.Eval(Container.DataItem,"BAG_AMOUNT") %></b> <input type="text" class="cancel" value="<%#DataBinder.Eval(Container.DataItem,"BAG_AMOUNT") %>" /> </td> <td class="<%#DataBinder.Eval(Container.DataItem,"ID") %>" id="INVENTORY<%#DataBinder.Eval(Container.DataItem,"ID") %>"> <b><%#Convert.ToSingle( DataBinder.Eval(Container.DataItem,"INVENTORY")).ToString("F2") %></b> <input type="text" class="cancel" value="<%#Convert.ToSingle( DataBinder.Eval(Container.DataItem,"INVENTORY")).ToString("F2") %>" /> </td> <td class="<%#DataBinder.Eval(Container.DataItem,"ID") %>" id="HEAD_LENGTH<%#DataBinder.Eval(Container.DataItem,"ID") %>"> <b><%#Convert.ToSingle(DataBinder.Eval(Container.DataItem, "HEAD_LENGTH")).ToString("F2")%></b> <input type="text" class="cancel" value="<%#Convert.ToSingle( DataBinder.Eval(Container.DataItem,"HEAD_LENGTH")).ToString("F2") %>" /> </td> <td class="<%#DataBinder.Eval(Container.DataItem,"ID") %>" id="UNIFORMITY<%#DataBinder.Eval(Container.DataItem,"ID") %>"> <b><%#Convert.ToSingle(DataBinder.Eval(Container.DataItem, "UNIFORMITY")).ToString("F2")%></b> <input type="text" class="cancel" value="<%#Convert.ToSingle( DataBinder.Eval(Container.DataItem,"UNIFORMITY")).ToString("F2") %>" /> </td> <td class="<%#DataBinder.Eval(Container.DataItem,"ID") %>" id="STRENGTH<%#DataBinder.Eval(Container.DataItem,"ID") %>"> <b><%#Convert.ToSingle(DataBinder.Eval(Container.DataItem, "STRENGTH")).ToString("F2")%></b> <input type="text" class="cancel" value="<%#Convert.ToSingle(DataBinder.Eval(Container.DataItem, "STRENGTH")).ToString("F2")%>" /> </td> <td class="<%#DataBinder.Eval(Container.DataItem,"ID") %>" id="MACRONAIRE<%#DataBinder.Eval(Container.DataItem,"ID") %>"> <b><%#Convert.ToSingle(DataBinder.Eval(Container.DataItem, "MACRONAIRE")).ToString("F2")%></b> <input type="text" class="cancel" value="<%#Convert.ToSingle(DataBinder.Eval(Container.DataItem, "MACRONAIRE")).ToString("F2")%>" /> </td> <td class="<%#DataBinder.Eval(Container.DataItem,"ID") %>" id="REFLECTIVITY<%#DataBinder.Eval(Container.DataItem,"ID") %>"> <b><%#Convert.ToSingle(DataBinder.Eval(Container.DataItem, "REFLECTITVITY")).ToString("F2")%></b> <input type="text" class="cancel" value="<%#Convert.ToSingle(DataBinder.Eval(Container.DataItem, "REFLECTITVITY")).ToString("F2")%>" /> </td> <td class="<%#DataBinder.Eval(Container.DataItem,"ID") %>" id="YELLOWNESS<%#DataBinder.Eval(Container.DataItem,"ID") %>"> <b><%#Convert.ToSingle(DataBinder.Eval(Container.DataItem, "YELLOWNESS")).ToString("F2")%></b> <input type="text" class="cancel" value="<%#Convert.ToSingle(DataBinder.Eval(Container.DataItem, "YELLOWNESS")).ToString("F2")%>" /> </td> <td class="<%#DataBinder.Eval(Container.DataItem,"ID") %>" id="PRICE<%#DataBinder.Eval(Container.DataItem,"ID") %>"> <b><%#Convert.ToSingle(DataBinder.Eval(Container.DataItem, "PRICE")).ToString("F2")%></b> <input type="text" class="cancel" value="<%#Convert.ToSingle(DataBinder.Eval(Container.DataItem, "PRICE")).ToString("F2")%>" /> </td> <td> <center> <input type="button" value="修改" id="<%#DataBinder.Eval(Container.DataItem,"ID") %>" class="edit"/> <input type="button" value="取消" class="cancel" /> </center> </td> </tr> </ItemTemplate> <FooterTemplate> </tbody> </table> </FooterTemplate> </asp:Repeater> <center><uc1:pageddata ID="DataSource" runat="server" /></center> </form>
CS部分：
public partial class viewcottoninfo : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) {
DataSource.CommandText = "GetCottonInfo"; } protected void Page_PreRender(object sender, EventArgs e) { RCottonList.DataSource = DataSource.Data; RCottonList.DataBind(); }}
webservice部分（ECottonInfo,EOperation分别为实体类 映射数据库，Ladmin为逻辑层 同时充当操作代理）：
[WebMethod(EnableSession = true)] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public string AJAXEditCottonInfo(string id,string lv,string location_no,string bag_amount, string inventory,string head_length,string uniformity,string strength,string macronaire, string reflectivity,string yellowness,string price) { int iid = Convert.ToInt32(id); location_no = Server.UrlDecode(location_no); ECottonInfo myci = new ECottonInfo(iid, DateTime.Now.ToString(),lv, location_no, int.Parse(bag_amount), float.Parse(inventory), float.Parse(head_length), float.Parse(uniformity), float.Parse(strength), float.Parse(macronaire), float.Parse(reflectivity), float.Parse(yellowness)); myci.ECIPrice = float.Parse(price); LAdmin myadmin = LAdmin.adminbuild(); EOperation myope = new EOperation(DateTime.Now.ToString(), 4, myadmin.ID); if (myadmin.EditCottonInfo(myci, myope)) { StringBuilder sb = new StringBuilder("{"); sb.AppendFormat("'data':'T','lv':'{0}','date':'{1}','location':'{2}','amount':'{3}','inventory':'{4}','head_length':'{5}',", lv,DateTime.Now.ToString(), location_no,bag_amount,inventory,head_length); sb.AppendFormat("'uniformity':'{0}','strength':'{1}','macronaire':'{2}','reflectivity':'{3}','yellowness':'{4}','id':'{5}','price':'{6}'", uniformity,strength,macronaire,reflectivity,yellowness,id,price); sb.Append("}"); return sb.ToString(); } return "{'data':'F'}"; }
当然我也知道此种功能网上必然有相应的第三方插件可以实现 而且更简单快捷 自己做完全是为了试试看有没有可以摆脱服务器控件的方法 同时也从某种角度上挖掘一下服务器控件的工作原理 虽然说如此开发效率比较低下 不过算是胜在用户体验了
