我们知道，动态生成的gridview，如果该gridview中存在动态模板列，如何捕获该动态模板列中的事件是难点，此Demo，实现点击动态模板列表头中的chexcbox异步全选该列数据行所有checkbox，当该列至少有一个checkbox没选中时，自动取消对应的表头选中。当数据列中全部选中时，自动选中表头中checkbox。点击表体中的checkbox时，自动更新数据表中的状态值，通过ajax异步更新。
先看下如何捕捉checkbox事件，细心的朋友可能已经发现这些动态生成的checkbox的ID属性有点特殊，是的，在表体中的checkbox我是以主键值+'_'+该列的绑定字段值来生成的，这样既保证了ID值得唯一也可以根据该主键值和字段值通过ajax更新数据库。每一个动态生成的checkbox外面都有<span class="farupdateflag">这是我有意在动态生成时给其赋的css属性让其名称和该列字段名称一致，这样就相当于给其分组了，可以通过点击对应的表头监听该类checkbox。
Gridview的前台html代码如下：
<table class="usertableborder" cellspacing="0" rules="all" border="1" id="gvEquData"
style="border-collapse: collapse;">
<thead>
<tr class="Freezing">
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
序号
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
设备连接状态
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<a href="javascript:__doPostBack('gvEquData','Sort$samid')">POS机编号</a>
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<span class="farupdateflag">
<input id="gvEquData_ctl01_farupdateflag" type="checkbox" name="gvEquData$ctl01$farupdateflag" />
</span>FAR参数更新标识
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<span class="rwsoftupdateflag">
<input id="gvEquData_ctl01_rwsoftupdateflag" type="checkbox" name="gvEquData$ctl01$rwsoftupdateflag" />
</span>软件更新标识
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<span class="mtksoftupdateflag">
<input id="gvEquData_ctl01_mtksoftupdateflag" type="checkbox" name="gvEquData$ctl01$mtksoftupdateflag" />
</span>MTK软件更新标识
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<a href="javascript:__doPostBack('gvEquData','Sort$mtkcsnver')">MTK中黑名单版本</a>
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<span class="rfsimsoftupdateflag">
<input id="gvEquData_ctl01_rfsimsoftupdateflag" type="checkbox" name="gvEquData$ctl01$rfsimsoftupdateflag" />
</span>RFSIM软件更新标识
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<span class="iniupdateflag">
<input id="gvEquData_ctl01_iniupdateflag" type="checkbox" name="gvEquData$ctl01$iniupdateflag" /></span>INI文件更新标识
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<span class="posupdateflag">
<input id="gvEquData_ctl01_posupdateflag" type="checkbox" name="gvEquData$ctl01$posupdateflag" /></span>POS参数更新标识
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<a href="javascript:__doPostBack('gvEquData','Sort$bcbeginno')">补采起始号</a>
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<a href="javascript:__doPostBack('gvEquData','Sort$bcendno')">补采截至号</a>
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<a href="javascript:__doPostBack('gvEquData','Sort$bcbegindate')">补采起始日期</a>
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<a href="javascript:__doPostBack('gvEquData','Sort$bcenddate')">补采结束日期</a>
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<a href="javascript:__doPostBack('gvEquData','Sort$bctotalcount')">补采总条数</a>
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<a href="javascript:__doPostBack('gvEquData','Sort$bccurrentcount')">
补采已上传条数</a>
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<a href="javascript:__doPostBack('gvEquData','Sort$busno')">车辆编号</a>
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<a href="javascript:__doPostBack('gvEquData','Sort$driverno')">司机编号</a>
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<a href="javascript:__doPostBack('gvEquData','Sort$mtkusrver')">MTK中USR参数版本</a>
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<a href="javascript:__doPostBack('gvEquData','Sort$mtkfarver')">MTK中FAR参数版本</a>
</th>
<th scope="col" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<a href="javascript:__doPostBack('gvEquData','Sort$mtkparver')">MTK中PAR参数版本</a>
</th>
</tr>
</thead>
<tbody>
<tr οnmοuseοver="Color=this.style.backgroundColor;this.style.backgroundColor='RosyBrown'"
οnmοuseοut="this.style.backgroundColor=Color;" οndblclick="showDetailInfo('?id=');return false;"
style="background-color: Silver;">
<td style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
1
</td>
<td style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
否
</td>
<td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
</td>
<td style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<span class="farupdateflag">
<input id="gvEquData_ctl02_cbx_-farupdateflag" type="checkbox" name="gvEquData$ctl02$cbx_-farupdateflag"
checked="checked" /></span>
</td>
<td style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<span class="rwsoftupdateflag">
<input id="gvEquData_ctl02_cbx_-rwsoftupdateflag" type="checkbox" name="gvEquData$ctl02$cbx_-rwsoftupdateflag"
checked="checked" /></span>
</td>
<td style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<span class="mtksoftupdateflag">
<input id="gvEquData_ctl02_cbx_-mtksoftupdateflag" type="checkbox" name="gvEquData$ctl02$cbx_-mtksoftupdateflag"
checked="checked" /></span>
</td>
<td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
</td>
<td style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<span class="rfsimsoftupdateflag">
<input id="gvEquData_ctl02_cbx_-rfsimsoftupdateflag" type="checkbox" name="gvEquData$ctl02$cbx_-rfsimsoftupdateflag"
checked="checked" /></span>
</td>
<td style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<span class="iniupdateflag">
<input id="gvEquData_ctl02_cbx_-iniupdateflag" type="checkbox" name="gvEquData$ctl02$cbx_-iniupdateflag"
checked="checked" /></span>
</td>
<td style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
<span class="posupdateflag">
<input id="gvEquData_ctl02_cbx_-posupdateflag" type="checkbox" name="gvEquData$ctl02$cbx_-posupdateflag" /></span>
</td>
<td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
</td>
<td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
</td>
<td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
</td>
<td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
</td>
<td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
</td>
<td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
</td>
<td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
6
</td>
<td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
</td>
<td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
</td>
<td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
</td>
<td align="center" style="white-space: nowrap; word-break: keep-all; word-wrap: keep-all">
</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table> <script type="text/javascript">
var returnResult = function (data) {
if (data == "success") {
alert("删除成功！");
searchData();
}
else {
alert("删除失败！");
}
initCheckedStaus();
}
var isReturnStatus = function (data) {
if (data.length >= 5) {
strs = data.split(","); //字符分割
if (strs.length >= 3) {
if (strs[0] == "empty") {
alert('主键为空，无法更新！'); //重置选中状态
if (strs[1] == "1") {
document.getElementById(strs[2]).checked = false;
}
else {
document.getElementById(strs[2]).checked = true;
}
}
}
}
initCheckedStaus();
}
$(function () {
//初始化全选按钮选中状态
initCheckedStaus();
checkedEvent();
//删除查询数据
deleteSearchData();
});
//删除查询数据
function deleteSearchData() {
$("#btnDelete").click(function () {
{
if (confirm("确定要删除查询到的数据吗？") == true) {
$.post("Ajax/DeleteHandler.ashx", { "action": "delete", "eqnStatus": $('#<%=ddlEquStatus.ClientID %>').val() },
returnResult);
}
}
})
}
//即时监听表头复选框状态
function initCheckedStaus() {
$(function () {
//即时监听表头复选框状态
$("thead input[type='checkbox']").each(function () {
var id = $(this).attr("id");
var name = id.substr(16);
var v1 = "tbody ." + name;
var v = v1 + " input[type='checkbox']";
var h = "thead ." + name;
if ($(v).length == $(v1 + " input:checked").length) {
$("#gvEquData_ctl01_" + name).attr("checked", true);
}
else {
$("#gvEquData_ctl01_" + name).attr("checked", false);
}
});
});
}
//监听复选框单机事件
function checkedEvent() {
$(function () {
//监听表中复选框单击事件
$("tbody").find("input:checkbox").each(function (key, val) {
$(val).click(function () {
var cbxId = $(this).attr("id");
var state = $(this).attr("checked");
$.post("Ajax/UpdateStatus.ashx", { "id": cbxId, "isChecked": state, "fid": "SamID" }, isReturnStatus);
});
});
//监听标题中复选框单机事件
$("thead").find("input:checkbox").click(
function () {
if (confirm("确定要更新这一列数据吗？") == true) {
var cbxId = $(this).attr("id");
var name = cbxId.substr(16);
var v = "tbody ." + name + " input[type='checkbox']";
if ($(this).attr("checked") == "checked") {
$(v).attr("checked", true);
}
else {
$(v).attr("checked", false);
}
var state = $(this).attr("checked");
$.post("Ajax/UpdateStatus.ashx", { "id": cbxId, "isChecked": state }, isReturnStatus);
}
else {
if ($(this).attr("checked") == "checked") {
$(this).attr("checked", false);
}
else {
$(this).attr("checked", true);
}
}
});
});
}
//清除查询条件
function chearData() {
var lineNo = document.getElementById('<%=txtLineNO.ClientID %>');
var deviceNo = document.getElementById('<%=txtDeviceNO.ClientID %>');
var busNo = document.getElementById('<%=txtBusNO.ClientID %>');
lineNo.value = "";
deviceNo.value = "";
busNo.value = "";
$('#<%=ddlEquStatus.ClientID %>').val("All");
}
//显示详情页面
function showDetailInfo(url) {
//showWin(800, 540, "EquStatusDetail.aspx" + url, "detail");
open_Dialog("EquStatusDetail.aspx" + url, window, 800, 564);
}
//显示设置页面
function showSet(url) {
//showWin(800, 600, "FieldShowSet.aspx" + url, "set");
open_Dialog("FieldShowSet.aspx" + url, window, 800, 640);
}
//触发查询事件
function searchData() {
var btn = document.getElementById("<%=btnQuery.ClientID %>");
btn.click();
}
function load() {
var divGvData = document.getElementById("divGvData");
var h;
if (navigator.userAgent.indexOf("MSIE") > 0) {
h = document.documentElement.clientHeight - 80;
}
else {
h = document.documentElement.clientHeight - 86;
}
//初始化滚动高度
divGvData.style.height = h + "px";
//处理ajax和ScriptManager的冲突
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
function EndRequestHandler() {
checkedEvent();
deleteSearchData();
initCheckedStaus();
}
</script>ajax代码如下：
public class UpdateStatus : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int isChecked = context.Request["isChecked"] == "checked" ? 1 : 0;
string colId=context.Request["id"];
string name = colId.Substring(colId.LastIndexOf('_')+1, colId.Length - colId.LastIndexOf('_')-1);
int result=0;
if (QuarrysClass.CheckFlag.ToLower().IndexOf("@" + name + "@") != -1)
{
string selectStr = QuarrysClass.StrWhere;
//控制前台刷新
result = EquSearchBll.equBll.UpdateAllChecked(name, isChecked, selectStr) == 1 ? 2 :
EquSearchBll.equBll.UpdateAllChecked(name, isChecked, selectStr);
}
else
{
if (name.Contains('-'))
{
string idName = context.Request["fid"];
string[] arrays = name.Split('-');
string id = arrays[0];
if (string.IsNullOrEmpty(id)) //主键为空无法更新
{
context.Response.Write("empty," + isChecked+"," + colId);
return;
}
string fieldName = arrays[1];
string strWhere = string.Format(" and {0}='{1}'",idName,id);
result = EquSearchBll.equBll.UpdateAllChecked(fieldName, isChecked, strWhere);
}
}
context.Response.Write(result);
}
public bool IsReusable
{
get
{
return false;
}
}
}
365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
