jquery统制动态生成的gridview中多列checkbox的全选反选及自动判断是否全选状态
jquery控制动态生成的gridview中多列checkbox的全选反选及自动判断是否全选状态
动态生成的Gridview的前台html代码如下：
动态生成的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 onmouseover="Color=this.style.backgroundColor;this.style.backgroundColor='RosyBrown'" onmouseout="this.style.backgroundColor=Color;" ondblclick="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>js代码如下：
<script type="text/javascript">
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 () {
//初始化全选按钮选中状态
$("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);
}
});
//监听表中复选框单击事件
$("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 = "";
}
//即时监听复选框状态
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 showDetailInfo(url) {
showWin(800, 560, "EquStatusDetail.aspx" + url, "detail");
}
//显示设置页面
function showSet(url) {
showWin(800, 600, "ShowSet.aspx" + url,"set");
}
//触发查询事件
function searchData() {
var btn = document.getElementById("<%=btnQuery.ClientID %>");
btn.click();
}
//处理ajax和ScriptManager的冲突
function load() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
function EndRequestHandler() {
$(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);
}
}
});
});
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;
}
}
}