JS实现在UltraWebGrid 中勾选Checkbox 禁止/允许编辑单元格

来源：互联网发布：金庸小说主角知乎编辑：程序博客网时间：2024/04/25 15:14

<%@ 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"></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, classidfrom 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能用的绑定办法呢?

注释不想写太多，有什么看不懂的，欢迎提问

JS实现在UltraWebGrid 中勾选Checkbox 禁止/允许 编辑单元格

JS实现在UltraWebGrid 中勾选Checkbox 禁止/允许编辑单元格