带有单元格可编辑的html表作为文本字段，一个单元格作为下拉列表，并且必须从sql server绑定数据 [英] html table with cell editable as textfield and one as dropdown and data must be bind from sql server
本文介绍了带有单元格可编辑的html表作为文本字段，一个单元格作为下拉列表，并且必须从sql server绑定数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
/*这是我的来源，我已成功绑定，但是如果单击更新，如何使Eid可编辑并标记为下拉列表，则应将更改保存到数据库并单击重置，然后应显示旧值，该怎么办..请帮助我*/
/* this is my source,i had binded succesfully,but how to make Eid as editable and remark as dropdown if update is clicked the changes should be saved to database and reset is clicked the old value should be display how to do..Pls help me*/
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>Editable Column Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/BindDatatable",
data: "{}",
dataType: "json",
success: function(data) {
for (var i = 0; i < data.d.length; i++) {
$("#tbDetails").append(
"<tr><td>" + data.d[i].Eid+
"</td><td>" + data.d[i].Ename +
"</td><td>" + data.d[i].Edesgn +
"</td><td>" + data.d[i].Esalary +
"</td><td>" + data.d[i].Remarks +
"</td></tr>");
}
},
error: function(result) {
alert("Error");
}
});
});
</script>
<style type="text/css">
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
<form>
<table id="tbDetails" cellpadding="0" cellspacing="0">
<thead style="background-color:#DC5807; color:White; font-weight:bold">
<tr style="border:solid 1px #000000">
<th>Eid</th>
<th>Ename</th>
<th>Edesgn</th>
<th>Esalary</th>
<th>Remarks</th>
</tr>
</thead>
<!--<tbody>
<tr>
<!-- The "identifier" class makes it so we have an id
to pass to our ajax script so we know what to change -->
<!-- <td class="editable" >Eid</td>
<td>Ename</td>
<td>Edesgn</td>
<td>Esalary</td>
<td class="editable">Remarks<select Name="Rem">
</select></td>
</tr>-->
<!-- </tbody> -->
</table>
<script type="text/javascript">
// bind our event handler to all td elements with class editable
$('td.editable').bind('click', function() {
alert(1);
// Only create an editable input if one doesn't exist
if (!$(this).has('input').length) {
// Get the text from the cell containing the value
var value = $(this).html();
// Create a new input element with the value of the cell text
var input = $('<input/>', {
'type': 'text',
'value': value,
// Give it an onchange handler so when the data is changed
// It will do the ajax call
change: function() {
var new_value = $(this).val();
// This finds the sibling td element with class identifier so we have
// an id to pass to the ajax call
var cell = $(this).parent();
// Get the position of the td cell...
var cell_index = $(this).parent().parent().children().index(cell);
// .. to find its corresponding header
var identifier = $('thead th:eq(' + cell_index + ')').html();
//ajax post with id and new value
$(this).replaceWith(new_value);
}
});
// Empty out the cell contents...
$(this).empty();
// ... and replace it with the input field that has the value populated
$(this).append(input);
}
});
</script>
</form>
<p>
<input id="Submit1" type="submit" value="submit" />
<input id="Reset1" type="reset" value="reset" /></p>
</body>
</html>
/* code behind*/
Imports System.Collections.Generic
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
<webmethod()> _
Public Shared Function BindDatatable() As EmpDetails()
Dim dt As New DataTable()
Dim details As New List(Of EmpDetails)()
Using con As New SqlConnection("Data Source=WINXSER4\MSSQL05;Initial Catalog=Emp-DB;User ID=gowri103;Password=Seema10@")
Using cmd As New SqlCommand("select * from employee1", con)
Dim da As New SqlDataAdapter(cmd)
da.Fill(dt)
For Each dtrow As DataRow In dt.Rows
Dim emp As New EmpDetails()
emp.Eid = dtrow("Eid").ToString()
emp.Ename = dtrow("Ename").ToString()
emp.Edesgn = dtrow("Edesgn").ToString()
emp.Esalary = dtrow("Esalary").ToString()
emp.Remarks = dtrow("Remarks").ToString()
details.Add(emp)
Next
End Using
End Using
Return details.ToArray()
End Function
Public Class EmpDetails
Public Property Eid() As String
Get
Return e_Eid
End Get
Set(ByVal value As String)
e_Eid = value
End Set
End Property
Private e_Eid As String
Public Property Ename() As String
Get
Return e_Ename
End Get
Set(ByVal value As String)
e_Ename = value
End Set
End Property
Private e_Ename As String
Public Property Edesgn() As String
Get
Return e_Edesgn
End Get
Set(ByVal value As String)
e_Edesgn = value
End Set
End Property
Private e_Edesgn As String
Public Property Esalary() As String
Get
Return e_Esalary
End Get
Set(ByVal value As String)
e_Esalary = value
End Set
End Property
Private e_Esalary As String
Public Property Remarks() As String
Get
Return e_Remarks
End Get
Set(ByVal value As String)
e_Remarks = value
End Set
End Property
Private e_Remarks As String
End Class
End Class
推荐答案
(文档).ready(功能(){
(document).ready(function() {
.ajax({ 类型:" ， contentType:" ， url:" ， 数据:" ， dataType:" ， 成功:功能(数据){ for ( var i = 0 ; i < data.d.length; i ++){
.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "Default.aspx/BindDatatable", data: "{}", dataType: "json", success: function(data) { for (var i = 0; i < data.d.length; i++) {
(" ).append( " + data.d [i] .Eid + " + data.d [i] .Ename + " + data.d [i] .Edesgn + " + data.d [i]. " + data.d [i].备注+ " )； } }， 错误:功能(结果){ alert(" )； } }); }); < / 脚本 > < 样式 =" text/css" 表，第， td { 边框 : 1像素纯黑色； 边界崩溃 : 崩溃； } </ 样式 > < /head > < 正文 > < 表单 > < 表 =" tbDetails" cellpadding > 0" 单元格间距 =" 0" < thead =" < tr =" > < th > Eid < /th > < 第 > Ename < /th > < th > Edesgn < /th > < th > Esalary < /th > < th > 备注< /th > < /tr > < /thead > <！- < tbody> < tr> <！-"identifier"类使其具有ID 传递给我们的ajax脚本，以便我们知道要更改的内容 -> <！- < td class ="editable"> Eid< ;/td> < td> Ename</td> < td> Edesgn</td> < td> Esalary</td> < td class ="editable">备注< select Name ="Rem"> </select></td> </tr> -> <！- </tbody> -> < /table > < 脚本 =" 文本/javascript" // 将事件处理程序绑定到所有具有可编辑类的td元素
("#tbDetails").append( "<tr><td>" + data.d[i].Eid+ "</td><td>" + data.d[i].Ename + "</td><td>" + data.d[i].Edesgn + "</td><td>" + data.d[i].Esalary + "</td><td>" + data.d[i].Remarks + "</td></tr>"); } }, error: function(result) { alert("Error"); } }); }); </script> <style type="text/css"> table,th,td { border:1px solid black; border-collapse:collapse; } </style> </head> <body> <form> <table id="tbDetails" cellpadding="0" cellspacing="0"> <thead style="background-color:#DC5807; color:White; font-weight:bold"> <tr style="border:solid 1px #000000"> <th>Eid</th> <th>Ename</th> <th>Edesgn</th> <th>Esalary</th> <th>Remarks</th> </tr> </thead> <!--<tbody> <tr> <!-- The "identifier" class makes it so we have an id to pass to our ajax script so we know what to change --> <!-- <td class="editable" >Eid</td> <td>Ename</td> <td>Edesgn</td> <td>Esalary</td> <td class="editable">Remarks<select Name="Rem"> </select></td> </tr>--> <!-- </tbody> --> </table> <script type="text/javascript"> // bind our event handler to all td elements with class editable
这篇关于带有单元格可编辑的html表作为文本字段，一个单元格作为下拉列表，并且必须从sql server绑定数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
