DataTemplate在silverlight中用来描述数据对象的可是结构。DataTemplate的对象树必须有一个根元素，可以有任意个子元素。在使用中常用作ListBox等对象的ItemTemplete来改变控件外观和解决一些数据的绑定，这个使用比较简单，在此我们不多做说明，本文主要介绍DataTemplate的LoadContent 方法。LoadContent：该方法创建DataTemplete的UIElement对象，可以将这些对象添加到其他UIElement可视化树中。
在实际应用中我们可以通过样式、模板等方法改变控件外观，并且可以给样式或者模板中的样式添加事件，比如说给柱状图中柱状图形添加一个鼠标事件，TabControl的TabItem添加一个关闭事件，这些有的在样式中并不好控制，如果系统需要换肤应用起来更加麻烦，此时考虑到用DataTemplete的LoadContent方法就可以很好的得到解决。
下面演示一个更改TabItem的Header例子。
&StackPanel x:Name="LayoutRoot" Background="White" Orientation="Vertical"&
&Button Content="Button" Height="23" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click"/&
&sdk:TabControl Height="100" x:Name="tabControl1" Width="200" HorizontalAlignment="Left" &
&/sdk:TabControl&
&/StackPanel&
添加一个Tabontrol,和一个Button，同过Button给TabControl添加TabITem项。
public MainPage()
InitializeComponent();
TabItem tbi1 = new TabItem();
tbi1.Header = "默认选中";
tabControl1.Items.Add(tbi1);
tabControl1.SelectedIndex = 0;
tabControl1添加一个默认的TabItem。
下面是重点，在Button的事件中添加TabItem,并且给这个TabITem添加数据模板实现关闭TabItem。
private void button1_Click(object sender, RoutedEventArgs e)
//新建TabItem
TabItem tbi = new TabItem();
//TabItem的DataTemplate
DataTemplate dt = (DataTemplate)System.Windows.Markup.XamlReader.Load(@"&DataTemplate xmlns=""/client/2007""&
&Border CornerRadius=""8,8,0,0""&
&Grid.ColumnDefinitions&
&ColumnDefinition Width=""*""/&
&ColumnDefinition Width=""20""/&
&/Grid.ColumnDefinitions&
&TextBlock Grid.Column=""0"" Text=""{Binding}"" Margin=""0,0,5,0""&&/TextBlock&
&Grid Grid.Column=""1"" Cursor=""Hand"" HorizontalAlignment=""Right"" Name=""Close"" Width=""20"" Height=""20"" &
&Grid.Background&
&ImageBrush ImageSource=""/SilverlightDateTcomponent/Close.png"" /&
&/Grid.Background&
&/DataTemplate&");
var Panel = dt.LoadContent() as B
//绑定Header
Panel.DataContext = "新建";
if (Panel != null)
var img = Panel.FindName("Close") as G
if (img != null)
//添加关闭事件
img.MouseLeftButtonUp += (s, ex) =& { ex.Handled = TabItemClose(tbi); };
tbi.Header = P
tabControl1.Items.Add(tbi);
/// &summary&
/// 关闭TabItem事件
/// &/summary&
/// &param name="tbi"&&/param&
private void TabItemClose(TabItem tbi)
tabControl1.Items.Remove(tbi);
代码注释很详细就不多做解释了。
运行效果：
可以通过上面的图标关闭TabItem。实际效果请下载示例代码。
这个代码生成的DataTemplate可以在xaml中定义在资源里面，可以通过如下代码搞定：
var template = UsercontrolName.Resources["TemplateKey"] as DataT
放在资源文件里有一个弊端就是实现事件比较困难，如果哪儿位同学有更好的办法欢迎交流。
示例代码：
阅读(...) 评论()DataTemplate在silverlight中用来描述数据对象的可是结构。DataTemplate的对象树必须有一个根元素，可以有任意个子元素。在使用中常用作ListBox等对象的ItemTemplete来改变控件外观和解决一些数据的绑定，这个使用比较简单，在此我们不多做说明，本文主要介绍DataTemplate的LoadContent 方法。LoadContent：该方法创建DataTemplete的UIElement对象，可以将这些对象添加到其他UIElement可视化树中。
在实际应用中我们可以通过样式、模板等方法改变控件外观，并且可以给样式或者模板中的样式添加事件，比如说给柱状图中柱状图形添加一个鼠标事件，TabControl的TabItem添加一个关闭事件，这些有的在样式中并不好控制，如果系统需要换肤应用起来更加麻烦，此时考虑到用DataTemplete的LoadContent方法就可以很好的得到解决。
下面演示一个更改TabItem的Header例子。
&StackPanel x:Name="LayoutRoot" Background="White" Orientation="Vertical"&
&Button Content="Button" Height="23" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click"/&
&sdk:TabControl Height="100" x:Name="tabControl1" Width="200" HorizontalAlignment="Left" &
&/sdk:TabControl&
&/StackPanel&
添加一个Tabontrol,和一个Button，同过Button给TabControl添加TabITem项。
public MainPage()
InitializeComponent();
TabItem tbi1 = new TabItem();
tbi1.Header = "默认选中";
tabControl1.Items.Add(tbi1);
tabControl1.SelectedIndex = 0;
tabControl1添加一个默认的TabItem。
下面是重点，在Button的事件中添加TabItem,并且给这个TabITem添加数据模板实现关闭TabItem。
private void button1_Click(object sender, RoutedEventArgs e)
//新建TabItem
TabItem tbi = new TabItem();
//TabItem的DataTemplate
DataTemplate dt = (DataTemplate)System.Windows.Markup.XamlReader.Load(@"&DataTemplate xmlns=""/client/2007""&
&Border CornerRadius=""8,8,0,0""&
&Grid.ColumnDefinitions&
&ColumnDefinition Width=""*""/&
&ColumnDefinition Width=""20""/&
&/Grid.ColumnDefinitions&
&TextBlock Grid.Column=""0"" Text=""{Binding}"" Margin=""0,0,5,0""&&/TextBlock&
&Grid Grid.Column=""1"" Cursor=""Hand"" HorizontalAlignment=""Right"" Name=""Close"" Width=""20"" Height=""20"" &
&Grid.Background&
&ImageBrush ImageSource=""/SilverlightDateTcomponent/Close.png"" /&
&/Grid.Background&
&/DataTemplate&");
var Panel = dt.LoadContent() as B
//绑定Header
Panel.DataContext = "新建";
if (Panel != null)
var img = Panel.FindName("Close") as G
if (img != null)
//添加关闭事件
img.MouseLeftButtonUp += (s, ex) =& { ex.Handled = TabItemClose(tbi); };
tbi.Header = P
tabControl1.Items.Add(tbi);
/// &summary&
/// 关闭TabItem事件
/// &/summary&
/// &param name="tbi"&&/param&
private void TabItemClose(TabItem tbi)
tabControl1.Items.Remove(tbi);
代码注释很详细就不多做解释了。
运行效果：
可以通过上面的图标关闭TabItem。实际效果请下载示例代码。
这个代码生成的DataTemplate可以在xaml中定义在资源里面，可以通过如下代码搞定：
var template = UsercontrolName.Resources["TemplateKey"] as DataT
放在资源文件里有一个弊端就是实现事件比较困难，如果哪儿位同学有更好的办法欢迎交流。
示例代码：
阅读(...) 评论()博客分类：
定制cell 模板
写一个自定义的format
$("div.returnValue").live('click',function(){
alert($(this).attr("rel"));
function custFormat( cellvalue, options, rowObject ){
return '&div style="color:" class="returnValue" rel="'+options.rowId+'"&'+cellvalue+' &/&';
function custUnFormat( cellvalue, options, cell){
return $('div').html();
colModel:[
{name:'act',index:'act', width:60,},
{name:'id',index:'id', width:60, sorttype:"int",formatter:custFormat, unformat:custUnFormat},
定义col的时候预留一个col
colNames:['Action',....'],
colModel:[
{name:'act',index:'act', width:60,},
..........
加载完grid的时候再去填充这个col
gridComplete: function(){
var ids = jQuery("#gridTable").jqGrid('getDataIDs');
for(var i=0;i & ids.i++){
var cl = ids[i];
be = "&input style='height:22width:60' type='button' value='return' onclick=\"alert('"+cl+"');\"
jQuery("#gridTable").jqGrid('setRowData',ids[i],{act:be});
设置各行的宽度， 不要设grid的宽度
loadComplete:function(data){
jQuery("#gridTable").setGridWidth(850,false);
查询分页的时候postData
传参数不上服务器
后来google了后
发现要这么写
postData:{
firstRowid:function() { return $("#firstRowid").val(); },
lastRowid:function() { return $("#lastRowid").val(); },
currentPage:function() { return $("#currentPage").val(); },
注意逗号要和我的一样多
&table id="users" style="font-size:11font-family:Calibri,T"&&/table&
$("#users").jqGrid({
url:'search',
datatype: "json",
colNames:[
ondblClickRow: function(id){
var row=$("#users").getRowData(id);
//根据ID拿到一行的数据
$("#Select").val(row.rowName);
$.fn.colorbox.close();
colModel:[
{name:'id',index:'id',width:40,sortable:true,hidden:true},
{name:'rowName',index:'indexName',width:105,sortable:true},
中 name是js端用来获取rowData的值时用的
index是传到服务器端用来做 searchField ,
sidx (orderby 的字段)
和extjs不同的是 服务器传过来的json数据，他是按顺序一个一个填充到列里去的，服务器上的json属性名和colModel中的不一样也可以
{name:'invdate',index:'invdate', width:90, jsonmap:"invdate"},这个jsonmap才是做映射的
可以进行的操作， 不同类型字段 不同查询
{name:'email',index:'email',width:160,sortable:true,searchoptions:{sopt:['eq','ne','cn','nc']}}
{name:'cellphone',index:'cellphone',width:90,sortable:true,searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}},
/blog/jqgrid/jqgrid.html
http://www.secondpersonplural.ca/jqgriddocs/index.htm
/jqgridwiki/doku.php?id=wiki:search_config
===============================================================
http://blog.csdn.net/alfoo/archive//5434022.aspx
如何获取grid
选中的行的ID
var rowid = $("#searchResultList
").getGridParam("selrow
如何在表格中动态增加一行数据？
//$("#jqgrid").addRowData(rowId, data, pos, idx);
//pos可以为[first,last,before,after],为后两者是需要指定相对的行ID
$("#jqgrid
").addRowData("1
":12}, "first
如何动态修改某行的数据内容，如某几列的值？
//setRowData( rowid, data );
$("#jqgrid
").setRowData( "1
", { tax:"5
", total:"205
的常用属性？
$("#jqgrid
").jqGrid({
url:"${ctx}/sys/role/search.dm
colNames:["角色名称
"],//,"角色代码"
colModel:["roleName
"],//"roleCode"还可以用对象替换
jsonReader:{id:"roleId
",root:"dataList
width:240,
height:250,
rowNum:20,//每页20条记录
pager: "logListPager
",//分页显示的DIVID
sortname: "actionTime
",//默认排序的列名
sortorder: "desc
",//默认排序的顺序
,//鼠标滚动翻页
onSelectRow: function
(rowid) {}
获取某一行的数据对象？
rowid = $("#searchResultList
").getGridParam("selrow
rowData = $("#searchResultList
").getRowData(rowid);
如何使用API
动态修改选中的行？
//true:重新加载表格数据, false:不重新加载表格数据
$("#jqGrid
").setSelection("1
浏览 11667
浏览: 815442 次
来自: 上海
lankk 写道事实上，在运行String s1=new St ...
事实上，在运行String s1=new String(&qu ...
同意1楼的说法/j ...
理解了。之前困惑的一些明白了。谢谢分享。
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> 鼠标悬停在没有文字内容图片上时图片上方显示文字，完全是纯实现。CSS实现鼠标悬停放图片上方时显示美化内容。
原始图片显示没有文字在上方，当鼠标经过悬停时显示文字并且文字背景为半透明。可以使用纯S实现鼠标悬停图片上显示内容。
纯实现第一张图片没有文字内容，鼠标悬停时出现第二张图那样效果
使用div css实现鼠标悬停图片上方时显示文字内容原理：
首先我们设置一个盒子对象，并且将图片使用style标签内设置为CSS背景图片，同时设置该对象超链接display:none隐藏，该超链接锚文本内放好文字内容，最后设置鼠标悬停经过整个对象时候显示内容。
需要注意是，我们使用了超链接位于该盒子对象下方，并且为了美化效果给 a标签宽度与对象宽度相同，设置一定高度，设置为。
同时为了兼容IE6我们使用了。控制阅读了解支持。本效果兼容各大浏览器包括IE6。
完整如下：
&!DOCTYPE&html&&&&charset=&utf-8&&&鼠标悬停图片上显示文字&在线演示&&&img{border:0}/*&说明：设置图片边框为0&*/&body{behavior:url(&csshover.htc&);text-align:}/*&说明：兼容ie6&支持标签使用hover&*/&.divcss5{&position:width:554&height:346margin:0&auto}&.divcss5 a,.divcss5 span{display: text-decoration:none}.divcss5:hover{cursor:pointer}&.divcss5:hover a.now{cursor: position: top:0; width:100%; height:100%; z-index:100; left:0; display:}.divcss5:hover span{ display:position: bottom:0; left:0;color:#FFF;width:554 z-index:10;height:36 line-height:36 background:#000;filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;}/*&设置显示文字定位位置，&*/&&&&&&&class=&divcss5&&style=&background:url(imgexp.png)&
文字内容&href=&#&&class=&now&&&&&class=&divcss5&&style=&background:url(imgexp.png)&欢迎访问DIVCSS5网站&href=&/&&class=&now&&&&&&&
本图片上显示与隐藏文字内容简单实用，程序使用方便。特别说明，我们在标签内直径使用style属性加背景图片是为了让程序好使用。
纯CSS+DIV实现鼠标放在图片上方出现文字内容效果截图
在线演示：
打包完整源代码文件下载：
相关DIV+CSS+JQ特效：如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 18:11
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台