ExtJS4.2学习(五)表格渲染与复选框



 前几章做的例子,你有没有发现太单调啦?呵呵,相信聪明的你一定知道,光显示文字,那这功能太弱爆了吧,现在我们来看下ExtJs给我们带来的表格渲染和复选框等功能。WBg思考者日记网-束洋洋个人博客

QQ截图20131110000800.jpgWBg思考者日记网-束洋洋个人博客

有的人问我了,为什么你们的默认表格样式和我做的效果图不一样呢,呵呵,那是因为我引入了ExtJS4.2的其他样式,并非默认的样式,换样式很简单,只需要更改Link引入的文件就可以很轻松的换各种样式,哇~是不是很给力啊,你敢信?WBg思考者日记网-束洋洋个人博客

好了,不扯远了,下面看这章要做的效果图:WBg思考者日记网-束洋洋个人博客

QQ截图20131110221248.jpgWBg思考者日记网-束洋洋个人博客

怎么样,是不是很丰富?WBg思考者日记网-束洋洋个人博客

先来说文字的颜色怎么变吧,详细你学过HTML+CSS一定知道怎么变,同理,在EXTJS里只需要用到renderer即可轻松做成HTML的效果,看下面的代码:WBg思考者日记网-束洋洋个人博客

{header:'状态',dataIndex:'status',width:80,renderer:function(value){  
	if(value=='可用'){  
		return "<span style='color:green;font-weight:bold';>可用</span><img src='images/right.gif' />";  
	} else {  
		return "<span style='color:red;font-weight:bold';>禁用</span><img src='images/wrong.gif' />";  
	}  
}}

 WBg思考者日记网-束洋洋个人博客

只需要在columns定义的时候将列的返回值更改为HTML即可。WBg思考者日记网-束洋洋个人博客

名称列的颜色值变色也是同样的方法,这里为了方便,我就自定义了一个方法,在renderer里引入即可,如下代码:WBg思考者日记网-束洋洋个人博客

//改变列颜色自定义renderner方法  
function renderMotif(data, cell, record, rowIndex, columnIndex, store){  
    var value = record.get('name');  
    cell.style="background-color:"+value;  
    return data;  
}

 WBg思考者日记网-束洋洋个人博客

列中引用:WBg思考者日记网-束洋洋个人博客

{header:'名称',dataIndex:'name',width:80, renderer:renderMotif},

 WBg思考者日记网-束洋洋个人博客

那上面的查询详细信息是什么呢?看下图:WBg思考者日记网-束洋洋个人博客

QQ截图20131110215639.jpgWBg思考者日记网-束洋洋个人博客

弹出这个单元格里的详细信息,主要代码如下:WBg思考者日记网-束洋洋个人博客

//自定义renderner方法  
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store){  
    var str="<input type='button' value='查询详细信息' onclick='alert(""+  
        "这个单元格的值是:"+value +"n"+  
        "这个单元格的配置是:{cellId:"+cellmeta.cellId+",id:"+cellmeta.id+",css:"+cellmeta.css+"}n"+  
        "这个单元格对应行的record是:"+record +",一行的数据都在里面n"+  
        "这是第"+rowIndex+"行n"+  
        "这是第"+columnIndex +"列n"+  
        "这个表格对应的Ext.data.Store在这里:"+ store +",随便用吧。"+"")' />";  
    return str;  
}

 WBg思考者日记网-束洋洋个人博客

列定义:WBg思考者日记网-束洋洋个人博客

{header:'描述',dataIndex:'descn',width:112,renderer:renderDescn}

 WBg思考者日记网-束洋洋个人博客

我们可以在渲染函数里得到多个参数,如下所示:WBg思考者日记网-束洋洋个人博客

  1. value:将要显示到单元格里的值;
  2. cellmeta:单元格的相关属性,主要有id和CSS;
  3. record:这行的数据对象,如果需要获取其他列的值,可以通过record.data["id"]的方式得到,这个属性很重要,我们经常会用到;
  4. rowIndex:行号,这里的行号指的是当前页中所有记录的顺序;
  5. columnIndex:当前列的列号;
  6. store:构造表格时传递的ds。表格里的所有数据都可以通过store获得。

 WBg思考者日记网-束洋洋个人博客

自动显示行号和复选框都是renderer的延伸。先来说自动显示行号,在列模型columns中加入RowNumber对象即可,如下代码:WBg思考者日记网-束洋洋个人博客

new Ext.grid.RowNumberer(), //自动显示行号

 WBg思考者日记网-束洋洋个人博客

同样,复选框还是要修改columns模型加入SelectionModel对象:WBg思考者日记网-束洋洋个人博客

//加入复选框组件,{checkOnly:true}会解决在操作中不慎选中了某一行就会变成选中一行的情况,只允许用户通过复选框执行选中  
    var sm = new Ext.selection.CheckboxModel({checkOnly:true});  
    //创建表格  
    var grid = new Ext.grid.GridPanel({  
        renderTo:'grid', //渲染位置  
        width:550,  
        height:250,  
        selModel:sm,  
        store:store, //转换后的数据  
        columns:columns, //显示列  
        stripeRows:true, //斑马线效果  
        //enableColumnMove: false, //禁止拖放列  
        //enableColumnResize: false, //禁止改变列宽度  
        loadMask:true //显示遮罩和提示功能,即加载Loading……  
        //forceFit:true //自动填满表格  
    });

 WBg思考者日记网-束洋洋个人博客

注:{checkOnly:true}会解决在操作中不慎选中了某一行就会变成选中一行的情况,只允许用户通过复选框执行选中。WBg思考者日记网-束洋洋个人博客

下面给出完整示例代码,代码中还说到了Ext.grid.GridView,大家注意看下。WBg思考者日记网-束洋洋个人博客

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Hello Extjs4.2</title>  
<link href="../ExtJS4.2/resources/css/ext-all-neptune.css" rel="stylesheet">  
<script src="../ExtJS4.2/ext-all.js"></script>  
<script src="../ExtJS4.2/locale/ext-lang-zh_CN.js"></script>  
<script type="text/javascript">  
//表格数据最起码有列、数据、转换原始数据这3项  
Ext.onReady(function(){  
    //定义列  
    var columns = [  
        {header:'编号',dataIndex:'id',width:50}, //sortable:true 可设置是否为该列进行排序  
        {header:'名称',dataIndex:'name',width:80},  
        {header:'描述',dataIndex:'descn',width:112},  
        {header:'状态',dataIndex:'status',width:80,renderer:function(value){  
            if(value=='可用'){  
                return "<span style='color:green;font-weight:bold';>可用</span><img src='images/right.gif' />";  
            } else {  
                return "<span style='color:red;font-weight:bold';>禁用</span><img src='images/wrong.gif' />";  
            }  
        }}  
      ];  
    //定义数据  
    var data =[  
        ['1','小王','描述01','可用'],  
        ['2','李四','描述02','禁用'],  
        ['3','张三','描述03','可用'],  
        ['4','束洋洋','思考者日记网','可用'],  
        ['5','高飞','描述05','禁用']  
    ];  
    //转换原始数据为EXT可以显示的数据  
    var store = new Ext.data.ArrayStore({  
        data:data,  
        fields:[  
           {name:'id'}, //mapping:0 这样的可以指定列显示的位置,0代表第1列,可以随意设置列显示的位置  
           {name:'name'},  
           {name:'descn'},  
           {name:'status'}  
        ]  
    });  
    //加载数据  
    store.load();  
    //表格控件默认使用RowModel,按住shift或者ctrl键单击鼠标就可以选择多行,如果希望只选择一行,可以使用singleSelect:true  
    //我发现我在写的时候,不用的情况下,我试了发现默认就是不可多选的  
    //var sm = new Ext.grid.RowModel({singleSelect:true});  
    //创建表格  
    var grid = new Ext.grid.GridPanel({  
        renderTo:'grid', //渲染位置  
        width:450,  
        height:150,  
        //selModel:sm,  
        store:store, //转换后的数据  
        columns:columns, //显示列  
        stripeRows:true, //斑马线效果  
        //enableColumnMove: false, //禁止拖放列  
        //enableColumnResize: false, //禁止改变列宽度  
        loadMask:true, //显示遮罩和提示功能,即加载Loading……  
        //forceFit:true //自动填满表格  
        viewConfig:{  
            columnsText:'显示的列',  
            scrollOffset:30, //表格右侧为滚动条预留的宽度,默认为20  
            sortAscText:'正序',  
            sortDescText:'倒序',  
            forceFit:true //表格会自动延展每列的长度,使内容填满整个表格  
        }  
    });  
});  
</script>  
</head>  
<body>  
<h1>我的ExtJS4.2学习之路</h1>  
<hr />  
作者:束洋洋  
开始日期:2013年11月10日 22:34:26  
<h2>深入浅出ExtJS之表格视图--Ext.grid.GridView</h2>  
<div id="grid"></div>  
</body>  
</html>

 WBg思考者日记网-束洋洋个人博客

QQ截图20131110233340.jpgWBg思考者日记网-束洋洋个人博客

 WBg思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 WBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类WBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型WBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格WBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题WBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框WBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据WBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格WBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型WBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGridWBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGridWBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格WBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单WBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditingWBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)WBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格WBg思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单WBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.FieldWBg思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件WBg思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditorWBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 WBg思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2WBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面WBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮WBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解WBg思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目WBg思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈