JS实现在UltraWebGrid 中勾选Checkbox 禁止/允许 编辑单元格
2009-08-09 19:54
681 查看
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UltraWebGrid.aspx.cs" Inherits="Web.UltraWebGrid" %>
<%@ Register Assembly="Infragistics35.WebUI.UltraWebGrid.v8.2, Version=8.2.20082.1000, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
Namespace="Infragistics.WebUI.UltraWebGrid" TagPrefix="igtbl" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<mce:script src="Scripts/jquery-1.2.6.min.js" mce_src="Scripts/jquery-1.2.6.min.js" type="text/javascript"></mce:script>
<mce:script src="Scripts/jquery_plugins/jquery.livequery.js" mce_src="Scripts/jquery_plugins/jquery.livequery.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript" id="igClientScript"><!--
function Grid_InitializeLayoutHandler(gridName) {
var grid = igtbl_getGridById(gridName);
var columnCount = grid.Bands[0].Columns.length;
var rowCount = grid.Rows.length;
if (grid && row) {
for (var i = 0; i < rowCount; i++) {
var checkbox = grid.Rows.getRow(i).getCellFromKey("Check").Element.children[0];
document.getElementById(checkbox.id).onclick = function() {
if (this.checked) {
var cell = igtbl_getCellById(this.parentElement.id); //.nextSibling
//设置只读
cell.getRow().getCellFromKey("id").setEditable(true);
//改变背景色
cell.getRow().getCellFromKey("id").Element.style.backgroundColor = "#f0f8ff";
}
else {
var cell = igtbl_getCellById(this.parentElement.id); //.nextSibling
//设置可编辑
cell.getRow().getCellFromKey("id").setEditable(false);
//改变背景色
cell.getRow().getCellFromKey("id").Element.style.backgroundColor = "white";
}
};
}
}
}
// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<div>
<igtbl:UltraWebGrid ID="Grid" runat="server" Height="200px" Width="100%">
<Bands>
<igtbl:UltraGridBand>
<RowTemplateStyle BackColor="Window" BorderColor="Window" BorderStyle="Ridge">
<BorderDetails WidthBottom="3px" WidthLeft="3px" WidthRight="3px" WidthTop="3px" />
</RowTemplateStyle>
<Columns>
<igtbl:TemplatedColumn Width="26px" AllowUpdate="Yes" Key="Check">
<CellTemplate>
<input id="CheckBoxName" runat="server" name="CheckBoxName" type="checkbox" />
</CellTemplate>
<Header Caption="选择">
<RowLayoutColumnInfo OriginX="14"></RowLayoutColumnInfo>
</Header>
<Footer>
<RowLayoutColumnInfo OriginX="14"></RowLayoutColumnInfo>
</Footer>
</igtbl:TemplatedColumn>
<igtbl:UltraGridColumn BaseColumnName="id" Key="id" AllowUpdate="No">
<Header>
<RowLayoutColumnInfo OriginX="1" />
</Header>
<Footer>
<RowLayoutColumnInfo OriginX="1" />
</Footer>
</igtbl:UltraGridColumn>
</Columns>
<AddNewRow View="NotSet" Visible="NotSet">
</AddNewRow>
</igtbl:UltraGridBand>
</Bands>
<DisplayLayout AllowColSizingDefault="Free" AllowColumnMovingDefault="OnServer" AllowDeleteDefault="Yes"
AllowSortingDefault="OnClient" AllowUpdateDefault="Yes" BorderCollapseDefault="Separate"
HeaderClickActionDefault="SortMulti" Name="UltraWebGrid1" RowHeightDefault="20px"
RowSelectorsDefault="No" SelectTypeRowDefault="Extended" StationaryMargins="Header"
StationaryMarginsOutlookGroupBy="True" TableLayout="Fixed" Version="4.00" ViewType="OutlookGroupBy"
AutoGenerateColumns="False">
<FrameStyle BackColor="Window" BorderColor="InactiveCaption" BorderStyle="Solid"
BorderWidth="1px" Font-Names="Microsoft Sans Serif" Font-Size="8.25pt" Height="200px"
Width="100%">
</FrameStyle>
<ClientSideEvents InitializeLayoutHandler="Grid_InitializeLayoutHandler" />
<Pager MinimumPagesForDisplay="2">
<PagerStyle BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px">
<BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" />
</PagerStyle>
</Pager>
<EditCellStyleDefault BorderStyle="None" BorderWidth="0px">
</EditCellStyleDefault>
<FooterStyleDefault BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px">
<BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" />
</FooterStyleDefault>
<HeaderStyleDefault BackColor="LightGray" BorderStyle="Solid" HorizontalAlign="Left">
<BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" />
</HeaderStyleDefault>
<RowStyleDefault BackColor="Window" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px"
Font-Names="Microsoft Sans Serif" Font-Size="8.25pt">
<Padding Left="3px" />
<BorderDetails ColorLeft="Window" ColorTop="Window" />
</RowStyleDefault>
<GroupByRowStyleDefault BackColor="Control" BorderColor="Window">
</GroupByRowStyleDefault>
<GroupByBox>
<BoxStyle BackColor="ActiveBorder" BorderColor="Window">
</BoxStyle>
</GroupByBox>
<AddNewBox Hidden="False">
<BoxStyle BackColor="Window" BorderColor="InactiveCaption" BorderStyle="Solid" BorderWidth="1px">
<BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" />
</BoxStyle>
</AddNewBox>
<ActivationObject BorderColor="" BorderWidth="">
</ActivationObject>
<FilterOptionsDefault>
<FilterDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px"
CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif"
Font-Size="11px" Height="300px" Width="200px">
<Padding Left="2px" />
</FilterDropDownStyle>
<FilterHighlightRowStyle BackColor="#151C55" ForeColor="White">
</FilterHighlightRowStyle>
<FilterOperandDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid"
BorderWidth="1px" CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif"
Font-Size="11px">
<Padding Left="2px" />
</FilterOperandDropDownStyle>
</FilterOptionsDefault>
</DisplayLayout>
</igtbl:UltraWebGrid>
</div>
</form>
</body>
</html>Server：很简单了，用的微软企业库
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Microsoft.Practices.EnterpriseLibrary.Data;
using Microsoft.Practices.EnterpriseLibrary.Common;
using System.Data.Common;
using System.Data;
namespace Web
{
public partial class UltraWebGrid : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
var sql =
@"select id, title, filename, sortorder,
createtime, filesize, width, height, classid
from t_dataview order by sortorder";
Database db = DatabaseFactory.CreateDatabase();
var ds = db.ExecuteDataSet(CommandType.Text,
sql);
Grid.DataSource = ds;
Grid.DataBind();
}
}
}
}说明:这里面用了Grid的InitializeLayoutHandler事件，是Grid的客户端初始化事件
这里面如何获得Grid中的checkbox对象是个关键，本例中使用了如下的代码
var checkbox = grid.Rows.getRow(i).getCellFromKey("Check").Element.children[0];
其中的Element是把该控件的Cell对象转换成dom元素，然后.children[0] 即是找该元素下的
第一个子元素，这里就是checkbox,本来我想用Jquery的方式给checkbox来绑定click事件的，
结果出现"guid 为空或不是对象"，看来bind方法会给每个function都用上一个guid只是在下面的代码中
出错了.
var bindboxid = '#' + checkbox.id;
$(bindboxid).bind("click", function() {
alert('test');
}
用bind就出错，但是用alert($(bindboxid).val())就可以取到值，不知道bind方法内部是怎么做了，算了.
如此我便放弃，改用Javascript的.onClick=function(){.....}注册事件了，未知有没有Jquery能用的绑定办法呢?
注释不想写太多，有什么看不懂的，欢迎提问
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- UltraWebGrid禁止编辑单元格
- Infragistics控件对UltraWebGrid单元格编辑进行控制及样式设置
- 在UltraWebGrid单元格中绑定WebNumericEdit或其它可编辑控件
- UltraWebGrid 单击单元格进入编辑状态
- UltraWebGrid根据单元格内容禁用checkbox列
- Ultrawebgrid中利用JS将选择行移到第一条,下一条,上一条,最末条
- Ext.js 4 实现 Grid cell tooltip ，单元格提示
- 后台获得UltraWebGrid在前台修改过数据的单元格
- QT QTableWidget中实现整行选中和禁止编辑单元格
- sap abap alv 实现某行，单元格可编辑与不可编辑 REUSE_ALV_GRID_DISPLAY_LVC
- UltraWebGrid动态生成CheckBox
- 在UltraWebGrid单元格中绑定dropdownlist
- QT QTableWidget中实现整行选中和禁止编辑单元格
- 在UltraWebGrid单元格中绑定dropdownlist
- Infragistics NetAdvantage UltraWebGrid中固定列的实现方法
- 轻松实现UltraWebGrid中的分页控制 [转]
- UltraWebGrid默认选中第一行及前台body里触发onload事件，实现多个iframe默认关联第一个。
- 基于Grid快速实现CRUD：单元格编辑
- 在UltraWebGrid中增加CheckBox列
- 在客户端使用javascript遍历UltraWebGrid中每个单元格