52,797
社区成员
发帖
与我相关
我的任务
分享EXT.net如何改变 gridpanel中某个column背景颜色
<ColumnModel ID="ABC" runat="server">
<Columns>
<ext:RowNumbererColumn Width="30" />
<ext:Column Header="主键" Sortable="true" Hidden="true" DataIndex="nid" />
<ext:Column Header="XXX类型" Sortable="true" DataIndex="ctype" />
<ext:Column Header="简称" Sortable="true" DataIndex="nshort" />
<ext:Column Header="类型顺序" Sortable="true" DataIndex="nsort" />
<ext:Column ColumnID="color" Header="标识颜色" Sortable="true" DataIndex="ccolor"/>
<ext:Column Header="状态" Sortable="true" DataIndex="nflag">
<Renderer Handler="return ((value ==1 ) ? '有效':'无效')" />
</ext:Column>
</Columns>
</ColumnModel>
其中，标识颜色 在数据库中以#FF11FF33这样的颜色代码字符串存储。我想让“标识颜色”这列对应其数据在表中显示对应的颜色 能让背景颜色变化就行 我不知道如何改。 如果有插入按钮然后再把按钮颜色变一下这种类似的方法也行，反正不管什么手段能达到这个目的就行。
...全文
请发表友善的回复…
发表回复
zxt3310 2012-12-14
- 打赏
- 举报
十分有帮助哇~非常感谢！
。虽然我已经找到了一个相似的例子用上了，和您的思路一致 但是写的太简洁看不懂，结合您的回复更好的理解了这个例子。
。虽然我已经找到了一个相似的例子用上了，和您的思路一致 但是写的太简洁看不懂，结合您的回复更好的理解了这个例子。
josephSC 2012-12-13
- 打赏
- 举报
上面的例子是回帖临时写的，如果解释的不太清楚不好意思。 这里有比较完整是动态改变每个cell背景颜色css的例子，希望对你有帮助。
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", "test2", "test3", new string[] { "red", "yellow", "green" } },
new object[] { "test4", "test5", "test6", new string[] { "green", "red", "yellow" } },
new object[] { "test7", "test8", "test9", new string[] { "yellow", "green", "red" } },
};
store.DataBind();
}
}
</script>
<!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>Ext.NET Example</title>
<script type="text/javascript">
var testRenderer = function (value, metadata, record, rowIndex, colIndex, store) {
var color = record.get("colors")[colIndex];
metadata.attr = String.format('style="background-color:{0};"', color);
return value;
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test1" />
<ext:RecordField Name="test2" />
<ext:RecordField Name="test3" />
<ext:RecordField Name="colors" IsComplex="true" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Test1" DataIndex="test1">
<Renderer Fn="testRenderer" />
</ext:Column>
<ext:Column Header="Test2" DataIndex="test2">
<Renderer Fn="testRenderer" />
</ext:Column>
<ext:Column Header="Test3" DataIndex="test3">
<Renderer Fn="testRenderer" />
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>
zxt3310 2012-12-12
- 打赏
- 举报
您好，谢谢您的回复，但您并没有解决我的问题呀，一是我看不太懂您的代码最好请您给我解释下每句话的含义呀。 二是给这个column设置的ID并不是全局的，换句话说，这个控件中并没有ID这个属性，而是一个局部的ComlumnID="..."。 但他的属性中有个Css字样的属性，只是貌似没有任何作用，我设置了css样式和他关联起来 后 列表颜色和字体颜色根本就没变化，或者说这个属性可能完全和我们说的css样式不相关。也有可能是我不会用，如果您会，请给我一个比较实用的动态css代码好吗。 我的目的是颜色关联数据库中的颜色代码，什么代码显示什么颜色。 再次真诚的感谢您的帮助。
josephSC 2012-12-12
- 打赏
- 举报
给column一个id,然后用css来设置背景颜色,比如你的主键column:
<head>
......
<style>
#mainkey, .x-grid-cell-label {
background: gray !important;
color: #fff;
}
</style>
</head>
<body>
<form runat="server">
......
<ColumnModel ID="ABC" runat="server">
<Columns>
<ext:RowNumbererColumn Width="30" />
<ext:Column Header="主键" id ="mainkey" Sortable="true" Hidden="true" DataIndex="nid" />
......
var myRenderer = function (value, metadata, record, rowIndex, columnIndex）{
......
metadata.attr = "color='" + someColor + "'";
}
<ext:Column Header="主键" id ="mainkey" Sortable="true" Hidden="true" DataIndex="nid" />
<Renderer Fn="myRenderer" />
