JQuery实现的纯JS列表控件
老婆睡了，随手写点代码，貌似明天要用到。
<script language="javascript" type="text/javascript">
function DeleteCurrentRow(obj) {
$("#gridTable a").click(function() {
if ($(this).attr("id") == obj.id) {
if (confirm("are you sure to delete this one?")) {
$(this).parent().parent().remove();
}
}
});
}
function EditCurrentRow(obj) {
$("#gridTable a").click(function() {
if ($(this).attr("id") == obj.id) {
$(this).parent().parent().find("td").not(":last").each(function(i) {
var html = $(this).html();
$(this).html("<input type='text' value='" + html + "' /><input type='hidden' value='" + html + "' />");
});
var random = new Date().getTime();
$(this).parent().html("<a href='#' id='update" + random + "' onclick='UpdateRow(this)'>update</a> <a href='#' id='cancel" + random + "' onclick='CancelRow(this)'>cancel</a>");
}
});
}
//Update
function UpdateRow(obj) {
$("#gridTable a").click(function() {
if ($(this).attr("id") == obj.id) {
$(this).parent().parent().find("td").not(":last").each(function(i) {
var html = $(this).find("input[@type=text]").val();
$(this).html(html);
});
var random = new Date().getTime();
$(this).parent().html("<a href=# id='update" + random + "' onclick='EditRow(this)'>edit</a> <a href=# id='delete" + random + "' onclick='DeleteRow(this)'>delete</a>");
$("#newID").show();
}
});
}
//Cancel
function CancelRow(obj) {
$("#gridTable a").click(function() {
if ($(this).attr("id") == obj.id) {
$(this).parent().parent().find("td").not(":last").each(function(i) {
var html = $(this).find("input[@type=hidden]").val();
$(this).html(html);
});
var random = new Date().getTime();
$(this).parent().html("<a href=# id='update" + random + "' onclick='EditRow(this)'>edit</a> <a href=# id='delete" + random + "' onclick='DeleteRow(this)'>delete</a>");
}
});
}
//Edit
function EditRow(obj) {
$("#gridTable a").click(function() {
if ($(this).attr("id") == obj.id) {
$(this).parent().parent().find("td").not(":last").each(function(i) {
var html = $(this).html();
$(this).html("<input type='text' value='" + html + "' /><input type='hidden' value='" + html + "' />");
});
var random = new Date().getTime();
$(this).hide();
$(this).parent().html("<a href='#' id='update" + random + "' onclick='UpdateRow(this)'>update</a> <a href='#' id='cancel" + random + "' onclick='CancelRow(this)'>cancel</a>");
}
});
}
//Delete
function DeleteRow(obj) {
$("#gridTable a").click(function() {
if ($(this).attr("id") == obj.id) {
if (confirm("are you sure to delete this one?")) {
$(this).parent().parent().remove();
}
}
});
}
//Insert
function InsertRow() {
var html = "<tr>";
$("#gridTable tr:last").find("td").not(":last").each(function(i) {
html += "<td>";
html += "<input type='text' />";
html += "</td>";
});
var random = new Date().getTime();
html += "<td><a href=# id='update" + random + "' onclick='UpdateRow(this)'>update</a> <a href=# onclick='CancelNew()'>cancel</a></td>";
html += "</tr>";
$("#gridTable").html($("#gridTable").html() + html);
$("#newID").hide();
event.returnValue = false;
}
function CancelNew() {
$("#gridTable").find("tr:last").remove();
$("#newID").show();
}
function Submit() {
if ($("#gridTable").find("input").length) {
alert('can\' submit!');
return false;
}
$("#gridTable tr").each(function(i) {
$(this).find("td").not(":last").each(function(j) {
alert($(this).html());
});
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="height: 30px">
</div>
<asp:GridView ID="gridTable" runat="server" Width="500px" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField ItemStyle-Width="20%" HeaderText="姓名">
<ItemTemplate>
<%# Eval("Name") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="65%" HeaderText="地址">
<ItemTemplate>
<%# Eval("Address") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<a href="#" id="edit" onclick="EditCurrentRow(this)">edit</a> <a href="#" id="delete"
onclick="DeleteCurrentRow(this)">delete</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<a href="#" id="newID" onclick="InsertRow()">Add New</a>
<br />
<a href="#" id="submit" onclick="Submit()">Submit</a>
</div>
</form>
</body>
</html>
