JS控制GridView行選擇
阿新 • • 發佈:2018-10-07
color copy cat mar out lan alt trac 沒有
...{
int id = Convert.ToInt32(InstallandMaintanceGrid.DataKeys[e.Row.RowIndex].Value.ToString());
e.Row.Attributes.Add("ondblclick", "javascript:dbClick(" + id + ")");
e.Row.Attributes.Add("id", _i.ToString());
e.Row.Attributes.Add("onKeyDown", "SelectRow();");
e.Row.Attributes.Add("onClick", "MarkRow(" + _i.ToString()+","+id + ");");
_i++;
}
function dbClick(keys)...{
//雙擊,獲取該行ID
document.getElementById("ctl00_hd_selectedid").value = keys;
}
var currentRowId = 0;
function SelectRow()//選擇行
...{
if (event.keyCode == 40)
MarkRow(currentRowId+1);
else if (event.keyCode == 38)
MarkRow(currentRowId-1);
}
function MarkRow(rowId,keys)//選中行變色
...{
if (document.getElementById(rowId) == null)
return;
if (document.getElementById(currentRowId) != null )
...{
document.getElementById(currentRowId).style.backgroundColor =‘#ffffff‘;
}
currentRowId = rowId;
document.getElementById(rowId).style.backgroundColor = ‘#ff0000‘;
document.getElementById("ctl00_hd_selectedid").value = keys;
}
</script>
ASP.NET裏的GridView控件使用非常廣泛,雖然其功能強大,但總有一些不盡如人意的地方。
比如在選擇行的時候,它就沒有UltraWebGrid做的友好;UltraWebGrid允許用戶設置是否顯示選擇框,設置允許,則會在最左邊多出一列,表示選擇的行。而GridView則沒有這個功能。但沒有,不代表不能實現,下面我就通過JS來實現行選擇的標識。
後臺代碼:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
...{
int id = Convert.ToInt32(InstallandMaintanceGrid.DataKeys[e.Row.RowIndex].Value.ToString());
e.Row.Attributes.Add("id", _i.ToString());
e.Row.Attributes.Add("onKeyDown", "SelectRow();");
e.Row.Attributes.Add("onClick", "MarkRow(" + _i.ToString()+","+id + ");");
_i++;
}
前臺代碼:
<script type="text/javascript">//雙擊,獲取該行ID
document.getElementById("ctl00_hd_selectedid").value = keys;
}
var currentRowId = 0;
function SelectRow()//選擇行
...{
if (event.keyCode == 40)
MarkRow(currentRowId+1);
MarkRow(currentRowId-1);
}
function MarkRow(rowId,keys)//選中行變色
...{
if (document.getElementById(rowId) == null)
return;
if (document.getElementById(currentRowId) != null )
...{
document.getElementById(currentRowId).style.backgroundColor =‘#ffffff‘;
}
currentRowId = rowId;
document.getElementById(rowId).style.backgroundColor = ‘#ff0000‘;
document.getElementById("ctl00_hd_selectedid").value = keys;
}
</script>
--------------------- 本文來自 zsj830120 的CSDN 博客 ,全文地址請點擊:https://blog.csdn.net/zsj830120/article/details/2408422?utm_source=copy
JS控制GridView行選擇