如何在gridview中使用jquery添加复选框状态？

本文介绍了如何在gridview中使用jquery添加复选框状态？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述您好，如何在gridview中使用jquery添加复选框状态？我正在使用这个脚本和c＃代码用于使用jquery添加和绑定数据我的复选框列数据没有显示我的代码： - < ; script type = text / javascript > $（function（）{ GetCustomers （ 1 ）; }）; $（ [id * = txtSearch]）。live（ keyup，function（）{ GetCustomers（parseInt（ 1 ））; }）; $（。Pager .page）。live（点击，function（）{ GetCustomers（parseInt（$（这个）。attr（' page'）））; }） ; 函数SearchTerm（）{ return jQuery.trim（$（ [id * = txtSearch]）。val（））; }; 函数GetCustomers（pageIndex）{ $ .ajax（{ type： POST， url： CS.aspx / GetCustomers，数据：' {searchTerm：' + SearchTerm（）+ ' ，pageIndex：' + pageIndex + ' }'， contentType： application / json; charset = utf-8， dataType： json，成功：OnSuccess，失败：功能（响应）{ alert（response.d）; }，错误：函数（响应）{ alert（response.d）; } }）; } var 行; 函数OnSuccess（响应）{ var xmlDoc = $ .parseXML（response.d）; var xml = $（xmlDoc）; var customers = xml.find（ DealerDetails）; if （row == null ）{ row = $（ [id * = gvCustomers] tr：last-child）。clone（真）; } $（ [id * = gvCustomers] tr）。 not（$（ [id * = gvCustomers] tr：first-child））。除去（）; if （customers.length > 0 ）{ $ .each（customers，function（）{ var customer = $（ this ）; $（ td，row） .eq（ 0 ）。html（$（ this ）。find（状态）。text（））; // 此行中将添加什么以显示复选框？ $（ td，row）.eq（ 1 ）。html（$（ this ）。find（ DealerCode）。文本（））; $（ td，row）.eq（ 2 ）。html（$（ this ）。find（ DealerName）文本（））。 $（ [id * = gvCustomers]）。append（row）; row = $（ [id * = gvCustomers] tr：last-child） .clone（ true ）; }）; var pager = xml.find（寻呼机）; $（。Pager）。ASPSnippets_Pager（{ ActiveCssClass： current， PagerCssClass： pager， PageIndex：parseInt（pager.find（ PageIndex）。text（））， PageSize：parseInt（pager.find（ PageSize）。text（））， RecordCount：parseInt（pager.find（ RecordCount）。text（））}）; $（。DealerName）。each（function（）{ var searchPattern = new RegExp（' （' + SearchTerm（）+ ' ） '，' ig'）; $（ this ）。html（$（ this ）。text（）。replace（searchPattern， < span class = highlight > + SearchTerm（）+ < / span>））; }）; } else { var empty_row = row.clone（真）; $（ td：first-child，empty_row）.attr（ colspan，$（ td，row）.length）; $（ td：first-child，empty_row）.attr（ align，中心）; $（ td：first-child，empty_row）.html（找不到搜索条件的记录。）; $（ td，empty_row）.not（$（ td：first-child，empty_row））。 remove （）; $（ [id * = gvCustomers]）。append（empty_row）; } }; < / script > 搜索：< asp：TextBox ID = txtSearch runat = 服务器 /> < asp：GridView ID = gvCustomers runat = server AutoGenerateColumns = False CellPadding = 2 ForeColor = ＃333333 GridLines = 无 CssClass = someClass DataKeyNames = DealerLoginName Width = 100％ AllowPaging = True > < alternatingrowstyle backcolor = 白色 forecolor = ＃284775 /> < columns> < asp：TemplateField HeaderText = 状态 HeaderStyle-BorderColor = black HeaderStyle-BorderWidth = 1px HeaderStyle-Width = 10％ HeaderStyle-BorderStyle = 实体 > < itemtemplate> < asp：CheckBox ID = chkStatus runat = server AutoPostBack = true已启用= true已检查= ' <％＃Convert.ToBoolean（Eval（Status））％>' Text = ' <％＃Eval（Status）。ToString（）。Equals（True）？已批准：待定％>' OnCheckedChanged = chkStatus_CheckedChanged /> < / itemtemplate > < footerstyle width = 10％ /> < HeaderStyle BorderColor = 黑色 BorderWidth = 1px BorderStyle = 实线 HorizontalAlign = 中心 VerticalAlign = 中间宽度= 10％ > < / HeaderStyle > < itemstyle font-size = 小 width = 10％ horizontalalign = 左 /> < asp：BoundField DataField = DealerCode HeaderText = 经销商代码 HeaderStyle-BorderColor = black HeaderStyle-BorderWidth = 1px HeaderStyle-BorderStyle = Solid > ; < footerstyle width = 10％ /> < HeaderStyle BorderColor = 黑色 BorderWidth = 1px BorderStyle = 实线宽度= 10％ HorizontalAlign = 中心 > < / HeaderStyle > < itemstyle width = 10％ horizontalalign = Left /> < asp：BoundField DataField = DealerName HeaderText = 经销商名称 HeaderStyle-BorderColor = black HeaderStyle-BorderWidth = 1px HeaderStyle-BorderStyle = Solid ItemStyle-CssClass = DealerName > < footerstyle width = 10％ /> < HeaderStyle BorderColor = 黑色 BorderWidth = 1px BorderStyle = 实线 HorizontalAlign = 中心 VerticalAlign = 中间宽度= 10％ > < / HeaderStyle > < itemstyle width = 10％ horizontalalign = Left /> ; < / 列 > < editrowstyle backcolor = ＃999999 /> < footerstyle backcolor = ＃5D7B9D font-bold = True forecolor = White width = 10％ /> < HeaderStyle BackColor = ＃5D7B9D Font-Bold = True ForeColor = 白色字体大小= 小宽度= 10％ HorizontalAlign = Center /> < pagerstyle backcolor = ＃284775 forecolor = 白色 horizontalalign = 中心 /> < rowstyle backcolor = ＃F7F6F3 forecolor = ＃333333 font-size = Small width = 10％ /> < SelectedRowStyle BackColor = ＃E2DED6 Font-Bold = True ForeColor = ＃333333 /> < sortedascendingcellstyle backcolor = ＃E9E7E2 /> < sortedascendingheaderstyle backcolor = ＃506C8C /> < sorteddescendingcellstyle backcolor = ＃FFFDF8 /> < sorteddescendingheaderstyle backcolor = ＃6F8DAE /> 我的C＃代码： - 受保护 void Page_Load（ object sender，EventArgs e） { if （！IsPostBack） { BindDummyRow（）; } } 私有 void BindDummyRow（） { DataTable dummy = new DataTable（）; dummy.Columns.Add（ new DataColumn（状态， typeof （ bool ）））; dummy.Columns.Add（ SNo）; dummy.Columns.Add（ DealerCode）; dummy.Columns.Add（ DealerName）; dummy.Rows.Add（）; gvCustomers.DataSource = dummy; gvCustomers.DataBind（）; } [WebMethod] public static string GetCustomers（ string searchTerm， int pageIndex ） { string query = [procFindDealerDetails]; SqlCommand cmd = new SqlCommand（query）; cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.AddWithValue（ @ SearchTerm，searchTerm）; cmd.Parameters.AddWithValue（ @ PageIndex，pageIndex）; cmd.Parameters.AddWithValue（ @ PageSize，PageSize）; cmd.Parameters.Add（ @ RecordCount，SqlDbType.Int， 4 ）。Direction = ParameterDirection.Output; return GetData（cmd，pageIndex）.GetXml（）; } 私有静态 DataSet GetData（SqlCommand cmd， int pageIndex） { string strConnString = ConfigurationManager.ConnectionStrings [ conString]。ConnectionString; 使用（SqlConnection con = new SqlConnection（strConnString）） { 使用（SqlDataAdapter sda = new SqlDataAdapter（）） { con 。打开（）; cmd.Connection = con; sda.SelectCommand = cmd; 使用（DataSet ds = new DataSet（）） { sda.Fill（ds， DealerDetails）; DataTable dt = new DataTable（寻呼机）; dt.Columns.Add（ PageIndex）; dt.Columns.Add（ PageSize）; dt.Columns.Add（ RecordCount）; dt.Rows.Add（）; dt.Rows [ 0 ] [ PageIndex] = pageIndex; dt.Rows [ 0 ] [ PageSize] = PageSize; dt.Rows [ 0 ] [ RecordCount] = cmd.Parameters [ @ RecordCount]。值; ds.Tables.Add（dt）; return ds; } } con.Close（）; } } 请帮帮我。如何在gridview中显示我的复选框列数据并编辑，也更新删除按钮。感谢提前。 Ankit Agarwal 软件工程师解决方案（function（）{ GetCustomers（ 1 ）; }）; （ [id * = txtSearch]）。live（ keyup， function（）{ GetCustomers（parseInt（ 1 ））; }）; （。Pager .page）。live（点击，function（）{ GetCustomers（parseInt（ Hello,How to add checkbox status using jquery in gridview?I am using this script and c# code for add and bind data using jquery my checkbox column data is not showingMy Code:-<script type="text/javascript"> $(function () { GetCustomers(1); }); $("[id*=txtSearch]").live("keyup", function () { GetCustomers(parseInt(1)); }); $(".Pager .page").live("click", function () { GetCustomers(parseInt($(this).attr('page'))); }); function SearchTerm() { return jQuery.trim($("[id*=txtSearch]").val()); }; function GetCustomers(pageIndex) { $.ajax({ type: "POST", url: "CS.aspx/GetCustomers", data: '{searchTerm: "' + SearchTerm() + '", pageIndex: ' + pageIndex + '}', contentType: "application/json; charset=utf-8", dataType: "json", success: OnSuccess, failure: function (response) { alert(response.d); }, error: function (response) { alert(response.d); } }); } var row; function OnSuccess(response) { var xmlDoc = $.parseXML(response.d); var xml = $(xmlDoc); var customers = xml.find("DealerDetails"); if (row == null) { row = $("[id*=gvCustomers] tr:last-child").clone(true); } $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove(); if (customers.length > 0) { $.each(customers, function () { var customer = $(this); $("td", row).eq(0).html($(this).find("Status").text()); // What will be add in this line for checkbox display? $("td", row).eq(1).html($(this).find("DealerCode").text()); $("td", row).eq(2).html($(this).find("DealerName").text()); $("[id*=gvCustomers]").append(row); row = $("[id*=gvCustomers] tr:last-child").clone(true); }); var pager = xml.find("Pager"); $(".Pager").ASPSnippets_Pager({ ActiveCssClass: "current", PagerCssClass: "pager", PageIndex: parseInt(pager.find("PageIndex").text()), PageSize: parseInt(pager.find("PageSize").text()), RecordCount: parseInt(pager.find("RecordCount").text()) }); $(".DealerName").each(function () { var searchPattern = new RegExp('(' + SearchTerm() + ')', 'ig'); $(this).html($(this).text().replace(searchPattern, "<span class="highlight" >" + SearchTerm() + "</span>")); }); } else { var empty_row = row.clone(true); $("td:first-child", empty_row).attr("colspan", $("td", row).length); $("td:first-child", empty_row).attr("align", "center"); $("td:first-child", empty_row).html("No records found for the search criteria."); $("td", empty_row).not($("td:first-child", empty_row)).remove(); $("[id*=gvCustomers]").append(empty_row); } }; </script>Search:<asp:TextBox ID="txtSearch" runat="server" /><asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" CellPadding="2" ForeColor="#333333" GridLines="None" CssClass="someClass" DataKeyNames="DealerLoginName" Width="100%" AllowPaging="True"> <alternatingrowstyle backcolor="White" forecolor="#284775" /> <columns> <asp:TemplateField HeaderText="Status" HeaderStyle-BorderColor="black" HeaderStyle-BorderWidth="1px" HeaderStyle-Width="10%" HeaderStyle-BorderStyle="Solid"> <itemtemplate> <asp:CheckBox ID="chkStatus" runat="server" AutoPostBack="true" Enabled="true" Checked='<%# Convert.ToBoolean(Eval("Status")) %>' Text='<%# Eval("Status").ToString().Equals("True") ? " Approved " : " Pending " %>' OnCheckedChanged="chkStatus_CheckedChanged" /> </itemtemplate> <footerstyle width="10%" /> <HeaderStyle BorderColor="Black" BorderWidth="1px" BorderStyle="Solid" HorizontalAlign="Center" VerticalAlign="Middle" Width="10%"></HeaderStyle> <itemstyle font-size="Small" width="10%" horizontalalign="Left" /> <asp:BoundField DataField="DealerCode" HeaderText="Dealer Code" HeaderStyle-BorderColor="black" HeaderStyle-BorderWidth="1px" HeaderStyle-BorderStyle="Solid"> <footerstyle width="10%" /> <HeaderStyle BorderColor="Black" BorderWidth="1px" BorderStyle="Solid" Width="10%" HorizontalAlign="Center"></HeaderStyle> <itemstyle width="10%" horizontalalign="Left" /> <asp:BoundField DataField="DealerName" HeaderText="Dealer Name" HeaderStyle-BorderColor="black" HeaderStyle-BorderWidth="1px" HeaderStyle-BorderStyle="Solid" ItemStyle-CssClass="DealerName"> <footerstyle width="10%" /> <HeaderStyle BorderColor="Black" BorderWidth="1px" BorderStyle="Solid" HorizontalAlign="Center" VerticalAlign="Middle" Width="10%"></HeaderStyle> <itemstyle width="10%" horizontalalign="Left" /> </columns> <editrowstyle backcolor="#999999" /> <footerstyle backcolor="#5D7B9D" font-bold="True" forecolor="White" width="10%" /> <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" Font-Size="Small" Width="10%" HorizontalAlign="Center" /> <pagerstyle backcolor="#284775" forecolor="White" horizontalalign="Center" /> <rowstyle backcolor="#F7F6F3" forecolor="#333333" font-size="Small" width="10%" /> <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> <sortedascendingcellstyle backcolor="#E9E7E2" /> <sortedascendingheaderstyle backcolor="#506C8C" /> <sorteddescendingcellstyle backcolor="#FFFDF8" /> <sorteddescendingheaderstyle backcolor="#6F8DAE" />my C# Code:-protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindDummyRow(); } } private void BindDummyRow() { DataTable dummy = new DataTable(); dummy.Columns.Add(new DataColumn("Status", typeof(bool))); dummy.Columns.Add("SNo"); dummy.Columns.Add("DealerCode"); dummy.Columns.Add("DealerName");dummy.Rows.Add(); gvCustomers.DataSource = dummy; gvCustomers.DataBind(); }[WebMethod] public static string GetCustomers(string searchTerm, int pageIndex) { string query = "[procFindDealerDetails]"; SqlCommand cmd = new SqlCommand(query); cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.AddWithValue("@SearchTerm", searchTerm); cmd.Parameters.AddWithValue("@PageIndex", pageIndex); cmd.Parameters.AddWithValue("@PageSize", PageSize); cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output; return GetData(cmd, pageIndex).GetXml(); } private static DataSet GetData(SqlCommand cmd, int pageIndex) { string strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString; using (SqlConnection con = new SqlConnection(strConnString)) { using (SqlDataAdapter sda = new SqlDataAdapter()) { con.Open(); cmd.Connection = con; sda.SelectCommand = cmd; using (DataSet ds = new DataSet()) { sda.Fill(ds, "DealerDetails"); DataTable dt = new DataTable("Pager"); dt.Columns.Add("PageIndex"); dt.Columns.Add("PageSize"); dt.Columns.Add("RecordCount"); dt.Rows.Add(); dt.Rows[0]["PageIndex"] = pageIndex; dt.Rows[0]["PageSize"] = PageSize; dt.Rows[0]["RecordCount"] = cmd.Parameters["@RecordCount"].Value; ds.Tables.Add(dt); return ds; } } con.Close(); } }please help me.How to display my checkbox column data in gridview and edit,update delete button also.Thanks for Advance.Ankit AgarwalSoftware Engineer 解决方案 (function () { GetCustomers(1); });("[id*=txtSearch]").live("keyup", function () { GetCustomers(parseInt(1)); });(".Pager .page").live("click", function () { GetCustomers(parseInt( 这篇关于如何在gridview中使用jquery添加复选框状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！