关于webix数据表格用法完整示例
一、 概要
本文解决webix环境简单实现数据表格显示，内容有
1、 多条记录垂直滚动时，锁住标题行
2、 数据表格，每个字段自动排序
3、 数据翻页
4、 数据分组统计(求和、记录数、最大值、最小值)
5、 中文字符集
6、 浏览器运行环境
二、 处理效果处理
二、 webix组件引入
|
<link rel="stylesheet" href="../codebase/webix.css"> <script src="../codebase/webix.js" ></script> <link rel="stylesheet" type="text/css" href="samples.css" > |
三、 浏览器及中文汉字要求
1、 html5字符集要求
<meta charset=”utf-8”>
如果没有这行代码，在所有浏览器中，汉字乱码，不支持html4及以下字符集设置
2、 webix可以正常运行的浏览器
fireFox46.x，全部支持
chrome44.x，全部支持
edge，可以运行部分功能
ie10/11不支持
四、 编程要点
1、 组件运行空间设置
可以用一组<div>布置相对位置，示例如下
|
<body> 下面表格是原始数据 <div id="testA"></div> <!-- 下面的pagerId用于翻页空间 --> <div id="pagerA"></div> <hr> 下面表格是前面表格统计之后的数据 <div id="testB"></div> <div id="pagerB"></div> |
2、 运行初始化，即页面载入后的运行点
webix.ready(function(){
//在此运行的代码，是body onload=”页面载入完成事件()”
})
3、 原始数据显示示例及说明，包括翻页
|
webix.ui({ container:"testA",//由<div id=”pagerA”>决定 view:"datatable", //为二维数据表格 leftSplit:1, //锁住最左边1列，如果锁住左列3列，则为leftSpit:3 rightSplit:2, //锁住最右边2列，如果锁住左列3列，则为rightSpit:3 yCount:7, //每页可显示记录数 width:500, select:"cell", //选择时，按行，可以为 true,row,cell,column columns:[ { id:"id", header:"编号", css:"rank", width:100,sort:"int"}, { id:"title", header:"主题",width:200,sort:"string"}, { id:"year", header:"年号" , width:80,sort:"int"}, { id:"rating", header:"等级" , width:80,sort:"int"}, { id:"rank", header:"级别" , width:80,sort:"int"}, { id:"votes", header:"投票", width:100,sort:"int"} ], //data:big_film_set, //运行OK //url:"testdata.html", //运行OK //url:"testdata.action",//运行OK url:"testdata.json",//运行OK pager:{ //翻页组件，实现翻页 container:"pagerA",//由<div id=”pagerA”>决定 size:14, //每次从结果集中取得14条记录 group:9, //每页显示记录数 page:3 //结果集开始显示页号 } } ); |
4、 数据统计及编程说明
|
var myformat = webix.i18n.numberFormat;//用于统计公式 webix.ui({ container:"testB",//由<div id=”testB”>决定 view:"datatable", select:"row", leftSplit:1, rightSplit:1, yCount:4, width:400, columns:[ { id:"year", header:"年号" , width:80,sort:"int"}, { id:"sumVotes", header:"票数求和", format:myformat,width:100,sort:"int"}, { id:"countVotes", header:"记录数", format:myformat,width:100,sort:"int"}, { id:"maxVotes", header:"票最大值", format:myformat,width:100,sort:"int"}, { id:"minVotes", header:"票最小值", format:myformat,width:100,sort:"int"} ] , //data:big_film_set, //运行OK //url:"testdata.html", //运行OK //url:"testdata.action",//运行OK url:"testdata.json",//运行OK
scheme:{ $group:{ by:"year", //分组 group by 字段名称 map:{ "year" :["year", ""],//分组字段 "countVotes":["*", "count"], //字段名称可以为：*, any，统计字段，sql计算count(*) "sumVotes":["votes", "sum"], //sql语句:sum(votes) "minVotes":["votes", "min"],//sql语句:max(votes) "maxVotes":["votes", "max"]//sql语句:min(votes) } }, $sort:"year" //显示排序字段 },
pager:{ //翻页组件 container:"pagerB", //由<div id=”pagerB”>决定 size:10, //每次从结果集中取得10条记录 group:6, //每页显示记录数 page:3 //结果集开始显示页号 }
} );
|
六、关于运行时数据源扩展
运行的数据源可以放在许多地方
1、 javascript文件中
<script src=”testdata.js”>
引用时代码
data：big_film_set,
2、 数据文件由后台java文件生成
可以是servlet数据流，json格式
可以是struts2数据流，json格式
可以是springmvc数据流，json格式
数据流后缀可以是任何格式，不一定是xxx.json,例如
xxx.html
xxx.action
xxx.text
。。。
均可以
|
//data:big_film_set, //运行OK //url:"testdata.html", //运行OK //url:"testdata.action",//运行OK url:"testdata.json",//运行OK
|
七、源文件说明
http://download.****.net/download/isscollege/10045779
可以直接导入到myeclipse环境，部署到tomcat后，不用修改一个字代码，即可运行
created by 刘明