zhaoyushun1999/FineUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

-增加示例：表格控件->行与列样式->行样式（列锁定）。

Browse Source
This commit is contained in:
三生石上 2017-12-07 15:05:09 +08:00
parent 02936395ac
commit 4d208e17d5
8 changed files with 300 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
FineUI_v6/FineUI.Examples/FineUI.Examples.csproj
View File

@ -136,6 +136,7 @@
<Content Include="grid\grid_rowexpander_grid.aspx" />
<Content Include="grid\grid_sorting_nosortfield.aspx" />
<Content Include="grid\grid_style_columnclass.aspx" />
<Content Include="grid\grid_style_rowcolor_lockcolumn.aspx" />
<Content Include="grid\grid_summary_scrollbar_flow.aspx" />
<Content Include="grid\grid_style_rowcolor_paging_database.aspx" />
<Content Include="grid\grid_style_rowcolor_paging.aspx" />
@ -1045,6 +1046,13 @@
<Compile Include="grid\grid_style_columnclass.aspx.designer.cs">
<DependentUpon>grid_style_columnclass.aspx</DependentUpon>
</Compile>
<Compile Include="grid\grid_style_rowcolor_lockcolumn.aspx.cs">
<DependentUpon>grid_style_rowcolor_lockcolumn.aspx</DependentUpon>
<SubType>ASPXCodeBehind</SubType>
</Compile>
<Compile Include="grid\grid_style_rowcolor_lockcolumn.aspx.designer.cs">
<DependentUpon>grid_style_rowcolor_lockcolumn.aspx</DependentUpon>
</Compile>
<Compile Include="grid\grid_summary_scrollbar_flow.aspx.cs">
<DependentUpon>grid_summary_scrollbar_flow.aspx</DependentUpon>
<SubType>ASPXCodeBehind</SubType>

2
FineUI_v6/FineUI.Examples/common/menu.xml
View File

@ -464,6 +464,8 @@
<TreeNode Text="行与列样式">
<TreeNode Text="行样式" NavigateUrl="~/grid/grid_style_rowcolor.aspx" >
</TreeNode>
<TreeNode Text="行样式（列锁定）" NavigateUrl="~/grid/grid_style_rowcolor_lockcolumn.aspx" IsNew="true" >
</TreeNode>
<TreeNode Text="行样式（数据库分页）" NavigateUrl="~/grid/grid_style_rowcolor_paging_database.aspx" IsNew="true" >
</TreeNode>
<TreeNode Text="行样式（内存分页）" NavigateUrl="~/grid/grid_style_rowcolor_paging.aspx" IsNew="true" >

6
FineUI_v6/FineUI.Examples/grid/grid_style_rowcolor.aspx
View File

@ -68,7 +68,7 @@
$(grid.el.dom).find('.x-grid-item.highlight').removeClass('highlight');
$.each(highlightRows.getValue().split(','), function (index, item) {
if (item !== '') {
if (item) {
var row = grid.getView().getNode(parseInt(item, 10));
$(row).addClass('highlight');
}
@ -97,10 +97,6 @@
});
//// 页面AJAX回发后执行的函数
//F.ajaxReady(function () {
// highlightRows();
//});
</script>
</body>
</html>

46
FineUI_v6/FineUI.Examples/grid/grid_style_rowcolor.aspx.designer.cs generated
View File

@ -1,10 +1,10 @@
//------------------------------------------------------------------------------
// <自动生成>
// 此代码由工具生成。
// <auto-generated>
// This code was generated by a tool.
//
// 对此文件的更改可能会导致不正确的行为，并且如果
// 重新生成代码，这些更改将会丢失。
// </自动生成>
// Changes to this file may cause incorrect behavior and will be lost if
// the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------
namespace FineUI.Examples.data {
@ -13,56 +13,56 @@ namespace FineUI.Examples.data {
public partial class grid_style_rowcolor {
/// <summary>
/// form1 控件。
/// form1 control.
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::System.Web.UI.HtmlControls.HtmlForm form1;
/// <summary>
/// PageManager1 控件。
/// PageManager1 control.
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::FineUI.PageManager PageManager1;
/// <summary>
/// Grid1 控件。
/// Grid1 control.
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::FineUI.Grid Grid1;
/// <summary>
/// Label2 控件。
/// Label2 control.
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::System.Web.UI.WebControls.Label Label2;
/// <summary>
/// Button1 控件。
/// Button1 control.
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::FineUI.Button Button1;
/// <summary>
/// highlightRows 控件。
/// highlightRows control.
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::FineUI.HiddenField highlightRows;
}

107
FineUI_v6/FineUI.Examples/grid/grid_style_rowcolor_lockcolumn.aspx Normal file
View File

@ -0,0 +1,107 @@
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="grid_style_rowcolor_lockcolumn.aspx.cs"
Inherits="FineUI.Examples.data.grid_style_rowcolor_lockcolumn" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<style type="text/css">
.x-grid-item.highlight td {
background-color: lightgreen;
background-image: none;
}
.x-grid-item-selected.highlight td {
background-color: yellow;
background-image: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<f:PageManager ID="PageManager1" runat="server" />
<f:Grid ID="Grid1" Title="表格" EnableCollapse="true" ShowBorder="true" ShowHeader="true" Width="800px"
runat="server" EnableCheckBoxSelect="true" AllowColumnLocking="true" DataKeyNames="Id,Name" OnRowDataBound="Grid1_RowDataBound">
<Columns>
<f:RowNumberField />
<f:BoundField Width="100px" EnableLock="true" Locked="true" DataField="Name" DataFormatString="{0}" HeaderText="姓名" />
<f:TemplateField EnableLock="true" Width="80px" HeaderText="性别">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# GetGender(Eval("Gender")) %>'></asp:Label>
</ItemTemplate>
</f:TemplateField>
<f:BoundField EnableLock="true" Width="80px" DataField="EntranceYear" HeaderText="入学年份" />
<f:CheckBoxField EnableLock="true" Width="80px" RenderAsStaticField="true" DataField="AtSchool" HeaderText="是否在校" />
<f:HyperLinkField EnableLock="true" HeaderText="所学专业" DataToolTipField="Major" DataTextField="Major"
DataTextFormatString="{0}" DataNavigateUrlFields="Major" DataNavigateUrlFormatString="http://gsa.ustc.edu.cn/search?q={0}"
UrlEncode="true" Target="_blank" ExpandUnusedSpace="True" />
<f:ImageField EnableLock="true" Width="80px" DataImageUrlField="Group" DataImageUrlFormatString="~/res/images/16/{0}.png"
HeaderText="分组">
</f:ImageField>
</Columns>
</f:Grid>
<br />
<br />
注：这个表格高亮选中了所有[入学年份]大于等于2006的数据行。
<br />
<br />
<f:Button ID="Button1" runat="server" Text="重新绑定表格" OnClick="Button1_Click">
</f:Button>
<br />
<br />
<br />
<br />
<f:HiddenField ID="highlightRows" runat="server">
</f:HiddenField>
</form>
<script src="../res/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var highlightRowsClientID = '<%= highlightRows.ClientID %>';
var gridClientID = '<%= Grid1.ClientID %>';
function highlightRows() {
// 增加延迟，等待HiddenField更新完毕
window.setTimeout(function () {
var highlightRows = F(highlightRowsClientID);
var grid = F(gridClientID);
$(grid.el.dom).find('.x-grid-item.highlight').removeClass('highlight');
$.each(highlightRows.getValue().split(','), function (index, item) {
if (item) {
var rowIndex = parseInt(item, 10);
var row = grid.getView().getNode(rowIndex);
$(row).addClass('highlight');
// 锁定列
var lockedRow = grid.getView().lockedView.getNode(rowIndex);
$(lockedRow).addClass('highlight');
}
});
}, 100);
}
// 页面第一个加载完毕后执行的函数
F.ready(function () {
var grid = F(gridClientID);
grid.on('columnhide', function () {
highlightRows();
});
grid.on('columnshow', function () {
highlightRows();
});
grid.getStore().on('refresh', function () {
highlightRows();
});
highlightRows();
});
</script>
</body>
</html>

86
FineUI_v6/FineUI.Examples/grid/grid_style_rowcolor_lockcolumn.aspx.cs Normal file
View File

@ -0,0 +1,86 @@
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Text;
using System.IO;
namespace FineUI.Examples.data
{
public partial class grid_style_rowcolor_lockcolumn : PageBase
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGrid();
}
}
#region BindGrid
private void BindGrid()
{
ViewState["UseDataSource1"] = true;
DataTable table = DataSourceUtil.GetDataTable();
highlightRows.Text = "";
Grid1.DataSource = table;
Grid1.DataBind();
}
#endregion
#region Grid1
protected void Grid1_RowDataBound(object sender, GridRowEventArgs e)
{
// e.DataItem -> System.Data.DataRowView or custom class.
// e.RowIndex -> Current row index.
// e.Values -> Rendered html for each column of this row.
DataRowView row = e.DataItem as DataRowView;
if (row != null)
{
//e.Values[1] = String.Format("Bound - {0}", row["MyValue"]);
int entranceYear = Convert.ToInt32(row["EntranceYear"]);
if (entranceYear >= 2006)
{
highlightRows.Text += e.RowIndex.ToString() + ",";
}
}
}
#endregion
#region Event
protected void Button1_Click(object sender, EventArgs e)
{
DataTable table;
if (Convert.ToBoolean(ViewState["UseDataSource1"]))
{
ViewState["UseDataSource1"] = false;
table = DataSourceUtil.GetDataTable2();
}
else
{
ViewState["UseDataSource1"] = true;
table = DataSourceUtil.GetDataTable();
}
// 重新绑定数据前，先清空高亮的行数据
highlightRows.Text = "";
Grid1.DataSource = table;
Grid1.DataBind();
}
#endregion
}
}

69
FineUI_v6/FineUI.Examples/grid/grid_style_rowcolor_lockcolumn.aspx.designer.cs generated Normal file
View File

@ -0,0 +1,69 @@
//------------------------------------------------------------------------------
// <auto-generated>
// This code was generated by a tool.
//
// Changes to this file may cause incorrect behavior and will be lost if
// the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------
namespace FineUI.Examples.data {
public partial class grid_style_rowcolor_lockcolumn {
/// <summary>
/// form1 control.
/// </summary>
/// <remarks>
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::System.Web.UI.HtmlControls.HtmlForm form1;
/// <summary>
/// PageManager1 control.
/// </summary>
/// <remarks>
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::FineUI.PageManager PageManager1;
/// <summary>
/// Grid1 control.
/// </summary>
/// <remarks>
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::FineUI.Grid Grid1;
/// <summary>
/// Label2 control.
/// </summary>
/// <remarks>
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::System.Web.UI.WebControls.Label Label2;
/// <summary>
/// Button1 control.
/// </summary>
/// <remarks>
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::FineUI.Button Button1;
/// <summary>
/// highlightRows control.
/// </summary>
/// <remarks>
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::FineUI.HiddenField highlightRows;
}
}

4
FineUI_v6/FineUI/release_history.txt
View File

@ -29,6 +29,10 @@ FineUI 严格遵守 ExtJS 对开源软件的规定，不再内置 ExtJS 库，
发布历史
-增加示例：表格控件->行与列样式->行样式（列锁定）。
+2017-09-13 v6.1.0
-修正未激活选项卡中表格的getStore().sorters为null导致的问题（甘桂-9373）（碌云-21311）。
-增加示例：其他杂项->第三方组件->UEditor->UEditor（后台赋值）等四个示例。