关于webix数据表格用法完整示例

 

一、    概要

本文解决webix环境简单实现数据表格显示,内容有

1、        多条记录垂直滚动时,锁住标题行

2、        数据表格,每个字段自动排序

3、        数据翻页

4、        数据分组统计(求和、记录数、最大值、最小值)

5、        中文字符集

6、        浏览器运行环境

二、    处理效果处理

关于webix数据表格用法完整示例_第1张图片

关于webix数据表格用法完整示例_第2张图片






 

二、  webix组件引入

           

           

                





三、    浏览器及中文汉字要求

1、        html5字符集要求

如果没有这行代码,在所有浏览器中,汉字乱码,不支持html4及以下字符集设置

2、        webix可以正常运行的浏览器

fireFox46.x,全部支持

chrome44.x,全部支持

edge,可以运行部分功能

ie10/11不支持

 

 

四、  编程要点

1、        组件运行空间设置

可以用一组

布置相对位置,示例如下

 

            下面表格是原始数据

           

           

           

           


            下面表格是前面表格统计之后的数据

           

             

 

2、        运行初始化,即页面载入后的运行点

webix.ready(function(){

//在此运行的代码,是body οnlοad=”页面载入完成事件()”

})

3、        原始数据显示示例及说明,包括翻页

webix.ui({

                    container:"testA",//由

决定

                    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",//由

决定

                      size:14,   //每次从结果集中取得14条记录

                      group:9,  //每页显示记录数

                      page:3    //结果集开始显示页号

                 }    

      }   

 );

 

 

4、        数据统计及编程说明

     var myformat = webix.i18n.numberFormat;//用于统计公式

 webix.ui({

                    container:"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",  //由

决定

                      size:10,   //每次从结果集中取得10条记录

                      group:6,  //每页显示记录数

                      page:3    //结果集开始显示页号

                 }

    

      }   

 );

 

 



 

六、关于运行时数据源扩展

运行的数据源可以放在许多地方

1、        javascript文件中

你可能感兴趣的:(网页设计,webix,前端)