Javascript 如何将从数据库动态填充的dropdownlist添加到datatable gridview中的每一行
因此,我创建了一个功能齐全的gridview,其中最后两列作为DropDownList,从数据库中填充,并从中读取/写入。但是我需要实现对gridview的搜索,所以我使用了Datatables.net插件,它工作得很好,但是一旦我添加了下拉列表,搜索就被禁用了。除非我通过javascript添加它们,而我在这方面的经验还远远不够,无法独自完成这项工作 在切换到datatable插件之前,我通常只在gridview的Rowdatabound事件中添加所需的DropDownList,如何通过javascript实现类似的功能 这是java脚本代码:Javascript 如何将从数据库动态填充的dropdownlist添加到datatable gridview中的每一行,javascript,c#,asp.net,web,Javascript,C#,Asp.net,Web,因此,我创建了一个功能齐全的gridview,其中最后两列作为DropDownList,从数据库中填充,并从中读取/写入。但是我需要实现对gridview的搜索,所以我使用了Datatables.net插件,它工作得很好,但是一旦我添加了下拉列表,搜索就被禁用了。除非我通过javascript添加它们,而我在这方面的经验还远远不够,无法独自完成这项工作 在切换到datatable插件之前,我通常只在gridview的Rowdatabound事件中添加所需的DropDownList,如何通过jav
var TableContent = "<tr>";
if (!$("#req").length)
$("body").append("<table id='req'></table>");
else
$('#req').prepend($('<thead>').append($('.add_ADU')));
var colns = [
{ "data": "Request_ID", title: "ID", },
{ "data": "Student_ID", visible:true },
{ "data": "Type", visible:true },
{ "data": "Description", visible:true },
{ "data": "Language", visible:true },
{ "data": "PUC", visible:true },
{ "data": "Quantity", title: "Quantity" },
{ "data": "Comments", title: "Comments" },
{ "data": "Fees", title: "Fees" },
{ "data": "Date", title: "Date" },
{ "data": "Payment_Status", title: "Payment Status" },
{ "data": "Payment_Date", title: "Payment Date" },
{ "data": "Student_Name", title: "Student Name", visible:true },
{ "data": "Payment_ID",title:"Payment ID", title: "Phone" },
{ "data": "Addressed_To",title: "Addressed To", visible:true },
{ "data": "username", title:"Assigned To",visible:true },
{ "data": "status", title:"Status",visible:true }
];
var table = $('#req').DataTable({
select: true,
"columns": colns,
"order": [[ 12, "desc" ]],
"initComplete": function (settings, json) {
reset_table_page_length($(window).height());
},
});
$("#req tr").append(
'<select id="assign"' +
'<option value="Paid">him</option>' +
'<option value="NotPaid">her</option>' +
'</select>'
)
$("#req_filter").prepend(
'<select id="inp-sel-status-fltr" class="table-toolbar-inp">' +
'<option value="Paid">Paid</option>' +
'<option value="NotPaid">Not Paid</option>'+
'</select>'
)
$("#inp-sel-status-fltr").change(function myfunction() {
filter_table_by_status($(this).val());
});
function filter_table_by_status(val) {
table.column(10).search(val);
table.draw();
}
这一点我认为是无关紧要的,因为我正试图通过javascript实现这一点
这是网格外观的屏幕截图,我想添加的下拉列表应该存在于分配给和状态的最后两列中
数据表中有一个内置的呈现函数,您可以在列对象中调用该函数。 该函数接受3个参数,第一个参数是在数据属性中指定的属性值,第三个参数将返回整个基础对象的值 你可以读到它 例如:
{
"data": "username",
title:"Assigned To",
visible:true,
render: function(data, type, row) {
//do sth here
}
}
在上面的渲染函数中,data参数将返回username属性的值,row参数将返回基础对象的所有属性的值
可以使用row参数提供的数据将值和id附加到下拉列表中。
如果row参数返回一个对象数组,则可以执行for循环来迭代每个值并将其附加到select元素。object result1=comm1.ExecuteScalar;它只返回一个值,这意味着它只返回第一行的第一列。不要太在意C代码,因为它在技术上工作得很好。如果我不尝试在我的网页中实现搜索文本框,我需要一种在没有datatables插件的情况下实现搜索的方法,或者实现datatables插件,并让它与我的下拉列表一起工作。你能告诉我,我会在渲染函数本身中写些什么,以附加例如3个值作为选项,从下拉列表中选择,并实际将下拉列表本身附加到行中吗?
<div class="container">
<asp:GridView BorderWidth="0" CssClass="stripe compact order-column row-border" runat="server" AutoGenerateColumns="true" ID="req" OnRowDataBound="req_RowDataBound" ClientIDMode="Static" Style="width: 100% !important">
<HeaderStyle CssClass="add_ADU" />
</asp:GridView>
protected void req_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
DataTable table = new DataTable();
var openCloseddl = e.Row.FindControl("openCloseddl") as DropDownList;
var assignddl = e.Row.FindControl("assignToddl") as DropDownList;
assignddl.DataMember = "username";
assignddl.DataValueField = "username";
assignddl.DataSource = table;
//get the values of the conditions that define which staff
var request_id = e.Row.Cells[0].Text;
var type = e.Row.Cells[3].Text;
var description = e.Row.Cells[4].Text;
var puc = e.Row.Cells[6].Text;
var quantity = e.Row.Cells[7].Text;
//fetch which staff member it's assigned to if exists.
SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["studentOrderUpload"].ConnectionString);
SqlCommand comm = new SqlCommand("SELECT username from request_status WHERE request_id = @request_id and type = @type and description = @description and puc = @puc and quantity = @quantity", conn);
comm.Parameters.AddWithValue("@request_id", request_id);
comm.Parameters.AddWithValue("@type", type);
comm.Parameters.AddWithValue("@description", description);
comm.Parameters.AddWithValue("@puc", puc);
comm.Parameters.AddWithValue("@quantity", quantity);
try
{
conn.Open();
object result = comm.ExecuteScalar();
string resultText = (result == null ? "" : result.ToString());
conn.Close();
//if it's not assigned to anyone, show every staff member.
if (resultText == "")
{
if (type.ToLower().Contains("customized"))
{
SqlCommand cmd1 = new SqlCommand("select username from staff where type = 'customized'", conn);
conn.Open();
SqlDataAdapter ad1 = new SqlDataAdapter(cmd1);
ad1.Fill(table);
conn.Close();
assignddl.DataBind();
assignddl.SelectedValue = "Scholarship";
if (openCloseddl.SelectedValue == "Open")
{
openCloseddl.Enabled = true;
}
assignddl.Items.RemoveAt(1);
}
else
{
SqlCommand cmd1 = new SqlCommand("select username from staff where type ='standard'", conn);
conn.Open();
SqlDataAdapter ad1 = new SqlDataAdapter(cmd1);
ad1.Fill(table);
conn.Close();
assignddl.DataBind();
}
assignddl.Items.Insert(0, new ListItem("Select User"));
openCloseddl.Enabled = false;
if (openCloseddl.SelectedValue == "Open" && type.ToLower().Contains("customized"))
{
openCloseddl.Enabled = true;
}
}
//if it's assigned to someone, show only the assigned staff,
else
{
if (type.ToLower().Contains("customized"))
{
SqlCommand cmd1 = new SqlCommand("select username from staff where type = 'customized'", conn);
conn.Open();
SqlDataAdapter ad1 = new SqlDataAdapter(cmd1);
ad1.Fill(table);
conn.Close();
assignddl.DataBind();
assignddl.SelectedValue = "Scholarship";
if (openCloseddl.SelectedValue == "Open")
{
openCloseddl.Enabled = true;
}
assignddl.Items.RemoveAt(1);
}
else
{
SqlCommand cmd1 = new SqlCommand("select username from staff where type = 'standard'", conn);
conn.Open();
SqlDataAdapter ad1 = new SqlDataAdapter(cmd1);
ad1.Fill(table);
conn.Close();
assignddl.DataBind();
assignddl.SelectedValue = resultText;
}
}
if (openCloseddl != null)
{
SqlCommand comm1 = new SqlCommand("SELECT status from request_status WHERE request_id = @request_id and type = @type and description = @description and puc = @puc and quantity = @quantity", conn);
comm1.Parameters.AddWithValue("@request_id", request_id);
comm1.Parameters.AddWithValue("@type", type);
comm1.Parameters.AddWithValue("@description", description);
comm1.Parameters.AddWithValue("@puc", puc);
comm1.Parameters.AddWithValue("@quantity", quantity);
conn.Open();
object result1 = comm1.ExecuteScalar();
conn.Close();
if (result1.ToString() == "Closed")
{
openCloseddl.SelectedValue = "Closed";
openCloseddl.Enabled = false;
assignddl.Enabled = false;
if ((HttpContext.Current.User.Identity.Name.Equals("DocRequestAdmin")))
{
assignddl.Enabled = true;
openCloseddl.Enabled = true;
}
}
}
}
catch (Exception ee)
{
var error = ee.Message;
conn.Close();
}
var paid = e.Row.Cells[12].Text;
if (paid.Contains("Not"))
{
assignddl.SelectedValue = "Select User";
assignddl.Enabled = false;
openCloseddl.Enabled = false;
}
}
}
{
"data": "username",
title:"Assigned To",
visible:true,
render: function(data, type, row) {
//do sth here
}
}