JQgrid for asp.net

 

 转载自http://blog.youkuaiyun.com/shiworkyue/article/details/8283716

 

JQgrid for asp.net 网上资料较少，自己总结了些不全，能用到的可以借鉴下

 

控件：

@ Register Assembly="Trirand.Web" Namespace="Trirand.Web.UI.WebControls"TagPrefix="cc1"

 

使用：

<cc1:JQGrid ID="Jqgrid1" runat="server" Width="800px">

</cc1:JQGrid>

内部控件：

【cc1:JQGrid】：控件，可配置属性包括

            OnRowAdding新增方法（后台）

                protected void Jqgrid1_RowAdding(object sender,Trirand.Web.UI.WebControls.JQGridRowAddEventArgs e)

            OnRowEditing修改方法（后台）

                protected void Jqgrid1_RowEditing(object sender,Trirand.Web.UI.WebControls.JQGridRowEditEventArgs e)

            MultiSelect="true"选择框

            MultiSelectMode选中模式：SelectOnRowClick选中即选择，SelectOnCheckBoxClickOnly点击选择框选择

            OnDataRequesting加载方法（后台）

                protected void Jqgrid1_DataRequesting(object sender,Trirand.Web.UI.WebControls.JQGridDataRequestEventArgs e)

            onsearching查找方法

                protected void JQGrid1_Searching(object sender,Trirand.Web.UI.WebControls.JQGridSearchEventArgs e)

 

 

【ToolBarSettings】:配置信息，可配置属性包括

            ShowAddButton是否显示新增（true，false），

            ShowEditButton是否显示修改（true，false），

            ShowDeleteButton是否显示删除（true，false），

            ShowSearchToolBar是否显示查找（头部）（true，false），

            ShowSearchButton是否显示查找（按钮）（true，false）

            ShowInlineAddButton="true"控制行添加按钮

            ShowInlineCancelButton="true"控制取消编辑按钮

            ShowInlineDeleteButton="true"控制行删除按钮

            ShowInlineEditButton="true"控制行修改按钮

            ****/实例/****

            <ToolBarSettings ShowAddButton="true" ShowEditButton="true" ShowDeleteButton="true"

            ShowSearchToolBar="true" ShowSearchButton="true" />

            ****/实例/****

【<Columns>】：开始绑定列</Columns>

【<cc1:JQGridColumn>】：绑定一列，可配置属性包括

            Editable是否在修改页显示，

            Searchable是否可以查找，

            HeaderText列表头显示，

            DataField绑定数据源

            Frozen="true"是否固定该列

            EditDialogColumnPosition=(int)修改时坐标列

            EditDialogRowPosition=(int)修改时坐标行

            ****/实例/****

            <cc1:JQGridColumn Editable="true" Searchable="true" HeaderText="ID"DataField="order_no">

            </cc1:JQGridColumn>

            ****/实例/****

【AddDialogSettings】：新增窗口配置，没有此控件弹出默认配置窗口，可配置属性包括

            CancelText取消文本信息，

            Caption标题文本显示，

            ClearAfterAdding新增后清除（字面意），

            CloseAfterAdding新增后关闭（字面意），

            Draggable是否可以拖动窗口（此窗口为置顶窗口），

            TopOffset离浏览器高度，

            LeftOffset离浏览器左边长度，

            LoadingMessageText加载时显示文本（字面意），

            Modal模型（true，false），

            ReloadAfterSubmit返回后台（猜的），

            Resizable允许拉伸页面，

            SubmitText确定文本

【EditDialogSettings】：修改窗口配置

【DeleteDialogSettings】：删除窗口配置

            ****/实例/****

            <AddDialogSettings CancelText="取消" Caption="新增" ClearAfterAdding="true"CloseAfterAdding="true"

            Draggable="true" Height="400" Width="800" TopOffset="20" LeftOffset="40"LoadingMessageText="Adding a new row"

            Modal="true" ReloadAfterSubmit="true" Resizable="false" SubmitText="保存" />

            <EditDialogSettings CancelText="Cancel Editing" Caption="Edit Dialog"CloseAfterEditing="true"

            Draggable="true" Height="400" Width="400" TopOffset="50" LeftOffset="20"

            LoadingMessageText="Currently Editing Data"

            Modal="true" ReloadAfterSubmit="true" Resizable="true" SubmitText="修改" />

            <DeleteDialogSettings CancelText="Cancel delete" Draggable="true" Height="400"Width="400"

            TopOffset="100" LeftOffset="100" LoadingMessageText="Deleting" Modal="false"

            ReloadAfterSubmit="true" Resizable="true" SubmitText="Do delete" />

            ****/实例/****

【SearchDialogSettings】：查找窗口配置

            Draggable是否可以拖动窗口（此窗口为置顶窗口），

            FindButtonText查看文本，

            ResetButtonText重置文本，

            MultipleSearch多重查询，

            TopOffset离浏览器高度，

            LeftOffset离浏览器左边长度，

【PagerSettings】：页脚属性

            PageSize每页显示条数

            PageSizeOptions分页显示数量，是个列表PageSizeOptions="[10,20,50,100,]"

【ClientSideEvents】：自定义事件，里面有好多时间，前台的，

            RowSelect选择事件function rowSelected(rowID, isSelected) {}

            LoadComplete翻页后启动，loadfunction restoreSelectedRows() {}

 

JS常见方法及参数

【var grid = jQuery("#<%= Jqgrid1.ClientID %>");】：得到控件，必要参数

            .setSelection(int row);选择行