onchange使用Javascript从数据库中显示GridView记录(如果存在)
本文关键字：记录 如果 存在 GridView 显示 Javascript 使用 数据库 onchange | 更新日期: 2023-09-27 18:29:32
我的代码中有一个来自html DropDownList的onchange事件。我已经创建了一个函数来处理OnChange事件。
我试图实现的是基于DropDownList选择加载GridView。
下面是我的HTML:
<select id="ddlUnit" style="width: auto" runat="server" name="unitno" onchange="Funchangestatus()">
<option>--- Select ---</option>
</select>
另请参阅我的JavaScript：
function Funchangestatus() {
PageMethods.GetStatus(document.getElementById('ddlUnit').value, onstatuschange);
}
function onstatuschange(status) {
var strvalstatus = "";
strstatus = status[0].split('~');
document.getElementById("txtstatus").value = strstatus[0];
document.getElementById("txtstatus").readOnly = true;
}
如何使用JavaScript实现此任务？建议
以下是jQuery的一种方法（不要忘记从select中删除runat='server'）：
HTML:
<select id="ddlUnit" style="width: auto" name="unitno">
<option>--- Select ---</option>
<option>option1</option>
</select>
<asp:Button ID="btnSearch" runat="server" Text="Search" />
<asp:Label ID="lblMessage" runat="server" Text="No Record Found" Font-Bold="true" ForeColor="Red" style="display:none"></asp:Label>
jQuery:
<script type="text/javascript">
$(document).ready(function () {
$('#<%=btnSearch.ClientID %>').click(function (e) {
SearchGridData();
e.preventDefault();
});
});
function SearchGridData() {
var counter = 0;
//Get the search text
var searchText = $('#ddlUnit').val().toLowerCase();
//Hide No record found message
$('#<%=lblMessage.ClientID %>').hide();
//Hide all the rows of gridview
$('#<%=GridView1.ClientID %> tr:has(td)').hide();
if (searchText.length > 0) {
//Iterate all the td of all rows
$('#<%=GridView1.ClientID %> tr:has(td)').children()
.each(function () {
var cellTextValue = $(this).text().toLowerCase();
//Check that text is matches or not
if (cellTextValue.indexOf(searchText) >= 0) {
$(this).parent().show();
counter++;
}
});
if (counter == 0) {
//Show No record found message
$('#<%=lblMessage.ClientID %>').show();
}
}
else {
//Show All the rows of gridview
$('#<%=GridView1.ClientID %> tr:has(td)').show();
}
}
</script>
使用jquery数据表，它们支持ajax调用和服务器端处理。看看这个：
https://www.datatables.net/examples/server_side/
$(document).ready( function() {
$('#example').dataTable( {
"bServerSide": true,
"sAjaxSource": "scripts/GetMyData.aspx",
"sServerMethod": "POST"
} );
} );
我已经更改了此功能的编码方式。
因为我添加了aspx Dropdownlist而不是HTML SELECT并且不使用javascript。
我来了：-
SelectedIndexChanged事件代码
protected void ddlUnit_OnSelectedIndexChanged(object sender, EventArgs e)
{
string flatstatus = ddlUnit.SelectedItem.Text;
OracleConnection ObjPriCon = new OracleConnection(System.Configuration.ConfigurationManager.ConnectionStrings["OracleConn"].ToString());
ObjPriCon.Open();
OracleCommand cmd = new OracleCommand("Select distinct FLAT_STATUS STATUS from xxacl_pn_flat_det_v where FLAT_ID = '" + flatstatus + "' order by STATUS", ObjPriCon);
if (ddlUnit.SelectedItem.Text.ToString().Equals("--- Select ---"))
{
txtstatus.Value = "";
return;
}
OracleDataReader dr = cmd.ExecuteReader();
if (dr.HasRows)
{
dr.Read();
txtstatus.Value = dr["STATUS"].ToString();
}
else
{
}
dr.Close();
ObjPriCon.Close();
DisplayGrid();
GrdBookingStatus.Visible = true;
}
ROW过滤并使用[DATAVIEW][1]检查记录是否存在
protected void DisplayGrid()
{
OracleCommand cmd = new OracleCommand("SELECT pn.project_id AS project_id, pn.property_name, pn.building, pn.building_id AS building_id, cd.flat_id AS flat_id, ab.flat_status, ab.COMMENTS " +
"FROM xxcus.xxacl_pn_projbuild_v pn INNER JOIN xxacl_pn_flat_status_his ab " +
"ON pn.project_id = ab.project_id AND pn.building_id = ab.building_id " +
"INNER JOIN xxacl_pn_flat_det_v cd ON cd.flat_id = ab.flat_id", ObjPriCon);
DataTable dtfillgrid = new DataTable();
OracleDataAdapter da = new OracleDataAdapter(cmd);
da.Fill(dtfillgrid);
DataView dView = new DataView(dtfillgrid);
dView.RowFilter = "PROJECT_ID = '" + ddlProject.SelectedValue + "' AND BUILDING_ID ='" + ddlBuilding.SelectedValue + "' AND FLAT_ID = '" + ddlUnit.SelectedItem.Text + "'";
GrdBookingStatus.DataSource = dView.ToTable();
GrdBookingStatus.DataBind();
}
此外，另一方面我想阻止页面获取PostBack，所以我在aspx中使用了Update panel，如下所示：-
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table width="100%" border="0" cellpadding="1px" cellspacing="1px">
<tr>
<td class="label" style="width: 7%; font-size: 120%; font-family: Courier New">
Project
</td>
<td class="field" style="width: 7%">
<asp:DropDownList ID="ddlProject" runat="server" Width="250" OnSelectedIndexChanged="ddlProject_OnSelectedIndexChanged"
AutoPostBack="true">
<asp:ListItem Value="--- Select ---">--- Select ---</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="label" style="width: 7%; font-size: 120%; font-family: Courier New">
Building No
</td>
<td class="field" style="width: 7%">
<asp:DropDownList ID="ddlBuilding" runat="server" AutoPostBack="true" Width="250"
OnSelectedIndexChanged="ddlBuilding_OnSelectedIndexChanged">
<asp:ListItem Value="--- Select ---">--- Select ---</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="label" style="width: 7%; font-size: 120%; font-family: Courier New">
Unit No
</td>
<td class="field" style="width: 7%">
<asp:DropDownList ID="ddlUnit" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlUnit_OnSelectedIndexChanged"
Width="177" AppendDataBoundItems="false">
<asp:ListItem Value="--- Select ---">--- Select ---</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="label" style="width: 7%; font-size: 120%; font-family: Courier New">
Status
</td>
<td class="field" style="width: 7%">
<input type="text" runat="server" id="txtstatus" style="width: 175px; background-color: #EBEBE4;"
readonly="readonly" />
</td>
</tr>
<tr>
<td class="label" style="width: 7%; font-size: 120%; font-family: Courier New">
Date
</td>
<td class="field" style="width: 7%">
<input type="text" runat="server" id="txtdate" style="width: 175px;" disabled="disabled" />
</td>
</tr>
<tr>
<td class="label" style="width: 7%; font-size: 120%; font-family: Courier New">
Flat Status
</td>
<td class="field" style="width: 7%">
<select id="ddlflatstatus" style="width: 177px;" name="flatstatus" runat="server">
<option value="0">--- Select ---</option>
</select>
</td>
</tr>
<tr>
<td class="label" style="width: 7%; font-size: 120%; font-family: Courier New">
Comments
</td>
<td class="field" style="width: 7%">
<asp:TextBox ID="txtcomments" runat="server" Width="172" TextMode="MultiLine"></asp:TextBox>
</td>
</tr>
</table>
<div style="height: 10px; background-color: #EAEFF5">
</div>
<table width="100%" border="0" cellpadding="1" cellspacing="1" style="background-color: #EAEFF5">
<tr>
<td align="center">
<asp:Button ID="CmdSave" OnClientClick="return ValidateRecord()" OnClick="CmdSave_Click"
CssClass="button" Text="Submit" runat="server" />     
<asp:Button ID="btnCancel" CssClass="button" Text="Cancel" runat="server" />
</td>
</tr>
</table>
<div style="height: 10px; background-color: #EAEFF5">
</div>
<div align="center" style="background-color: #EAEFF5">
<cc1:Grid ID="GrdBookingStatus" runat="server" FolderStyle="../../Styles/Grid/style_12"
AutoGenerateColumns="false" AllowColumnResizing="true" Width="100%" ShowFooter="false"
ShowHeader="true">
<Columns>
<cc1:Column ID="Column1" DataField="" ReadOnly="true" HeaderText="Sr.No" Width="50"
runat="server">
<TemplateSettings TemplateId="tplNumbering" />
</cc1:Column>
<cc1:Column ID="Column2" DataField="PROPERTY_NAME" HeaderText="Project Name" runat="server"
Width="200px">
</cc1:Column>
<cc1:Column ID="Column3" DataField="BUILDING" HeaderText="Building No" runat="server"
Width="200px">
</cc1:Column>
<cc1:Column ID="Column4" DataField="FLAT_ID" HeaderText="Flat No" runat="server"
Width="80px">
</cc1:Column>
<cc1:Column ID="Column5" DataField="FLAT_STATUS" HeaderText="Flat Status" runat="server"
Width="160px">
</cc1:Column>
<cc1:Column ID="Column6" DataField="COMMENTS" HeaderText="Comments" runat="server"
Width="200px">
</cc1:Column>
</Columns>
<Templates>
<cc1:GridTemplate runat="server" ID="tplNumbering">
<Template>
<b>
<%# (Container.RecordIndex + 1) %></b>
</Template>
</cc1:GridTemplate>
</Templates>
</cc1:Grid>
</div>
</ContentTemplate>
</asp:UpdatePanel>
如果数据库中存在该记录，它就会显示该记录。